.angle-input {
  &:not(&--disabled) &__knob {
    height: 6px;
  }

  @media (hover: hover) {
    &:not(&--disabled):not(:active) &__knob-wrapper:hover &__knob {
      width: 6px;
      height: 6px;
    }
  }

  &:not(&--disabled):active &__knob {
    width: 12px;
    height: 12px;
    border-width: 3px;
  }

  /* stylelint-disable-next-line plugin/use-baseline -- the --wds-internal-theme style container query the theming system gates on */
  @container style(--wds-internal-theme: odeditor) {
    &:not(&--disabled) &__knob {
      transition:
        width 100ms linear,
        height 100ms linear;
    }

    @media (prefers-reduced-motion) {
      &:not(&--disabled) &__knob {
        transition: none;
      }
    }
  }
}