@use '../tokens' as t;

.region {
  position: fixed;
  z-index: t.z(toast);
  padding: t.space(4);
  pointer-events: none;
}

.placement-block-end-inline-end {
  inset-block-end: 0;
  inset-inline-end: 0;
}

.placement-block-start-inline-end {
  inset-block-start: 0;
  inset-inline-end: 0;
}

.placement-block-end-center {
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
  gap: t.space(2);
  inline-size: min(24rem, calc(100vw - #{t.space(8)}));
  list-style: none;
}

.toast {
  @include t.surface('surface-raised', 'lg');
  display: flex;
  align-items: flex-start;
  gap: t.space(3);
  padding: t.space(4);
  border-inline-start: t.stroke(heavy) solid var(--toast-accent);
  color: t.role('fg');
  pointer-events: auto;

  // A TRANSITION, not a keyframe animation, and `@starting-style` is what makes an entry
  // transition possible with no JS at all. The difference is interruption: a transition retargets
  // from wherever the property currently is when the state changes mid-flight, and a keyframe
  // animation restarts from its own `from`. A toast stack is the surface where that shows — a
  // second message arriving 200ms into the first one's entry restarted the whole stack's motion.
  // `opacity` and `translate` are the two the compositor can run without laying the page out again.
  opacity: 1;
  translate: 0 0;
  transition:
    opacity t.duration(base) t.easing(out),
    translate t.duration(base) t.easing(out);

  @starting-style {
    opacity: 0;
    translate: 0 t.space(3);
  }
}

.content {
  flex: 1;
  min-inline-size: 0;
}

.title {
  color: t.role('fg-strong');
  font-weight: t.weight(semibold);
  font-size: t.text(sm);
}

.body {
  color: t.role('fg-muted');
  font-size: t.text(sm);
}

.tone-neutral {
  --toast-accent: #{t.role('line')};
}

.tone-accent {
  --toast-accent: #{t.role('accent')};
}

.tone-success {
  --toast-accent: #{t.role('success')};
}

.tone-warning {
  --toast-accent: #{t.role('warning')};
}

.tone-danger {
  --toast-accent: #{t.role('danger')};
}

.tone-info {
  --toast-accent: #{t.role('info')};
}