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

.core-number-input-container {
  position: relative;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

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

    &.core-input {
      padding: $uicore-iui-input-padding;
    }
  }

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

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

    .core-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;
      }
      &.core-number-input-button-up {
        padding-top: 1px;
      }
      &.core-number-input-button-down {
        padding-top: 1px;
      }
    }

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

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

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

        &.core-number-input-button-up {
          padding-top: 2px;
        }
        &.core-number-input-button-down {
          padding-top: 2px;
        }
      }
    }
  }
  &.core-number-input-disabled {
    .core-number-input-button-up {
      pointer-events: none;
      color: var(--iui-color-text-disabled);
    }

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