$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) {
  .Biblio-Badge__Pip {
    color: $color;
  }
}

.Biblio-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');
}

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

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

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

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

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

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

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

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

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

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