@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/HelperText';

$helperTextBaseClass: '#{constants.$prefix}helper-text';

$spaceTop: '--#{constants.$prefix}comp-helper-text-space-top';

$sizes: (
  sm: (
    message: tokens.$bm-comp-helper-text-typo-sm,
    icon: tokens.$bm-comp-helper-text-size-sm-icon,
  ),
  md: (
    message: tokens.$bm-comp-helper-text-typo-md,
    icon: tokens.$bm-comp-helper-text-size-md-icon,
  ),
);

$colors: (
  info: (
    icon: tokens.$bm-comp-helper-text-color-info-icon,
    message: tokens.$bm-comp-helper-text-color-info-text,
  ),
  warning: (
    icon: tokens.$bm-comp-helper-text-color-warning-icon,
    message: tokens.$bm-comp-helper-text-color-warning-text,
  ),
  positive: (
    icon: tokens.$bm-comp-helper-text-color-positive-icon,
    message: tokens.$bm-comp-helper-text-color-positive-text,
  ),
  negative: (
    icon: tokens.$bm-comp-helper-text-color-negative-icon,
    message: tokens.$bm-comp-helper-text-color-negative-text,
  ),
  disabled: (
    icon: tokens.$bm-comp-helper-text-color-info-icon,
    message: tokens.$bm-comp-helper-text-color-info-text,
  ),
);

.#{$helperTextBaseClass} {
  display: flex;
  gap: tokens.$bm-comp-helper-text-space-gap;
  margin-top: var(#{$spaceTop}, tokens.$bm-sem-space-0);

  @each $size, $sizeValue in $sizes {
    &--#{$size} &__message {
      font: map.get($sizeValue, 'message');
    }

    &--#{$size} {
      svg,
      ::slotted([slot='icon']) {
        width: map.get($sizeValue, 'icon');
        height: map.get($sizeValue, 'icon');
      }
    }
  }

  @each $appearance, $color in $colors {
    &--#{$appearance} &__message {
      color: map.get($color, 'message');
    }

    &--#{$appearance} {
      svg,
      ::slotted([slot='icon']) {
        color: map.get($color, 'icon');
      }
    }
  }

  &--disabled {
    opacity: tokens.$bm-sem-opacity-disabled;
  }

  svg,
  ::slotted([slot='icon']) {
    flex-shrink: tokens.$bm-sem-space-0;
    margin-top: tokens.$bm-sem-space-12;
  }
}