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

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

$badgeDotBaseClass: '#{constants.$prefix}badge-dot';

$appearances: (
  infoPrimary: (
    bg: tokens.$bm-comp-badge-dot-color-info-primary-bg,
    text: tokens.$bm-comp-badge-dot-color-info-primary-text,
    borderCol: tokens.$bm-comp-badge-dot-color-info-primary-border,
  ),
  infoSecondary: (
    bg: tokens.$bm-comp-badge-dot-color-info-secondary-bg,
    text: tokens.$bm-comp-badge-dot-color-info-secondary-text,
    borderCol: tokens.$bm-comp-badge-dot-color-info-secondary-border,
  ),
  positive: (
    bg: tokens.$bm-comp-badge-dot-color-positive-bg,
    text: tokens.$bm-comp-badge-dot-color-positive-text,
    borderCol: tokens.$bm-comp-badge-dot-color-positive-border,
  ),
  warning: (
    bg: tokens.$bm-comp-badge-dot-color-warning-bg,
    text: tokens.$bm-comp-badge-dot-color-warning-text,
    borderCol: tokens.$bm-comp-badge-dot-color-warning-border,
  ),
  negative: (
    bg: tokens.$bm-comp-badge-dot-color-negative-bg,
    text: tokens.$bm-comp-badge-dot-color-negative-text,
    borderCol: tokens.$bm-comp-badge-dot-color-negative-border,
  ),
);

$emphasisLevels: (
  subtle: tokens.$bm-comp-badge-dot-typo-subtle,
  strong: tokens.$bm-comp-badge-dot-typo-strong,
);

.#{$badgeDotBaseClass} {
  display: inline-flex;
  align-items: center;
  gap: tokens.$bm-comp-badge-dot-space-gap;
  font: tokens.$bm-comp-badge-dot-typo-strong;
  min-width: min-content;
  color: map.get(map.get($appearances, infoPrimary), text);

  &:before {
    content: ' ';
    flex-shrink: 0;
    min-width: tokens.$bm-comp-badge-dot-size;
    width: tokens.$bm-comp-badge-dot-size;
    height: tokens.$bm-comp-badge-dot-size;
    border-radius: tokens.$bm-comp-badge-dot-radius;
    border-width: tokens.$bm-comp-badge-dot-border-width;
    background-color: var(
      --bm-comp-badge-dot-color,
      map.get(map.get($appearances, infoPrimary), bg)
    );
    border-color: var(
      --bm-comp-badge-dot-color,
      map.get(map.get($appearances, infoPrimary), borderCol)
    );
    border-style: solid;
    box-sizing: border-box;
  }

  &:dir(rtl):before {
    flex-direction: row-reverse;
  }

  @each $appearance, $values in $appearances {
    &--#{$appearance} {
      &:before {
        background-color: var(--bm-comp-badge-dot-color, map.get($values, bg));
        border-color: var(--bm-comp-badge-dot-color, map.get($values, borderCol));
      }

      color: map.get($values, text);
    }
  }

  @each $emphasis, $emphasisValue in $emphasisLevels {
    &--#{$emphasis} {
      font: $emphasisValue;
    }
  }
}