corex

@import "../main.css";

@layer components {
  
  .toast [data-scope="toast"][data-part="group"] {
    position: fixed;
  
    inset-inline-start: var(--viewport-offset-left);
    inset-inline-end: var(--viewport-offset-right);
    bottom: max(env(safe-area-inset-bottom, 0px), var(--viewport-offset-bottom));
    top: auto;
  
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }

  .toast [data-scope="toast"][data-part="root"] {
    @apply ui-root;
    max-width: var(--container-xs);
    translate: var(--x) var(--y);
    scale: var(--scale);
    z-index: var(--z-index);
    height: var(--height);
    opacity: var(--opacity);
    will-change: translate, opacity, scale;

    transition:
      translate 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
      scale 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
      opacity 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
      height 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
      box-shadow 200ms;

    &[data-state="closed"] {
      transition:
        translate 400ms cubic-bezier(0.06, 0.71, 0.55, 1),
        scale 400ms cubic-bezier(0.06, 0.71, 0.55, 1),
        opacity 200ms cubic-bezier(0.06, 0.71, 0.55, 1);
    }
  }

  .toast [data-scope="toast"][data-part="content"] {
    @apply ui-content;

    display: flex;
    flex-direction: column;

    padding: 0;
    overflow: hidden;
  }

  .toast [data-scope="toast"][data-part="header"] {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: calc(var(--spacing) * 2);
    border-block-end: 1px solid var(--color-border);
    padding-inline: --spacing(4);
    padding-block: --spacing(1);

  }

  .toast [data-scope="toast"][data-part="title"] {
    @apply ui-label;

    justify-content: start;
    width: 100%;
    min-width: 0;
    padding-inline: var(--spacing-space);
    font-weight: var(--font-weight-medium);

  }


  .toast [data-scope="toast"][data-part="description"] {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-medium);
    padding: --spacing(6);
    min-height: --spacing(14);
    white-space: pre-line;
  }

  .toast [data-scope="toast"][data-part="close-trigger"] {
    @apply ui-trigger ui-trigger--sm ui-trigger--square ui-trigger--ghost;

    justify-self: end;
  }

  .toast [data-scope="toast"][data-part="root"][data-type="error"] [data-scope="toast"][data-part="title"] {
    color: var(--color-ink-alert);
  }

  .toast [data-scope="toast"][data-part="root"][data-type="error"] [data-scope="toast"][data-part="progressbar"] {
    background: linear-gradient(to left,
        var(--color-alert-hover),
        var(--color-alert));
  }

  .toast [data-scope="toast"][data-part="root"][data-type="info"] [data-scope="toast"][data-part="title"] {
    color: var(--color-ink-info);
  }

  .toast [data-scope="toast"][data-part="root"][data-type="info"] [data-scope="toast"][data-part="progressbar"] {
    background: linear-gradient(to left,
        var(--color-info-hover),
        var(--color-info));
  }

  .toast [data-scope="toast"][data-part="root"][data-type="success"] [data-scope="toast"][data-part="title"] {
    color: var(--color-ink-success);
  }

  .toast [data-scope="toast"][data-part="root"][data-type="success"] [data-scope="toast"][data-part="progressbar"] {
    background: linear-gradient(to left,
        var(--color-success-hover),
        var(--color-success));
  }

  .toast [data-scope="toast"][data-part="progressbar"] {
    height: --spacing(1);
    background: linear-gradient(to left,
        var(--color-ink-muted),
        var(--color-ink));
    width: 100%;
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    animation-name: shrink;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-play-state: running;
    transform-origin: left;

    [data-paused] & {
      animation-play-state: paused;
    }

    [dir="rtl"] & {
      transform-origin: right;
    }
  }

  .toast [data-scope="toast"][data-part="loading-spinner"] {
    @apply ui-icon ui-icon--sm;

    display: none;
    min-height: --spacing(5);

    animation: spin 1s linear infinite;
  }

  .toast [data-scope="toast"][data-part="root"][data-duration-infinity="true"] [data-scope="toast"][data-part="loading-spinner"] {
    display: inline-flex;
  }

  .toast [data-scope="toast"][data-part="root"][data-duration-infinity="true"] [data-scope="toast"][data-part="progressbar"] {
    display: none;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes shrink {
    from {
      transform: scaleX(1);
    }

    to {
      transform: scaleX(0);
    }
  }
}


@utility toast--* {
  & [data-scope="toast"][data-part="group"] {
    gap: --value(--spacing-space-*, [length]);
  }

  & [data-scope="toast"][data-part="description"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
    padding: --value(--spacing-space-*, [length]);
    min-height: calc(--value(--spacing-*, [length]) * 14);
  }

  & [data-scope="toast"][data-part="header"] {
    gap: --value(--spacing-space-*, [length]);
    padding-inline: --value(--spacing-space-*, [length]);
    padding-block: --value(--spacing-space-*, [length]);
  }

  & [data-scope="toast"][data-part="title"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
  }
}