// 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.inputtextarea.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

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

    // this file includes classes for ojInputText, ojInputPassword, and ojTextarea,
    // but you will also see classes to use html/css without a component, classes are: 
    //   .oj-inputtext-nocomp,
    //   .oj-inputpassword-nocomp,
    //   .oj-textarea-nocomp 
    // to use these put oj-form-control on as well, for example
    //   <input class="oj-inputtext-nocomp oj-form-control">


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

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

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

    // general css styles between the wrapper components
    .oj-inputtext-nocomp,
    .oj-inputpassword-nocomp,
    .oj-textarea-nocomp 
    {
      box-sizing: border-box;

      display: inline-block;

        // because max/min width is in em the font size needs to be on this element 
        // and not on the selector that goes on the input.
        font-size: $formControlInputFontSize;
        @include oj-form-control-text-size-adjust($formControlInputFontSize);

        /* use a width of 100% and then max and min width so that when 
           there's less room for the form control it can automatically 
           get smaller instead of overflowing its boundaries */
        max-width: $formControlLargeMaxWidth;
        min-width: $formControlMinWidth;
        
      width: 100%;
    }

    // .oj-form-control-full-width is an override to set max-width to 100% if on the
    // element or an ancestor element
    .oj-form-control-full-width.oj-inputtext-nocomp,
    .oj-form-control-full-width.oj-inputpassword-nocomp,
    .oj-form-control-full-width.oj-textarea-nocomp,
    .oj-form-control-full-width .oj-inputtext-nocomp,
    .oj-form-control-full-width .oj-inputpassword-nocomp,
    .oj-form-control-full-width .oj-textarea-nocomp {
      max-width: 100%;
    }

    // clear icon styles    
    .oj-inputtext .oj-inputtext-clear-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;

        height: $formControlInputHeight;

      width: 25px;
      text-decoration: none;
      cursor: default;
    }
    // override background color set in a:active (mobile)
    a.oj-inputtext-clear-icon-btn:active {
      background-color: transparent;
    }
    .oj-inputtext-clear-icon {
      @extend .oj-fwk-icon-cross03;
      margin-top: 1px;
      color: inherit;
    }
    // No focus ring
    .oj-inputtext .oj-inputtext-clear-icon-btn:focus {
      outline:none;
    }
    // if clear-icon="conditional", we make it visible on focus or hover
    .oj-inputtext.oj-focus .oj-text-field-container.oj-inputtext-clearicon-conditional:not(.oj-form-control-empty-clearicon) .oj-inputtext-clear-icon-btn,
    .oj-inputtext.oj-hover .oj-text-field-container.oj-inputtext-clearicon-conditional:not(.oj-form-control-empty-clearicon) .oj-inputtext-clear-icon-btn {
      visibility: visible;
    }
    // hide the icon conditionally
    .oj-inputtext .oj-text-field-container.oj-inputtext-clearicon-conditional .oj-inputtext-clear-icon-btn {
      visibility: hidden;
    }

    .oj-inputtext .oj-text-field-counter {
      visibility: hidden;
    }
    
    .oj-inputtext.oj-focus .oj-text-field-counter {
      visibility: visible;
    }

    .oj-text-field-counter .oj-inputtext-counter-el {
      position: relative;
      bottom: -3px;
      @include oj-ltr() {
        right: 4px;
      }
      @include oj-rtl() {
        left: 4px;
      }
    }

    .oj-textarea .oj-text-field-counter {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .oj-textarea .oj-text-field-counter .oj-textarea-counter-el {
      visibility: hidden;
    }

    .oj-textarea.oj-focus .oj-text-field-counter .oj-textarea-counter-el {
      visibility: visible;
    }

    .oj-textarea .oj-text-field-container {
      flex-wrap: wrap;
      // For text area, height needs to be auto, not 100%
      height: auto;
    }

    .oj-text-field.oj-textarea.oj-disabled .oj-text-field-container {
      background-color: $formControlBgColorDisabled;
    }

    .oj-text-field-counter.oj-textarea-counter-container {
      height: 32px;
      width: 100%;
      padding: 0 8px;
    }
    
    .oj-inputtext.oj-focus .oj-inputtext-clearicon-conditional .oj-inputtext-input, 
    .oj-inputtext.oj-hover .oj-inputtext-clearicon-conditional .oj-inputtext-input, 
    .oj-inputtext .oj-inputtext-clearicon-visible .oj-inputtext-input {
      @include oj-ltr() {
        padding-right: 25px;
      }
      @include oj-rtl() {
        padding-left: 25px;
      }
    }

    // general css input styles between the components
    .oj-inputtext-input,
    .oj-inputpassword-input,
    .oj-textarea-input
    {
      // TODO, We need to think about getting rid of this mixin and move the relevant style to 
      // container
      @include oj-form-control-input($textAlign: $inputTextTextAlign);
      font-weight: normal;
      width: 100%;
    }
    // general css input styles between the components
    .oj-inputtext-nocomp,
    .oj-inputpassword-nocomp,
    .oj-textarea-nocomp
    {
      @include oj-form-control-content($textAlign: $inputTextTextAlign);
      font-weight: normal;
      width: 100%;
      
      // normally removing an outline can cause accessibility issues, however
      // on an input the cursor blinks so an outline is not required for
      // accessibility. As of 6-11-14 only chrome is putting
      // an outline on inputs anyway
      outline: 0;
      box-sizing: border-box;
      font-family: inherit;
    }

    // When size is provided, set width to auto to allow proper sizing
    .oj-inputtext-input[size],
    .oj-inputpassword-input[size],
    .oj-textarea-input[size] 
    {
      width: auto;
    }

    // specific css for inputtext-input + inputpassword-input
    .oj-inputtext-input,
    .oj-inputpassword-input,
    .oj-inputtext-nocomp,
    .oj-inputpassword-nocomp
    {
      @include oj-normalize-text-input;
      
      box-sizing: border-box;
      
      padding: 0 $formControlPaddingHorizontal;
      @include oj-form-control-content-no-focus-padding;
    }
    .oj-inputtext-nocomp,
    .oj-inputpassword-nocomp
    {
      height: $formControlInputHeight;
    }
    
    // specific css for textarea-input
    .oj-textarea-input,
    .oj-textarea-nocomp
    {
      @include oj-normalize-textarea;

        padding: .5rem $formControlPaddingHorizontal;
        line-height: $textAreaLineHeight;

      
      height: auto;
      padding-top: 6px;
      resize: none; //turning off as resizing can cause layout problems.

    }

    // Styling for disabled state
    .oj-inputtext.oj-disabled .oj-inputtext-input,
    .oj-inputpassword.oj-disabled .oj-inputpassword-input,
    .oj-textarea.oj-disabled .oj-textarea-input,
    .oj-inputtext-nocomp[disabled],
    .oj-inputpassword-nocomp[disabled],
    .oj-textarea-nocomp[disabled]
    {

        border-style: $inputTextBorderStyleDisabled;
        @include oj-form-control-content-disabled;

      
    }

    // Styling for readonly state, if supported in the future
    .oj-inputtext-nocomp[readonly],
    .oj-inputpassword-nocomp[readonly],
    .oj-textarea-nocomp[readonly]
    {

        @include oj-form-control-content-readonly;        


      padding: 0;
    }

    .oj-textarea.oj-read-only .oj-textarea-input,
    .oj-textarea-nocomp[readonly]
    {
      padding-top: 6px;
    }

    .oj-inputtext.oj-loading .oj-inputtext-input,
    .oj-textarea.oj-loading .oj-textarea-input {  

        background-image: $loadingBgImage;
        animation: LoadingGradientAnimation 3s infinite; 

      background-size: 200% 200%;
      opacity: 1;
    }

    // Styling for focus state
    .oj-inputtext:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning) .oj-inputtext-input:focus,
      .oj-inputpassword:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning) .oj-inputpassword-input:focus,
      .oj-textarea:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning) .oj-textarea-input:focus,
      .oj-inputtext-nocomp:not([disabled]):not([readonly]):focus,
      .oj-inputpassword-nocomp:not([disabled]):not([readonly]):focus,
      .oj-textarea-nocomp:not([disabled]):not([readonly]):focus
      {

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

    }

    // Styling for focus state. only change padding for input, not textarea
    .oj-inputtext:not(.oj-disabled):not(.oj-read-only) .oj-inputtext-input:focus,
      .oj-inputpassword:not(.oj-disabled):not(.oj-read-only) .oj-inputpassword-input:focus,
      .oj-inputtext-nocomp:not([disabled]):not([readonly]):focus,
      .oj-inputpassword-nocomp:not([disabled]):not([readonly]):focus
      {

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

    }

    .oj-inputpassword-show-password-icon {
      @extend .oj-fwk-icon-view;
    }

    .oj-inputpassword-hide-password-icon {
      @extend .oj-fwk-icon-view-hide;
    }

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

    // remove borders, inherit colors and stretch the height
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp {
      @include oj-form-control-inherit();
      @include oj-form-control-inherit-border();
    }

    // only override the background when not disabled
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp:not([disabled]),
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp:not([disabled]),
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp:not([disabled]) {
      @include oj-form-control-inherit-background(); 
    }

    // 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-inputtext:not(.oj-disabled):not(.oj-read-only) .oj-inputtext-input:focus, 
      .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword:not(.oj-disabled):not(.oj-read-only) .oj-inputpassword-input:focus, 
      .oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea:not(.oj-disabled):not(.oj-read-only) .oj-textarea-input:focus, 
      .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp:not([disabled]):not([readonly]):focus, 
      .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp:not([disabled]):not([readonly]):focus, 
      .oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp:not([disabled]):not([readonly]):focus {
        border-width:0;
      }
    }

    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext .oj-text-field-middle,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword .oj-text-field-middle {
      height: 100%;
    }

    .oj-text-field-label-inside .oj-textarea-input {
      padding: 0 $formControlPaddingHorizontal;
      margin-top: $formControlInsideTextareaMarginTop;
      // Since, textarea is an inline-block element, it was leaving a gap between itself and it's parent. fixed it by changing it to block
      display: block; 
    }

    // Min-height is set on container element and we don't want min-height on the field input because we are using rows. 
    // If the other selector is removed, this selector can be removed. 
    .oj-text-field-label-inside .oj-textarea-input.oj-text-field-input {
      min-height: 0;
    }

    // The margin top for textarea should still be the same when it is in read-only mode.
    .oj-text-field-label-inside.oj-textarea.oj-read-only .oj-textarea-input {
      margin-top: $formControlInsideTextareaMarginTop;
    }

    .oj-text-field-label-inside.oj-textarea:not(.oj-disabled) .oj-label{
      background-color: $formControlBgColor;
    }
  }
}