// 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/

@import "../../utilities/oj.utilities";


// ----- start dependencies ---------

// set up include variables before importing dependencies
@if $includeInputNumberClasses != false {
  $includeIconClasses:              true !global;
  $includePopupClasses:             true !global;
  $includeButtonClasses:            true !global;
  $includeLabelClasses:             true !global;
  $includeMessagingClasses:         true !global;
  $includeFormControlCommonClasses: true !global;
}

// import dependencies
@import "../../common/helpers/oj.common.helpers"; 
@import "oj.alta.android.icons";
@import "oj.alta.android.button";
@import "oj.alta.android.messaging";
@import "oj.alta.android.popup";
@import "oj.alta.android.formcontrol.label";
@import "oj.alta.android.formcontrol.common";

// ----- end dependencies ---------


// most of the styling in common file
@import "../../common/widgets/oj.common.formcontrol.inputnumber";

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

    // icons
    //------------------------------------------

    .oj-inputnumber-up-icon {
      @extend .oj-fwk-icon-caret02-n;
    }

    .oj-inputnumber-down-icon {
      @extend .oj-fwk-icon-caret02-s;
    } 

    .oj-inputnumber.oj-loading .oj-inputnumber-input  {

        background-image: $loadingBgImage;
        animation: LoadingGradientAnimation 3s infinite; 
      
      background-size: 200% 200%;
    }

    // To replecate old android behavior, we need to disable border styles on the
    // text container and put them back on the input element.
    .oj-inputnumber.oj-text-field .oj-text-field-container {
      border-width: 0px;
    } 
    .oj-inputnumber:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-text-field-container {
      border-width: 0px;
    }

    .oj-inputnumber.oj-text-field .oj-inputnumber-input {
      position: relative;
      box-sizing: border-box;
      border-style: solid;
      border-color: $formControlBorderColor;
      border-width: $formControlBorderWidth;
      border-radius: $formControlBorderRadius;
      background-color: $formControlBgColor;
      overflow: hidden;
    } 

    .oj-inputnumber.oj-text-field.oj-read-only .oj-inputnumber-input,
    .oj-inputnumber.oj-text-field .oj-read-only .oj-inputnumber-input {
      border-style: none;
      border-color: transparent;
      border-width: 0;
      border-radius: 0;
      background-color: transparent;
    }      

    .oj-inputnumber.oj-text-field.oj-invalid .oj-inputnumber-input,
    .oj-inputnumber.oj-text-field .oj-invalid .oj-inputnumber-input,
    .oj-inputnumber.oj-text-field.oj-warning .oj-inputnumber-input,
    .oj-inputnumber.oj-text-field .oj-warning .oj-inputnumber-input {
      @include oj-form-control-border-message-width;
      border-style: solid;
    }

    // Styling for invalid state
    .oj-inputnumber.oj-text-field.oj-invalid .oj-inputnumber-input,
    .oj-inputnumber.oj-text-field .oj-invalid .oj-inputnumber-input {
      border-color: $borderColorError; 
    }
    // Styling for warning state
    .oj-inputnumber.oj-text-field.oj-warning .oj-inputnumber-input,
    .oj-inputnumber.oj-text-field .oj-warning .oj-inputnumber-input {
      border-color: $borderColorWarning; 
    }
    .oj-inputnumber:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputnumber-input {
      @include oj-form-control-content-focus;
      @include oj-form-control-content-focus-padding;
    }
  }
}