$height: rem(20px);
$horizontal-padding: ($height / 2);

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

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

.p_ua {
  @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');
}

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

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

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

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

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

.p_ru .p_ml {
  background: transparent;
}

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

.p_e2 .p_ml {
  background: currentColor;
}

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