/* <ad-toast>: fixed status region in the bottom corner. */
ad-toast {
  position: fixed;
  inset-block-end: var(--space-s);
  inset-inline: var(--space-s);
  z-index: 90;
  display: grid;
  gap: var(--space-2xs);
  justify-items: end;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  max-inline-size: min(100%, 28rem);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-m);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
}

.toast__text {
  margin: 0;
  align-self: center;
}

.toast__close {
  flex: none;
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: inherit;
  font-size: 1.25em;
  line-height: 1;
}

.toast__close:hover {
  background: color-mix(in oklch, currentColor 15%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast-in var(--duration-base) var(--ease-out);
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }
}