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

// Callout variant tokens.
// `color` is darkened away from `border` where the border tone would not clear
// WCAG AA on the 15%-alpha background: warning #b45309 -> #92400e (6.3:1),
// error #dc2626 -> #991b1b (6.6:1, versus 3.8:1 unadjusted).
$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': #991b1b,
    'background': rgba(220, 38, 38, 0.15),
  ),
);

.callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid;

  // Icon and label share the first row; the message starts below them, flush
  // with the container padding rather than indented past the icon.
  &__header {
    display: flex;
    align-items: center;
    gap: 6px;
  }

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

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

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

  // With no label there is no header row to anchor the icon, so it would sit
  // alone on its own line. Fall back to placing it inline with the message.
  &--no-label {
    flex-direction: row;
    gap: 6px;
  }

  // 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');
    }
  }
}