/*
 * Toast Component
 * Toast-style fixed-position notifications
 */

@layer components {
  .toast-container {
    position: fixed;
    top: var(--block-space);
    right: var(--block-space);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .toast {
    padding: var(--block-space) var(--block-space-double);
    background-color: var(--color-white);
    border: var(--border-standard);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: toast-slide-in 300ms ease;
  }

  @keyframes toast-slide-in {
    from {
      opacity: 0;
      transform: translateX(var(--block-space));
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}