dl.toasts {
    @apply fixed top-4 right-4 z-100;
    --toast-delay: 7s;

    /* semantic info in a hidden title */
    dt {
        @apply h-0 invisible overflow-hidden;

        &.success + dd {
            @apply bg-green-500 text-white;
        }

        &.error + dd {
            @apply bg-red-500 text-primary;
        }

        &.info + dd {
            @apply bg-cyan-500 text-primary;
        }
    }

    /* toast itself */
    dd {
        @apply max-w-96 rounded-md px-4 py-3 translate-y-2 leading-tight font-medium;
        animation:
            toast-in 250ms ease-out forwards,
            toast-out 300ms ease-in forwards;
        animation-delay:
            0ms,
            var(--toast-delay);
    }
}

.toast__dismiss{
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  font-size: .875rem;
  margin-left: auto;
}

@keyframes toast-in {
    to {
        opacity: 1;
        translate: 0;
    }
}
@keyframes toast-out {
    to {
        opacity: 0;
        translate: 0 -0.5rem;
    }
}