theforeman/foreman

@import "~@theforeman/vendor/scss/variables";
@import "~@theforeman/vendor/scss/mixins";

.foreman-numeric-input {
  position: relative;
  display: flex;

  .foreman-numeric-input-input-wrap {
    width: 100%;

    // Remove input style when this PR is merged: https://github.com/react-component/input-number/pull/262
    input {
      flex: 1;
      height: 26px;
      width: 100%;
      padding-right: $padding-small-vertical;
      box-sizing: border-box;
      font-size: inherit;
      border: 1px solid $input-border;
      border-radius: $input-border-radius;
      padding-left: $padding-small-vertical;
      display: block;
      appearance: none;
      line-height: normal;

      &:focus {
        @include form-control-outline;
      }

      &:hover {
        border-color: $input-border-hover;
      }

      &[disabled] {
        box-shadow: none;
        border-color: $input-border;
        color: #8b8d8f;
        cursor: not-allowed;
      }
    }
  }

  .foreman-numeric-input-handler-up-inner,
  .foreman-numeric-input-handler-down-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    margin: -0.3ex 0 0 -0.56ex;
  }

  .foreman-numeric-input-handler-up-inner {
    border-width: 0 0.6ex 0.6ex 0.6ex;
    border-color: transparent transparent $color-pf-black-600;
  }

  .foreman-numeric-input-handler-down-inner {
    border-width: 0.6ex 0.6ex 0 0.6ex;
    border-color: $color-pf-black-600 transparent transparent;
  }

  .foreman-numeric-input-handler-up {
    top: 2px;
    bottom: 50%;
    border-radius: 2px 2px 0 0;
    border-width: 1px 1px 0;
  }

  .foreman-numeric-input-handler-down {
    top: 50%;
    bottom: 2px;
    border-radius: 0 0 2px 2px;
    border-width: 0 1px 1px 1px;
  }

  .foreman-numeric-input-handler-up,
  .foreman-numeric-input-handler-down {
    position: absolute;
    right: 2px;
    width: 2.26ex;
    border-color: $color-pf-black-300;
    border-style: solid;
    text-align: center;
    cursor: default;
    transition: all 0.1s ease 0s;
    background: $color-pf-black-300;
    box-shadow: $color-pf-black-300 -1px -1px 3px inset, $color-pf-black-200 1px 1px 3px inset;

    &:hover {
      background: $color-pf-black-400;
    }

    &:active {
      background: $color-pf-black-500;
      box-shadow: 0 1px 3px $color-pf-black-300 inset, -1px -1px 4px $color-pf-black-200 inset;
    }

    &:disabled {
      opacity: 0.5;
      box-shadow: none;
      cursor: not-allowed;
    }
  }
}