@import "mixins/fontSize";
@import "palette";

@mixin status-color($color) {
  background: $color;
  box-shadow: 0 0 em-calc(7px) $color;
}
.status {
  display: inline-block;
  width: rem-calc(7px);
  height: rem-calc(7px);
  position: relative;
  top: em-calc(-1px);
  vertical-align: middle;
  border-radius: 50%;
  @include status-color($brand-color);
  &--warning {
    @include status-color($warning-color);
  }
  &--positive {
    @include status-color($positive-color);
  }
  &--negative {
    @include status-color($negative-color);
  }
  &--neutral {
    @include status-color($neutral-color);
  }
  &--pink {
    @include status-color($pink-color);
  }
  &--disabled {
    @include status-color(darken($placeholder-color, 8));
  }
}