/*
 * 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-messages {
    margin-block-end: var(--space-6);
  }

  .flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    animation: slide-up var(--duration-normal) var(--ease-out);
  }

  .flash:last-child {
    margin-block-end: 0;
  }

  .flash-dismiss {
    flex-shrink: 0;
    padding: var(--space-1);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      opacity: 1;
    }
  }

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

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

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

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