@use '../../abstract';

$dot-color: (
  'neutral': var(--gray-500),
  'error': var(--primary-red-500),
  'warning': var(--orange-500),
  'success': var(--green-500),
  'blue': var(--blue-500),
  'pink': var(--pink-500),
  'violet': var(--violet-500),
  'disabled': var(--gray-300),
);

$dot-size: (
  'sm': 6px,
  'md': 8px,
  'lg': 10px,
);

.cds-dot {
  display: inline-flex;
  padding: 1px;

  &::before {
    border-radius: 50%;
    content: '';
    background-color: currentColor;
  }

  @each $name, $color in $dot-color {
    &--#{$name} {
      color: $color;
    }
  }

  @each $name, $size in $dot-size {
    &--#{$name}::before {
      width: $size;
      height: $size;
    }
  }
}