@import '../_variables.scss';
@import '../_mixins.scss';

@include exports('forms.input-number') {
  .fui-form-control.fui-form-control-number {
    .fui-control-container {
      .fui-input-wrapper {
        input:not([type='checkbox']):not([type='radio']):not(.fui-layout-small) {
          &.fui-number {
            border-right: none;
            @include border-right-radius(0);
          }
        }

        /* Firefox */
        input[type='number'] {
          -moz-appearance: textfield !important;
        }

        input:-webkit-autofill {
          -webkit-box-shadow: none !important;
        }

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none !important;
          margin: 0;
        }
      }

      &.fui-control-focus {
        .input-number-wrapper {
          input.fui-number {
            border-color: $gray-500;
          }
          .fui-number-increment-wrapper {
            .fui-number-btn {
              border-color: $gray-500;
            }
          }
        }
      }

      &.fui-disabled {
        .input-number-wrapper {
          .fui-number-increment-wrapper {
            .fui-number-btn {
              background-color: $gray-200;
              color: $gray-500;
              cursor: default;

              &:hover,
              &:focus,
              &.fui-number-incrementing,
              &.fui-number-decrementing {
                .fui-number-icon {
                  fill: $gray-500;
                  color: $gray-500;
                }
              }
            }
          }
        }
      }

      &.fui-error {
        .fui-control-icons {
          right: calc(#{$controls-padding} + #{map-get($spacers, 4)});
        }
      }
    }

    &:not(.fui-form-control-small) {
      .fui-control-container > *:not(.fui-checkbox-subtext-wrapper):not(.fui-radio-subtext-wrapper) {
        .fui-subtext {
          right: map-get($spacers, 4);
        }
      }
    }

    .input-number-wrapper {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      height: 100%;
      width: 100%;

      .fui-number-increment-wrapper {
        flex: 0 0 20px;
        width: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        .fui-number-btn {
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          background: $white;
          display: block;
          height: 1.5625rem; // 25px
          width: 100%;
          text-align: center;
          border: 1px solid $gray-300;
          cursor: pointer;

          &:hover,
          &:focus,
          &.fui-number-incrementing,
          &.fui-number-decrementing {
            .fui-number-icon {
              fill: $gray-900;
              color: $gray-900;
            }
          }

          &:first-of-type {
            border-bottom: none;
            border-top-right-radius: $border-radius;
          }

          &:last-of-type {
            border-bottom-right-radius: $border-radius;
          }

          .fui-number-icon {
            margin-left: -1px;
            width: 7px;
            height: 7px;
            font-size: 7px;
            fill: $gray-500;
            color: $gray-500;
          }
        }
      }
    }

    &.fui-form-control-small {
      .fui-control-container > *:not(.fui-checkbox-subtext-wrapper):not(.fui-radio-subtext-wrapper) {
        .fui-subtext {
          right: 1.5625rem; // 25px
        }
      }

      input.fui-layout-small {
        border-right: none !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;

        &:focus {
          border-color: $gray-500;
        }

        &[disabled] {
          background-color: $gray-200;
          color: $gray-500;
        }
      }

      .fui-number-increment-wrapper {
        .fui-number-btn {
          height: 1.09375rem !important; // 17.5px
          display: flex;
          justify-content: center;
          flex-flow: column nowrap;
          align-content: center;
          align-items: center;
        }
      }
    }
  }
}