/*
 * ==========================================================
 * VIBE TOAST CORE 1.0
 * ==========================================================
 */

.vb-toast-stack{
  position:fixed;

  z-index:1100;

  top:74px;
  right:18px;

  width:
    min(
      360px,
      calc(100vw - 28px)
    );

  display:flex;
  flex-direction:column;
  gap:8px;

  pointer-events:none;
}


.vb-toast{
  position:relative;

  display:grid;

  grid-template-columns:
    8px
    minmax(0,1fr)
    28px;

  gap:10px;

  align-items:flex-start;

  padding:
    12px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:13px;

  background:
    rgba(17,19,26,.96);

  box-shadow:
    0 18px 54px
    rgba(0,0,0,.34);

  backdrop-filter:
    blur(18px);

  pointer-events:auto;

  opacity:0;

  transform:
    translateY(-7px)
    scale(.985);

  transition:
    opacity
      var(--vb-motion-normal)
      var(--vb-ease),
    transform
      var(--vb-motion-normal)
      var(--vb-ease);
}


.vb-toast.is-open{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}


.vb-toast-marker{
  width:7px;
  height:7px;

  margin-top:4px;

  border-radius:999px;

  background:
    var(--vb-accent);

  box-shadow:
    0
    0
    10px
    var(--vb-accent-soft);
}


.vb-toast-content{
  min-width:0;
}


.vb-toast-title{
  color:
    var(--vb-text);

  font-size:13px;
  font-weight:800;
}


.vb-toast-message{
  margin-top:3px;

  color:
    var(--vb-muted);

  font-size:13px;
  line-height:1.45;

  overflow-wrap:anywhere;
}


.vb-toast-close{
  display:grid;
  place-items:center;

  width:28px;
  height:28px;

  padding:0;

  border:0;
  border-radius:8px;

  background:transparent;

  color:
    var(--vb-muted);

  font-size:16px;

  cursor:pointer;
}


.vb-toast-close:hover{
  background:
    rgba(255,255,255,.045);

  color:
    var(--vb-text);
}


.vb-toast[data-vb-toast="success"]{
  --vb-accent:
    var(--vb-success);
}


.vb-toast[data-vb-toast="error"]{
  --vb-accent:
    var(--vb-danger);
}


.vb-toast[data-vb-toast="warning"]{
  --vb-accent:
    var(--vb-warning);
}


@media(max-width:640px){

  .vb-toast-stack{
    top:auto;
    right:14px;
    bottom:14px;
    left:14px;

    width:auto;
  }

}


@media(prefers-reduced-motion:reduce){

  .vb-toast{
    transition:none;
  }

}