$code-padding: 0 spacing(extra-tight);
$code-font-size: 1.15em;

.variationPositive {
  color: color('green', 'dark');
}

.variationNegative {
  color: color('red', 'dark');
}

.variationCode {
  position: relative;
  padding: $code-padding;
  border-radius: border-radius();
  background-color: color('sky', 'light');
  display: inline-block;
  font-size: $code-font-size;
  box-shadow: inset 0 0 0 1px color('sky');

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
  }
}

.variationStrong {
  @include text-emphasis-strong;
}

.variationSubdued {
  @include text-emphasis-subdued;
}