/**
 * Fluid Framework - Alert & Toast Component
 * @layer components
 *
 * Alerts for inline feedback messages.
 * Toasts for transient notifications (positioned fixed).
 *
 * Alert Usage:
 *   <div class="alert" data-status="info">
 *     <p>This is an informational message.</p>
 *   </div>
 *
 *   <div class="alert" data-status="success" data-dismissible>
 *     <div class="alert__content">
 *       <strong class="alert__title">Success!</strong>
 *       <p>Your changes have been saved.</p>
 *     </div>
 *     <button class="alert__close" aria-label="Dismiss">&times;</button>
 *   </div>
 *
 * Statuses: data-status="info|success|warning|error"
 * Variants: data-variant="filled|outline|subtle" (default: subtle)
 *
 * Toast Usage:
 *   <div class="toast-container" data-position="top-right">
 *     <div class="toast" data-status="success">
 *       <div class="toast__content">
 *         <strong>Saved</strong>
 *         <p>Your changes are live.</p>
 *       </div>
 *     </div>
 *   </div>
 */

@layer components {
  /* ========================================
     ALERT - Inline Messages
     ======================================== */

  .alert {
    --_alert-color: var(--color-info);
    --_alert-fill: var(--color-info-fill);
    --_alert-on: var(--color-info-on);
    --_alert-bg: var(--color-info-subtle);
    --_alert-border: var(--color-info);

    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-card);
    border-inline-start: var(--border-width-thick) solid var(--_alert-border);
    background: var(--_alert-bg);
    color: var(--color-text);
    font-size: var(--step--1);
    line-height: 1.5;
    transition:
      opacity var(--duration-normal) var(--ease-fluid),
      translate var(--duration-normal) var(--ease-settle);
  }


  /* ========================================
     STATUS VARIANTS
     ======================================== */

  .alert[data-status="success"] {
    --_alert-color: var(--color-success);
    --_alert-fill: var(--color-success-fill);
    --_alert-on: var(--color-success-on);
    --_alert-bg: var(--color-success-subtle);
    --_alert-border: var(--color-success);
  }

  .alert[data-status="warning"] {
    --_alert-color: var(--color-warning);
    --_alert-fill: var(--color-warning-fill);
    --_alert-on: var(--color-warning-on);
    --_alert-bg: var(--color-warning-subtle);
    --_alert-border: var(--color-warning);
  }

  .alert[data-status="error"] {
    --_alert-color: var(--color-error);
    --_alert-fill: var(--color-error-fill);
    --_alert-on: var(--color-error-on);
    --_alert-bg: var(--color-error-subtle);
    --_alert-border: var(--color-error);
  }

  .alert[data-status="info"] {
    --_alert-color: var(--color-info);
    --_alert-fill: var(--color-info-fill);
    --_alert-on: var(--color-info-on);
    --_alert-bg: var(--color-info-subtle);
    --_alert-border: var(--color-info);
  }


  /* ========================================
     VISUAL VARIANTS
     ======================================== */

  /* Filled: solid background */
  .alert[data-variant="filled"] {
    background: var(--_alert-fill);
    color: var(--_alert-on);
    border-inline-start: none;
  }

  .alert[data-variant="filled"] .alert__title {
    color: inherit;
  }

  /* Outline: border only */
  .alert[data-variant="outline"] {
    background: transparent;
    border: var(--border-width) solid var(--_alert-border);
    border-inline-start-width: var(--border-width-thick);
  }


  /* ========================================
     ALERT STRUCTURE
     ======================================== */

  /* Icon placeholder (before content) */
  .alert__icon {
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--_alert-color);
    margin-block-start: 1px;
  }

  .alert__content {
    flex: 1;
    min-inline-size: 0;
  }

  .alert__title {
    font-weight: calc(700 + var(--_dark-weight));
    color: var(--_alert-color);
    margin-block-end: var(--space-1);
    display: block;
  }

  .alert__content p {
    margin: 0;
  }

  .alert__close {
    --_btn-bg: transparent;
    --_btn-bg-hover: transparent;

    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-fluid);
  }

  /* Extend touch target to 44px minimum */
  .alert__close::before {
    content: "";
    position: absolute;
    inset: -0.625rem;
  }

  .alert__close:hover {
    color: var(--color-text);
  }

  /* Dismissing animation */
  .alert[data-dismissing] {
    opacity: 0;
    translate: var(--space-4);
  }

  .alert[data-dismissing]:dir(rtl) { translate: calc(-1 * var(--space-4)); }


  /* ========================================
     TOAST CONTAINER
     Fixed position notification area
     ======================================== */

  .toast-container {
    position: fixed;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    pointer-events: none;
    max-inline-size: min(100%, 24rem);
  }

  /* Positions */
  .toast-container[data-position="top-right"],
  .toast-container:not([data-position]) {
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .toast-container[data-position="top-left"] {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .toast-container[data-position="bottom-right"] {
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .toast-container[data-position="bottom-left"] {
    inset-block-end: 0;
    inset-inline-start: 0;
  }

  .toast-container[data-position="top-center"] {
    inset-block-start: 0;
    inset-inline: 0;
    margin-inline: auto;
  }

  .toast-container[data-position="bottom-center"] {
    inset-block-end: 0;
    inset-inline: 0;
    margin-inline: auto;
  }


  /* ========================================
     TOAST - Individual Notification
     ======================================== */

  .toast {
    --_toast-accent: var(--color-info);
    --_toast-fill: var(--color-info-fill);
    --_toast-on: var(--color-info-on);
    --_toast-bg: var(--color-info-subtle);
    --_dir: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--_toast-bg);
    border-inline-start: var(--border-width-thick) solid var(--_toast-accent);
    border-radius: var(--radius-card);
    pointer-events: auto;
    inline-size: 100%;

    /* Entry animation */
    animation: toast-in var(--duration-normal) var(--ease-settle) both;
  }

  .toast[data-status="success"] { --_toast-accent: var(--color-success); --_toast-fill: var(--color-success-fill); --_toast-on: var(--color-success-on); --_toast-bg: var(--color-success-subtle); }
  .toast[data-status="warning"] { --_toast-accent: var(--color-warning); --_toast-fill: var(--color-warning-fill); --_toast-on: var(--color-warning-on); --_toast-bg: var(--color-warning-subtle); }
  .toast[data-status="error"]   { --_toast-accent: var(--color-error); --_toast-fill: var(--color-error-fill); --_toast-on: var(--color-error-on); --_toast-bg: var(--color-error-subtle); }
  .toast[data-status="info"]    { --_toast-accent: var(--color-info); --_toast-fill: var(--color-info-fill); --_toast-on: var(--color-info-on); --_toast-bg: var(--color-info-subtle); }

  .toast:dir(rtl) { --_dir: -1; }

  .toast__icon {
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--_toast-accent);
    margin-block-start: 1px;
  }

  .toast__content {
    flex: 1;
    min-inline-size: 0;
  }

  .toast__content strong {
    display: block;
    font-weight: calc(700 + var(--_dark-weight));
    margin-block-end: var(--space-1);
  }

  .toast__content p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .toast__close {
    --_btn-bg: transparent;
    --_btn-bg-hover: transparent;

    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-subtle);
    cursor: pointer;
  }

  /* Extend touch target to 44px minimum */
  .toast__close::before {
    content: "";
    position: absolute;
    inset: -0.625rem;
  }

  .toast__close:hover {
    color: var(--color-text);
  }

  /* Toast action (undo link, etc.) */
  .toast__action {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    margin-block-start: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    color: var(--_toast-accent);
    background: transparent;
    border: var(--border-width) solid var(--_toast-accent);
    border-radius: var(--radius-control);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-fluid);
  }

  .toast__action:hover {
    background: var(--_toast-fill);
    color: var(--_toast-on);
  }

  /* Auto-dismiss progress bar */
  .toast[data-auto-dismiss]::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: 2px;
    background: var(--_toast-accent);
    animation: toast-progress var(--_toast-duration, 4s) linear both;
  }

  @keyframes toast-progress {
    from { inline-size: 100%; }
    to { inline-size: 0%; }
  }

  /* Exit animation */
  .toast[data-dismissing] {
    animation: toast-out var(--duration-fast) var(--ease-fluid) both;
  }


  /* ========================================
     TOAST ANIMATIONS
     ======================================== */

  /* Logical: the toast slides from and to the inline end (:dir sets --_dir). */
  @keyframes toast-in {
    from { opacity: 0; translate: calc(var(--space-4) * var(--_dir)) 0; }
  }

  @keyframes toast-out {
    to { opacity: 0; translate: calc(100% * var(--_dir)) 0; }
  }


  /* ========================================
     RESPONSIVE
     ======================================== */

  @media (max-width: 40rem) {
    .toast-container {
      max-inline-size: 100%;
      padding: var(--space-3);
    }
  }


  /* ========================================
     REDUCED MOTION
     ======================================== */

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

    .toast[data-dismissing] {
      animation: none;
      opacity: 0;
    }
  }
}