@import '../../styles/common';

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

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

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

.Badge {
  @include pip-color(color('ink', 'lightest'));
  display: inline-flex;
  align-items: center;
  padding: 0 $horizontal-padding;
  background-color: color('sky');
  border: border-width(thick) solid color('white');
  border-radius: $height;
  font-size: rem(13px);
  line-height: $height;
  color: color('ink', 'light');
}

.sizeSmall {
  font-size: font-size(caption, large-screen);
  line-height: $small-height;
}

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

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

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

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

.statusNew {
  background-color: color('sky');
  color: color('ink');
  font-weight: 500;
  border: none;
}

.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%;
}

.progressIncomplete {
  .Pip {
    background: transparent;
  }
}

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

.progressComplete {
  .Pip {
    background: linear-gradient(
      to top,
      currentColor,
      currentColor 50%,
      currentColor 50%
    );
  }
}
