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

.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: .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:   22px;
      @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: $buic-foreground-primary-tone;
          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;
          }
        }
      }
    }
  }
}