/* [project]/components/system/toast.css [app-client] (css) */
.tstack {
  z-index: 80;
  pointer-events: none;
  gap: 10px;
  width: min(420px, 100vw - 32px);
  display: grid;
  position: fixed;
  top: 76px;
  right: 16px;
}

.tstack .toast {
  --tc: var(--color-bone);
  pointer-events: auto;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 12%, #121217), #0e0e12 60%);
  border: 1px solid color-mix(in srgb, var(--tc) 38%, #2a2a34);
  border-left: 4px solid var(--tc);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  text-align: left;
  width: 100%;
  min-height: 66px;
  color: var(--color-bone);
  transition: opacity .26s var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    transform .26s var(--ease-out, cubic-bezier(.22, 1, .36, 1));
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 12px 12px;
  display: grid;
  position: relative;
}

@starting-style {
  .tstack .toast {
    opacity: 0;
    transform: translateY(-10px) scale(.98);
  }
}

.tstack .toast[data-leaving] {
  pointer-events: none;
  opacity: 0;
  transition-duration: .18s;
  transform: translateX(12px);
}

.tstack .t-ic {
  background: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  width: 44px;
  height: 44px;
  color: var(--tc);
  place-items: center;
  display: grid;
}

.tstack .t-ic svg {
  width: 24px;
  height: 24px;
}

.tstack .t-tx {
  min-width: 0;
}

.tstack .t-tx > b {
  font: 400 19px/1.1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  display: block;
}

.tstack .t-tx > span {
  font: 600 14px/1.3 var(--font-sans);
  color: var(--color-bone-dim);
  margin-top: 4px;
  display: block;
}

.tstack .nw {
  white-space: nowrap;
}

.tstack .frag {
  white-space: nowrap;
  vertical-align: -2px;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.tstack .frag svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.tstack .t-act {
  background: var(--tc);
  min-height: 34px;
  color: var(--color-ink);
  font: 800 13px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  padding: 0 13px;
  text-decoration: none;
  display: inline-flex;
}

.tstack .t-x {
  width: 32px;
  height: 32px;
  color: var(--color-muted);
  place-items: center;
  display: grid;
}

@media (hover: hover) and (pointer: fine) {
  .tstack .t-x:hover {
    color: var(--color-bone);
  }
}

.tstack .t-x svg {
  width: 16px;
  height: 16px;
}

.tstack .t-time {
  background: var(--tc);
  opacity: .75;
  transform-origin: 0;
  height: 3px;
  animation: toast-life var(--life, 5s) linear both;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.tstack .toast[data-paused="true"] .t-time {
  animation-play-state: paused;
}

.tstack .t-pack {
  --tc: var(--color-crimson);
}

.tstack .t-daily {
  --tc: #ff6b80;
}

.tstack .t-album {
  --tc: var(--color-steel);
}

.tstack .t-slow {
  --tc: #e9dfc8;
}

.tstack .t-copied {
  --tc: var(--color-rarity-u);
}

.tstack .t-info {
  --tc: #a3a3b0;
}

.tstack .t-network {
  --tc: #ff5a70;
  background: repeating-linear-gradient(-45deg, #ff2e4a12 0 6px, #0000 6px 14px), #0e0e12;
}

@keyframes toast-life {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (max-width: 767px) {
  .tstack {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    flex-direction: column-reverse;
    gap: 8px;
    width: auto;
    display: flex;
  }

  .tstack .toast {
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    gap: 8px;
    min-height: 48px;
    padding: 6px 4px 8px 8px;
  }

  @starting-style {
    .tstack .toast {
      opacity: 0;
      transform: translateY(10px) scale(.98);
    }
  }

  .tstack .toast[data-leaving] {
    transform: translateY(8px);
  }

  .tstack .t-ic {
    width: 32px;
    height: 32px;
  }

  .tstack .t-ic svg {
    width: 18px;
    height: 18px;
  }

  .tstack .t-tx > b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    overflow: hidden;
  }

  .tstack .t-tx > span {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    margin: 0;
    position: absolute;
    overflow: hidden;
  }

  .tstack .t-act {
    min-height: 32px;
    padding: 0 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tstack .toast {
    transition: opacity .15s;
  }

  .tstack .toast[data-leaving] {
    transition-duration: .15s;
    transform: none;
  }

  @starting-style {
    .tstack .toast {
      opacity: 0;
      transform: none;
    }
  }

  .tstack .t-time {
    display: none;
  }
}