$height: rem(18px);
$horizontal-padding: spacing(extra-tight);

$pip-size: rem(10px);
$pip-spacing: ($height - $pip-size) / 2;

@mixin pip-color($color) {
  .Polaris-Badge__Pip {
    color: $color;
  }
}

.Polaris-Badge {
  @include pip-color(color('ink', 'lightest'));
  display: inline-flex;
  align-items: center;
  padding: 0 $horizontal-padding;
  background-color: color('sky');
  margin: 2px 2px 2px 0;
  box-shadow: 0 0 0 2px white;
  border-radius: border-radius(small);
  font-size: rem(14px);
  line-height: $height;
  color: color('ink', 'light');
  cursor: default;
}

.Polaris-Badge--statusSuccess {
  @include pip-color(color('green', 'dark'));
  background-color: color('green', 'light');
  color: color('green', 'text');
}

.Polaris-Badge--statusInfo {
  @include pip-color(color('blue', 'dark'));
  background-color: color('blue', 'light');
  color: color('blue', 'text');
}

.Polaris-Badge--statusAttention {
  @include pip-color(color('yellow', 'dark'));
  background-color: color('yellow', 'light');
  color: color('yellow', 'text');
}

.Polaris-Badge--statusWarning {
  @include pip-color(color('orange', 'dark'));
  background-color: color('orange', 'light');
  color: color('orange', 'text');
}

.Polaris-Badge--statusDanger {
  @include pip-color(color('red', 'dark'));
  background-color: color('red', 'light');
  color: color('red', 'text');
}

.Polaris-Badge--statusNew {
  background: color('teal');
  color: color('white');
  border-radius: rem(10px);
  border: none;
  padding: 0 spacing(tight);
}

.Polaris-Badge--progressIncomplete .Polaris-Badge__Pip {
  background: transparent;
}

.Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip {
  background: linear-gradient(
    to top,
    currentColor,
    currentColor 50%,
    transparent 50%,
    transparent
  );
}

.Polaris-Badge--progressComplete .Polaris-Badge__Pip {
  background: currentColor;
}

.Polaris-Badge__Pip {
  height: $pip-size;
  width: $pip-size;
  margin: 0 spacing(extra-tight) 0 ($pip-spacing - $horizontal-padding);
  border: border-width(thick) solid currentColor;
  border-radius: 50%;
}