@import '../config/import';

// indicator() - Generates styles for Indicators
//
// Indicators have bunch of styles combines with bunch of states. To make
// it easier to generate all these classes, we created a help which should
// do the job.
//
// @param {object} $this          Cached variable with parent element
// @param {string} $name          Value for border-radius
// @param {color} $color-1        Main color.

@mixin indicator($this, $name, $color-1, $color-2) {
  &#{'--' + $name} {
    background-color: $color-1;
    border-color: $color-1;
    color: $color-2;

    &#{$this + '--outlined'} {
      background-color: transparent;
      color: $color-1;
      border-color: $color-1;
    }
  }
}

// Basic styling
.crayons-indicator {
  font-family: $ff-accent;
  font-size: $fs-xs;
  padding: $su-1;
  background-color: var(--indicator-default-bg);
  border: 1px solid var(--indicator-default-bg);
  color: var(--indicator-default-color);
  text-align: center;
  line-height: 1;
  border-radius: $br-default;
  display: inline-block;

  &--outlined {
    background-color: transparent;
    border-color: var(--indicator-default-bg);
    color: var(--indicator-default-color);
  }

  @include indicator(
    &,
    accent,
    var(--indicator-accent-bg),
    var(--indicator-accent-color)
  );
  @include indicator(
    &,
    critical,
    var(--indicator-critical-bg),
    var(--indicator-critical-color)
  );

  // Circle, no text
  &--bullet {
    width: $su-3;
    height: $su-3;
    padding: 0;
    border-radius: 100%;
  }
}
