@import '../../../../../style/core/utilities.scss';

.dnb-forms-field-number {
  --number-control-button-border-color: black;
  --number-control-button-border-color--hover: darkgrey;
  --number-control-button-border-color--focus: darkgrey;
  --number-control-button-border-width--focus: 0.125rem;
  --number-control-button-background-color--hover: grey;
  --number-control-button-color--hover: black;
  --number-control-button-background-color--active: black;
  --number-control-button-color--active: lightgrey;
  --number-control-button--error: red;
  --number-control-button--error-contrast: white;
  --number-control-button-width--small: 2rem;
  --number-control-button-width--medium: 2.5rem;
  --number-control-button-width--large: 3rem;
  --forms-field-block--number-control-buttons-width--small: calc(
    var(--number-control-button-width--small) * 2
  );
  --forms-field-block--number-control-buttons-width--medium: calc(
    var(--number-control-button-width--medium) * 2
  );
  --forms-field-block--number-control-buttons-width--large: calc(
    var(--number-control-button-width--large) * 2
  );

  &__contents {
    &--has-controls {
      .dnb-input {
        &__input {
          align-items: center;
        }

        .dnb-input__border {
          border-radius: 0;

          // Remove original border outline
          &,
          &:hover,
          &:focus-within,
          html[data-whatinput='keyboard'] &:focus-within {
            box-shadow: none;
          }
        }
      }

      > .dnb-input__border--root {
        --input-border-inset: ;
        --input-border-inset--hover: ;
        --input-border-inset--active: ;
        --input-border-inset--focus: ;
        --input-border-inset--disabled: ;
      }

      .dnb-button--control-before,
      .dnb-button--control-after {
        @include hover() {
          background-color: var(
            --number-control-button-background-color--hover
          );
          color: var(--number-control-button-color--hover);
        }
        @include active() {
          background-color: var(
            --number-control-button-background-color--active
          );
          color: var(--number-control-button-color--active);
        }
      }
    }

    &--has-controls.dnb-input__status--error {
      .dnb-button--control-before,
      .dnb-button--control-after {
        color: var(--number-control-button--error);
        @include hover() {
          background-color: var(--number-control-button--error-contrast);
          color: var(--number-control-button--error);
        }
        @include active() {
          background-color: var(--number-control-button--error);
          color: var(--number-control-button--error-contrast);
        }
        &[disabled] {
          color: var(--number-control-button--error-contrast);
        }
      }
    }

    &--has-controls.dnb-input--disabled {
      .dnb-button--control-before[disabled],
      .dnb-button--control-after[disabled] {
        background-color: var(--color-black-3);
        color: var(--color-black-20);
      }
    }

    &--has-controls.dnb-forms-field-block__contents--width-small {
      width: calc(
        var(--forms-field-width--small) +
          var(--forms-field-block--number-control-buttons-width--small)
      );
      .dnb-button--control-before,
      .dnb-button--control-after {
        width: var(--number-control-button-width--small);
      }
    }
    &--has-controls.dnb-forms-field-block__contents--width-medium {
      width: calc(
        var(--forms-field-width--medium) +
          var(--forms-field-block--number-control-buttons-width--medium)
      );
      .dnb-button--control-before,
      .dnb-button--control-after {
        width: var(--number-control-button-width--medium);
      }
    }
    &--has-controls.dnb-forms-field-block__contents--width-large {
      width: calc(
        var(--forms-field-width--large) +
          var(--forms-field-block--number-control-buttons-width--large)
      );
      .dnb-button--control-before,
      .dnb-button--control-after {
        width: var(--number-control-button-width--large);
      }
    }
    &--has-controls.dnb-forms-field-block__contents--width-stretch {
      .dnb-button--control-before,
      .dnb-button--control-after {
        width: var(--number-control-button-width--large);
      }

      /* stylelint-disable-next-line no-descending-specificity */
      .dnb-input__border {
        flex-grow: 1;
      }
    }
  }

  // Ensure inputs to not overflow on xx-small (defined above), but exclude e.g. Autocomplete
  @include allBelow(xx-small) {
    .dnb-input__shell {
      width: 90%;
    }
  }
}