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

.core-numeric-input {

  .react-numeric-input {
    width:                  100%;

    input {
      display:                block !important;
      width:                  100% !important;
      padding:                $uicore-inputs-padding-bordered $uicore-bordered-padding !important;
      margin:                 0 0 !important;
      font-family:            $uicore-font-family !important;
      font-size:              $uicore-font-size !important;
      line-height:            normal !important;
      color:                  $buic-text-color !important;
      background-color:       $buic-background-control !important;
      background-image:       none !important;
      border:                 1px solid $buic-inputs-border !important;
      border-radius:          $uicore-border-radius !important;
      box-shadow:             $buic-inputs-boxshadow 0px 1px 1px inset !important;
      box-sizing:             border-box;
      transition:             border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;

      &:-ms-input-placeholder {       color: $buic-foreground-disabled; }
      &::-webkit-input-placeholder {  color: $buic-foreground-disabled; }
      &::placeholder {                color: $buic-foreground-disabled; }

      &[disabled] {

        background-color:   $buic-background-control-disabled;
        border-color:       $buic-foreground-disabled;
        color:              $buic-foreground-disabled;
        cursor:             not-allowed;
        opacity:            $uicore-opacity-disabled;
      }

      &[readonly] {

        color:              $buic-foreground-muted;
        cursor:             default;
      }

      &:focus {
        border-color:       $buic-foreground-focus-border !important;
        outline:            0px !important;
        box-shadow:         $uicore-inputs-focus-gradient !important;
      }

    }

    b:nth-of-type(1) {
      i {
        border-color: transparent transparent $buic-foreground-muted !important;
      }
    }

    b:nth-of-type(2) {
      i {
        border-color: $buic-foreground-muted transparent transparent !important;
      }
    }

  }

}