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

.variationPositive {
  color: var(--p-text-success);
}

.variationNegative {
  color: var(--p-text-critical);
}

.variationWarning {
  color: var(--p-text-warning);
}

.variationCode {
  position: relative;
  padding: 0 var(--p-space-1);
  border-radius: var(--p-border-radius-base);
  background-color: var(--p-surface-subdued);
  display: inline-block;
  font-size: var(--p-font-size-5);
  box-shadow: inset 0 0 0 1px var(--p-border-subdued);

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: var(--p-border-width-1) solid transparent;
    pointer-events: none;
  }
}

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

.variationSubdued {
  @include text-emphasis-subdued;

  @media print {
    color: var(--p-text-subdued);
  }
}