.dnb-forms-field-number {
  --number-control-separator-color: var(
    --number-control-separator-color--default
  );
  --number-control-separator-color--default: var(
    --token-color-background-action-hover-subtle
  ); // TODO: not defined in Figma: Uses button hover color.

  --number-control-separator-color--error: var(
    --token-color-component-button-background-action-destructive-hover-subtle
  ); // TODO: not defined in Figma: Uses button hover color.

  --number-control-separator-color--disabled: var(
    --token-color-background-action-disabled
  ); // TODO: not defined in Figma: Uses disabled token that is lighter than input border.

  --number-control-button-border-width--focus: var(--focus-ring-width);

  &__contents {
    &--has-controls {
      // There is no small size in Sbanken
      .dnb-button.dnb-button--size-small {
        --button-height--small: 2.5rem;
        --button-width--small: 2.5rem;
      }

      .dnb-input {
        position: relative;
        &::before,
        &::after {
          content: '';
          position: absolute;
          top: 0.25rem;
          bottom: 0.25rem;
          border-left: 1px solid var(--number-control-separator-color);
          z-index: 1;
        }
        &::before {
          left: -1px;
        }
        &::after {
          right: -1px;
        }
      }

      .dnb-button--control-before:not(:disabled):active
        ~ .dnb-input::before {
        z-index: -1;
      }
      .dnb-button--control-after:not(:disabled):active {
        z-index: 1;
      }
    }

    &.dnb-input__status--error {
      --number-control-separator-color: var(
        --number-control-separator-color--error
      );
    }

    &.dnb-input--disabled {
      --number-control-separator-color: var(
        --number-control-separator-color--disabled
      );
    }
  }
}