.c-StatusDot {
  @import "../resets/base";
  @import "../configs/color";

  $states: (
    online: _color(green),
    offline: _color(red),
    busy: _color(yellow),
    new: _color(green),
    active: _color(green),
    inactive: _color(grey, 600)
  );

  $sizes: (
    md: 8px,
    sm: 6px,
  );

  $borderWidth: 2px;
  $dotSize: 6px;
  $size: ceil($borderWidth * 2) + $dotSize;
  $defaultColor: _color(grey, 600);

  background-color: currentColor;
  border-radius: 50%;
  border: $borderWidth solid white;
  color: $defaultColor;
  height: $size;
  width: $size;

  &.is-inline {
    display: inline-block;
  }

  // Status
  @each $state, $color in $states {
    &.is-#{$state} {
      color: $color;
    }
  }

  // Sizes
  @each $name, $size in $sizes {
    $size: ceil($borderWidth * 2) + $size;
    &.is-#{$name} {
      height: $size;
      width: $size;
    }
  }

  &.is-icon {
    $size: 18px;
    background-color: white;
    border-width: 0;
    height: $size;
    width: $size;
  }
}

.c-StatusDot {
  @import '../resets/base';
  @import '../configs/color';

  $sizes: (
    md: 8px,
    sm: 6px
  );

  $borderWidth: 2px;
  $dotSize: 6px;
  $size: ceil($borderWidth * 2) + $dotSize;
  $defaultColor: _color(grey, 600);

  background-color: currentColor;
  border-radius: 50%;
  border: $borderWidth solid white;
  color: $defaultColor;
  height: $size;
  width: $size;

  &.is-inline {
    display: inline-block;
  }

  // Status
  &.is-active,
  &.is-online,
  &.is-new {
    border: none;
    color: _color(green);
  }

  &.is-offline {
    border-color: _color(red);
    color: white;
  }

  &.is-busy {
    border-color: _color(yellow);
    color: white;
  }

  &.is-inactive {
    border: none;
    color: _color(grey, 600);
  }

  // Sizes
  @each $name, $size in $sizes {
    $size: ceil($borderWidth * 2) + $size;
    &.is-#{$name} {
      height: $size;
      width: $size;
    }
  }

  &.is-icon {
    $size: 18px;
    background-color: white;
    border-width: 0;
    height: $size;
    width: $size;
  }
}

Fix status dots for color blindness
Fix status dots for color blindness
