/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
@use "~@itwin/core-react/lib/core-react/base/base" as *;

.component-quantity-number-input-container {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  .component-quantity-number-input-suffix {
    padding-left: 0.25em;
  }

  .component-quantity-number-input-value-and-buttons-container {
    position: relative;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    input {
      margin: 0;
      padding-right: 1.5em;
    }

    &.component-number-buttons-for-touch {
      input {
        padding-right: 3.5em;
      }
    }

    .component-quantity-number-input-buttons-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      height: 100%;
      @include uicore-centered;
      flex-direction: column;

      .component-quantity-number-input-button {
        font-size: 8px;
        outline: none;
        height: 100%;
        width: 100%;
        @include uicore-centered;

        &:hover {
          color: var(--iui-color-text-accent-hover);
          transition-duration: 150ms;
        }

        &.component-quantity-number-input-button-up {
          padding-top: 1px;
        }

        &.component-quantity-number-input-button-down {
          padding-top: 1px;
        }
      }

      &.component-number-buttons-for-touch {
        width: 3.5em;
        flex-direction: row-reverse;

        .component-quantity-number-input-button {
          font-size: 1em;

          &:hover {
            color: unset;
            transition-duration: unset;
          }

          &.component-quantity-number-input-button-up {
            padding-top: 2px;
          }

          &.component-quantity-number-input-button-down {
            padding-top: 2px;
          }
        }
      }
    }
  }

  &.component-quantity-number-input-disabled {
    .component-quantity-number-input-suffix {
      -webkit-user-select: none;
      user-select: none;
      color: var(--iui-color-text-disabled);
    }
    .component-quantity-number-input-button-up {
      pointer-events: none;
      color: var(--iui-color-text-disabled);
    }

    .component-quantity-number-input-button-down {
      pointer-events: none;
      color: var(--iui-color-text-disabled);
    }
  }
}