/*
 * Alerts and Flash messages
 * Flash: auto-dismiss notifications (Rails flash)
 * Alert: inline contextual messages
 */

@layer components {
  /* ==========================================================================
     Alert Component
     ========================================================================== */

  .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }

  .alert-icon {
    flex-shrink: 0;
    margin-block-start: 0.125rem; /* Align with first line of text */
  }

  .alert-content {
    flex: 1;
    min-width: 0;
  }

  .alert-dismiss {
    flex-shrink: 0;
    padding: var(--space-1);
    margin-block-start: -0.125rem;
    margin-inline-end: calc(-1 * var(--space-1));
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-fast) var(--ease-out);

    &:hover {
      opacity: 1;
    }
  }

  /* Alert variants */
  .alert-info {
    color: var(--color-info);
    background-color: var(--color-info-canvas);
    border: 1px solid var(--color-info-border);
  }

  .alert-success {
    color: var(--color-positive);
    background-color: var(--color-positive-canvas);
    border: 1px solid var(--color-positive-border);
  }

  .alert-warning {
    color: var(--color-warning);
    background-color: var(--color-warning-canvas);
    border: 1px solid var(--color-warning-border);
  }

  .alert-error {
    color: var(--color-negative);
    background-color: var(--color-negative-canvas);
    border: 1px solid var(--color-negative-border);
  }

  /* ==========================================================================
     Flash Messages (Rails flash)
     ========================================================================== */
  .flash-toaster {
    position: fixed;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    inline-size: min(30rem, calc(100vw - var(--space-8)));
    pointer-events: none;
  }

  .flash-toaster--bottom-right {
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
  }

  .flash-toaster--top-center {
    inset-block-start: var(--space-6);
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  body:has(.app-layout) .flash-toaster--top-center {
    inset-inline-start: calc(240px + ((100vw - 240px) / 2));
  }

  .flash {
    --flash-accent: var(--color-info);
    --flash-enter-transform: translate(var(--space-2), var(--space-2));
    --flash-exit-transform: translateX(var(--space-2));

    pointer-events: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-ink);
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--flash-accent) 12%, transparent), transparent 42%),
      var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--flash-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    animation: flash-in var(--duration-normal) var(--ease-out);
  }

  .flash-toaster--top-center .flash {
    --flash-enter-transform: translateY(calc(-1 * var(--space-3)));
    --flash-exit-transform: translateY(calc(-1 * var(--space-2)));
  }

  .flash-icon {
    display: inline-flex;
    color: var(--flash-accent);
  }

  .flash-message {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .flash-dismiss {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: var(--color-ink-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
      color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out);

    &:hover {
      color: var(--color-ink);
      background-color: var(--color-surface-muted);
    }
  }

  .flash-notice,
  .flash-success {
    --flash-accent: var(--color-positive);
  }

  .flash-alert,
  .flash-error {
    --flash-accent: var(--color-negative);
  }

  .flash-warning {
    --flash-accent: var(--color-warning);
  }

  .flash-info {
    --flash-accent: var(--color-info);
  }

  @keyframes flash-in {
    from {
      opacity: 0;
      transform: var(--flash-enter-transform);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (max-width: 40rem) {
    .flash-toaster,
    body:has(.app-layout) .flash-toaster--top-center {
      inset-inline: var(--space-4);
      inline-size: auto;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .flash {
      animation: none;
    }
  }
}