/* element matching input styles */
.textInput {
  height: 2rem;
  background-color: transparent;
  border-radius: $component-border-radius-md;

  display: flex;
  align-items: center;
  gap: 0.25rem;
  letter-spacing: 0.5px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;

  overflow: hidden;

  &.delayed {
    color: $ontime-delay-text;
  }

  &.muted {
    // we use opacity instead of colour to handle delayed values
    opacity: 0.4;
  }

  &:hover {
    background-color: $gray-1100;
    cursor: text;
  }
}