// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the 
//          version in your base theme's directory, 
//          for example alta/widgets/_oj.alta.formcontrol.inputnumber.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


@import "../../utilities/oj.utilities";
@import "oj.common.formcontrol.mixins";


@if $includeInputNumberClasses != false {
  @include module-include-once("common.inputnumber") {

    /* inputnumber */
    /* --------------------------------------------------------------- */

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-input-number:not(.oj-complete) {
        visibility: hidden;
      }      
    }

    .oj-inputnumber-wrapper {
      width: 100%; 
      // do not allow the buttons to wrap to the next line
      white-space: nowrap;
      // use inline-flex properties. This will grow the input and the buttons will take up 
      // the remaining width
      display: inline-flex;
      box-sizing: border-box;
    }

    /* Input field for inputnumber */
    .oj-inputnumber-input {
      
      // grow the input using the flex property
      flex: 1;
      // needed for the input to be able to shrink smaller than the browser
      // default width.  Because this has flex-grow of 1, it will always grow
      // to the available space of the parent container, which is what we want.
      width: 1em;
      // needed or else the input could overflow the container
      min-width: 1em;

      font-size: 100%;
        
      @include oj-form-control-input;
      // Border is on the oj-text-field-container div
      border-width: 0px;


      @if ($formControlPaddingHorizontal != null and $formControlPaddingHorizontal != 0)  {
        padding: 0 $formControlPaddingHorizontal;
      }
      @else {
        padding: 0 0;
      }

      @include oj-form-control-content-no-focus-padding; 
    }

    // Height is on an ancestor element, so set the the height to 100%
    .oj-inputnumber .oj-inputnumber-wrapper {
      height: 100%;
    }

    // space between input and buttons, if any space specified
    // note: need both of these because the old widget ojInputNumber
    // doesn't have the oj-text-field-middle
    // putting margin-right on input directly does not work for 
    // custom elements. It needs to be on the oj-text-field-middle dom.
    .oj-inputnumber.oj-has-buttons .oj-inputnumber-input,
    .oj-inputnumber.oj-has-buttons .oj-text-field-middle {

        @include oj-ltr() {
          margin-right: $inputNumberInputToButtonMargin;
        }
        @include oj-rtl() {
          margin-left: $inputNumberInputToButtonMargin;
        }

    }

    /* Disabled styling for the widget */
    .oj-inputnumber.oj-disabled .oj-inputnumber-input {
        color: $formControlValueColorDisabled;
        background-color: $formControlBgColorDisabled;
        opacity: $formControlOpacityDisabled;
    }

    .oj-inputnumber.oj-loading .oj-inputnumber-input {
      background-color: transparent;
      opacity: 1;
    }

    /* Styling for focus state */
    // same as inputText
    .oj-inputnumber:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-text-field-container {

        @include oj-form-control-content-focus;
        @include oj-form-control-content-focus-padding;        

    }

    /* styling for inputNumber's buttonset/buttons */
    // if there is space between input and buttons, then the buttons act like a buttonset
    // if there isn't space, then it looks like the input and buttons are wrapped in a single border.

    // height of buttons. we don't want the buttons to bleed outside the wrapper
    .oj-inputnumber .oj-buttonset {
      height: auto;
      box-sizing: border-box;
    }

    // .oj-button adds margin-bottom, so we need to remove it
    .oj-inputnumber .oj-inputnumber-button.oj-button {
      height: 100%;
      line-height: normal;
      margin-bottom: 0;
    }
    .oj-inputnumber .oj-button {


        width: $inputNumberButtonWidth;

    }

    // hide buttons when in readonly mode
    .oj-inputnumber.oj-read-only .oj-buttonset {
      display: none;
    }

    // don't show button's built-in focus outline.
    .oj-inputnumber-button.oj-button.oj-focus {
      outline-style: none;
    }

    // border-radius on the buttonset/buttons
    // buttonset uses the form control border radius
    // if there is no space between input and buttons, then use $formControlBorderRadius 
    // for end button (the up button)) and no border-radius for the inside button
    // otherwise default to the buttonset's border-radius


      $borderRadius: $buttonBorderRadius;
      @if ($inputNumberInputToButtonMargin == null or $inputNumberInputToButtonMargin == 0) {
        $borderRadius: 0;
      }
      // The leading edge of the buttonset should always have a border radius of 0.
      .oj-inputnumber .oj-buttonset {
        @include oj-ltr() {
          @include oj-border-top-left-radius(0, $slowOverride: false);
          @include oj-border-bottom-left-radius(0, $slowOverride: false);
        }
        @include oj-rtl() {
          @include oj-border-top-right-radius(0, $slowOverride: false);
          @include oj-border-bottom-right-radius(0, $slowOverride: false);
        }

        @include oj-border-radius-slowoverride();
      }
      // .oj-buttonset-first is applied to the first button of the buttonset.
      // override the first button with 0 radius
      .oj-buttonset-multi.oj-button-full-chrome .oj-inputnumber-button.oj-buttonset-first,
      .oj-buttonset-multi.oj-button-outlined-chrome .oj-inputnumber-button.oj-buttonset-first {
        @include oj-ltr() {
          @include oj-border-top-left-radius($borderRadius, $slowOverride: false);
          @include oj-border-bottom-left-radius($borderRadius, $slowOverride: false);
        }
        @include oj-rtl() {
          @include oj-border-top-right-radius($borderRadius, $slowOverride: false);
          @include oj-border-bottom-right-radius($borderRadius, $slowOverride: false);
        }

        @include oj-border-radius-slowoverride();
      }

      .oj-inputnumber .oj-buttonset {
        @include oj-ltr() {
          @include oj-border-top-right-radius($formControlBorderRadius, $slowOverride: false);
          @include oj-border-bottom-right-radius($formControlBorderRadius, $slowOverride: false);
        }
        @include oj-rtl() {
          @include oj-border-top-left-radius($formControlBorderRadius, $slowOverride: false);
          @include oj-border-bottom-left-radius($formControlBorderRadius, $slowOverride: false);
        }

        @include oj-border-radius-slowoverride();
      }
      // .oj-buttonset-last is applied to the last button of the buttonset.
      // override the first button with 0 radius
      .oj-buttonset-multi.oj-button-full-chrome .oj-inputnumber-button.oj-buttonset-last,
      .oj-buttonset-multi.oj-button-outlined-chrome .oj-inputnumber-button.oj-buttonset-last {
        @include oj-ltr() {
          @include oj-border-top-right-radius($borderRadius, $slowOverride: false);
          @include oj-border-bottom-right-radius($borderRadius, $slowOverride: false);
        }
        @include oj-rtl() {
          @include oj-border-top-left-radius($borderRadius, $slowOverride: false);
          @include oj-border-bottom-left-radius($borderRadius, $slowOverride: false);
        }

        @include oj-border-radius-slowoverride();
      }

    // end border-radius on buttonset

    // make borders look like they go around the input and buttonset if there is no space between
    // them.

    
      // if no margin, use the buttonset's border for the outsides
      @if ($inputNumberInputToButtonMargin == null or $inputNumberInputToButtonMargin == 0) {
        .oj-inputnumber .oj-inputnumber-button.oj-buttonset-first {
          border-top-width: 0;
          border-bottom-width: 0;
        }
      }
      @else {
        .oj-inputnumber .oj-inputnumber-button.oj-buttonset-first {
          border-top-width: 1px;
          border-bottom-width: 1px;
        }
      }

      .oj-inputnumber .oj-inputnumber-button.oj-buttonset-last {
        @if ($inputNumberInputToButtonMargin == null or $inputNumberInputToButtonMargin == 0) {
          @include oj-ltr() {
            border-right-width: 0;
          }
          @include oj-rtl() {
            border-left-width: 0;
          }
          border-top-width: 0;
          border-bottom-width: 0;
        }
        @else {
          @include oj-ltr() {
            border-right-width: 1px;
          }
          @include oj-rtl() {
            border-left-width: 1px;
          }
          border-top-width: 1px;
          border-bottom-width: 1px;
        }
      }
      //disabled up and down buttons
      .oj-inputnumber.oj-disabled .oj-buttonset {
        border-color: $formControlBorderColorDisabled;
      }
      .oj-inputnumber.oj-disabled .oj-inputnumber-button {
        border-color: $buttonBorderColorDisabled;
      }

    // The oj-form-control-inherit selector on an ancestor indicates that the form control should
    // inherit styles, like width/height/borders/colors/text-alignment, etc. This is used for
    // editable datagrid cells and editable table cells
    // -----------------------------------------------------------------------------------------
    // TODO: redo the comments, make mixins for the common properties
    
    // stretch the height
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-wrapper {
      height: 100%;
    }

    // if a focus border width is set reset it back to 0
    // TODO
    @if ($formControlInputBorderWidthFocus != null) {                      
      .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber:not(.oj-read-only).oj-focus .oj-text-field-container {
        border-width:0;
      }
    }

    // TODO the border styles for input number is still on the input and not on the label wrapper
    // This is because in mobile themes there is a gap between input field and the arrows
    // we need to figure out how the border should look on mobile themes and try to unify this.
    .oj-inputnumber.oj-invalid .oj-text-field-input {
      border-color: $borderColorError; 
    }

    .oj-inputnumber.oj-warning .oj-text-field-input {
      border-color: $borderColorWarning; 
    }
  }
}