@charset "utf-8";

@layer components {
  .toast {
    --inset: 1rem;
    --toast-position: 0;

    position: fixed;
    inset-block-end: calc(
      var(--inset) + ((4rem + (var(--inset) / 2)) * var(--position))
    );
    inset-inline-end: var(--inset);
    z-index: 100;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 1.25rem;
    inline-size: min(100% - (2 * var(--inset)), 20rem);
    block-size: 4rem;
    overflow: hidden;
    background: var(--clr-neutral-25);
    border-radius: 0.625rem;
    box-shadow: 0 0.375rem 1.25rem -0.3125rem color-mix(in oklab, var(--clr-neutral-1000), transparent 91%);
    transition: inset 750ms calc(var(--position) * 75ms) cubic-bezier(0.68, -0.55, 0.265, 1.35);

    @media screen and (min-width: 48rem) {
      --inset: 1.7rem;
    }

    &.-enter-from,
    &.-leave-to {
      opacity: 0;
      transform: translateX(1.5rem);
    }

    &.-enter-to,
    &.-leave-from {
      opacity: 1;
      transform: translateX(0);
    }

    &.-success {
      --icon-background-color: var(--clr-success-500);
      --icon-color: var(--clr-success-800);
    }

    &.-warning {
      --icon-background-color: var(--clr-warning-500);
      --icon-color: var(--clr-warning-700);
    }

    &.-error {
      --icon-background-color: var(--clr-danger-500);
      --icon-color: var(--clr-danger-800);
    }

    &.-info {
      --icon-background-color: var(--clr-info-500);
      --icon-color: var(--clr-info-800);
    }

    & .toast-icon {
      display: grid;
      place-items: center;
      block-size: 100%;
      aspect-ratio: 1 / 1.125;
      background-color: var(--icon-background-color);

      & > i {
        color: var(--icon-color);
        font-size: 1.5rem;
        line-height: 1;
      }
    }

    & .toast-message {
      font-size: 0.875rem;
      font-variation-settings: "wght" 438;
      line-height: 1.375;
      opacity: 0.9;
    }

    & .toast-closer {
      padding-inline-end: 1.25rem;
      opacity: 0.38;
      transition: opacity 200ms ease-in-out;

      &:is(:focus,:focus-within,:hover) {
        opacity: 0.62;
      }
    }
  }
}