/**
 * Alert component base styles.
 *
 * Shared foundation styles for the alert component.
 * Provides flexbox layout, spacing via tokens, and interaction states.
 * Component-specific colors and sizing defined by consuming components.
 */

@use '../styles/variables' as tokens;

@layer components {
  .alert-root {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;

    border-radius: var(--vi-alert-border-radius, #{tokens.$border-radius-lg});
    padding: var(--vi-alert-padding, #{tokens.$spacing-xs} #{tokens.$spacing-md});
    gap: var(--vi-alert-gap, #{tokens.$spacing-sm});
    border-width: var(--vi-alert-border-width, 1px);
    border-style: solid;

    font-family: var(--vi-alert-font-family, #{tokens.$font-family-base});
    font-size: #{tokens.$font-size-sm};
    line-height: #{tokens.$line-height-normal};
  }

  .alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    // Slight padding to align nicely with the title text
    padding-top: 2px;
  }

  .alert-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
  }

  .alert-title {
    font-weight: tokens.$font-weight-semibold;
    margin-bottom: #{tokens.$spacing-unit};
    display: block;
  }

  .alert-body {
    // any general body styles
  }

  .alert-actions {
    display: flex;
    align-items: center;
    gap: tokens.$spacing-xs;
    margin-top: tokens.$spacing-sm;
  }
}