@use 'sass:map';
@use '../../styles/typography';
@use '../../styles/mixins';

// Callout variant tokens
$callout-variants: (
  'informative': (
    'border': #016197,
    'color': #016197,
    'background': rgba(1, 159, 209, 0.15),
  ),
  'warning': (
    'border': #b45309,
    'color': #92400e,
    'background': rgba(245, 158, 11, 0.15),
  ),
  'error': (
    'border': #dc2626,
    'color': #dc2626,
    'background': rgba(220, 38, 38, 0.15),
  ),
);

.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;

  &__icon {
    flex-shrink: 0;
    @include mixins.square(20px);
    font-size: 20px;
    line-height: 20px;
    margin-top: 1px;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__label {
    @include typography.text-xs;
    font-weight: map.get(typography.$font-weights, 'bold');
    letter-spacing: 0.05em;
  }

  &__text {
    @include typography.text-sm;
    margin: 0;
  }

  // Generate variant modifier classes
  @each $variant, $tokens in $callout-variants {
    &--#{$variant} {
      border-color: map.get($tokens, 'border');
      background-color: map.get($tokens, 'background');
      color: map.get($tokens, 'color');
    }
  }
}