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

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


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

    /* Component option defaults. */
    $formControlDefaultOptions: ();

    @if ($loadingIndicatorDelayDuration != null)
    {
        $formControlDefaultOptions: map-merge($formControlDefaultOptions, (showIndicatorDelay: $loadingIndicatorDelayDuration));
    }
    @if ($formControlLabelEdgeDefault != null)
    {
      $formControlDefaultOptions: map-merge($formControlDefaultOptions, (labelEdge: $formControlLabelEdgeDefault));
    }
    @if ($inputFormControlReadonlyDefault != null)
    {
      $formControlDefaultOptions: map-merge($formControlDefaultOptions, (readonlyElem: $inputFormControlReadonlyDefault));
    }
    @if ($formControlUseUserAssistanceOptionDefault != null)
    {
      $formControlDefaultOptions: map-merge($formControlDefaultOptions, (useUserAssistanceOptionDefault: $formControlUseUserAssistanceOptionDefault));
    }

    .oj-form-control-option-defaults {
        font-family: oj-json-from-map($formControlDefaultOptions);
    }

    /* form-control classes */
    
    /* --------------------------------------------------------------- */
    
    // bumping up the specificity with the html because 
    // when $includeNormalize is false (compatibility mode) the input will get 
    // a margin of 0 which would override the margin set here
    html .oj-form-control {

        margin-bottom: $wrappableMarginBottom;        

      vertical-align: middle;
    }

    /** for all hints */
    .oj-form-control-hint {

        color: $textColor;

      padding: 0;
      word-wrap: break-word;  
    };

    .oj-form-control-title {

        color: $textColor;        
      
    }
    
    // The oj-form-control-inherit selector on an ancestor indicates that the form control should
    // inherit styles, like width/height/borders/colors/text-alignment
    // -----------------------------------------------------------------------------------------
    // inherit the height of the container and remove margin-bottom
    // form controls have min-width/max-width set on their root dom element. 
    // Allow that to be inherited as well.
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-form-control,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field {
      height:100%;
      min-height:100%;
      margin-bottom: 0;
      max-width: 100%;
      min-width: 100%;
    }

    // setting background-color doesn't work, using box shadow is the only
    // known hack to override the browser's default autofill background color
    // -webkit-text-fill-color is used to fix chrome overriding the text color
    // on autocompleted inputs 
    .oj-form-control input:-webkit-autofill {
      box-shadow: 0 0 0px 1000px $formControlBgColor inset;
      -webkit-text-fill-color: $formControlInputValueColor;
    }
    
    // suppress the native clear icons in IE
    .oj-form-control input::-ms-clear {
      display: none; 
      width : 0; 
      height: 0;
    }

    .oj-text-field-middle { 
      position: relative;
      display: inline-flex;
      // grow the input using the flex property
      flex: 1;
      // The border is on an ancestor element, so this needs to be 100% height
      height: 100%;
    }

    /* when the label is inside or above, we must set the max-width of the component to
       100%. Otherwise some components like input text, whose max-width is decided by 
       oj-text-field-lg-max-width looks so different from other components like radioset
       which does not have a configured default max width in alta.
    */
    .oj-text-field-label-inside.oj-form-control,
    .oj-text-field-label-inside.oj-text-field {
      max-width: 100%;
    }

    /* when the label is inside, set the padding right so that the long labels are truncated
      at the same width as input field
    */
    .oj-text-field-label-inside .oj-label{
      max-width: 100%;
      @include oj-ltr() {
        padding-right: calc( #{2 * $formControlPaddingHorizontal});
      }
      @include oj-rtl() {
        padding-left: calc( #{2 * $formControlPaddingHorizontal});
      }
      box-sizing: border-box;
    }

    .oj-text-field-label-inside .oj-text-field-input {
      min-height: $formControlInsideInputHeight;
      padding-top: $formControlInsidePaddingTop;
    }

    /* consolidating styles - start
    */
    //common styles for component root
    .oj-text-field {
      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%;
      box-sizing: border-box;
    }

    // .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-text-field,
    .oj-form-control-full-width .oj-text-field {
      max-width: 100%;
    }

    //common styles for actual input field
    .oj-text-field-input {
      // 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;
      border: 0;
      background-color: transparent;
      // The border is on an ancestor element, so this needs to be 100% height
      height: 100%;
    }

    /* Styling for text-align */
    .oj-form-control-text-align-right.oj-text-field .oj-text-field-input,
    .oj-form-control-text-align-right .oj-text-field .oj-text-field-input {
      text-align: right;
    }

    .oj-form-control-text-align-start.oj-text-field .oj-text-field-input,
    .oj-form-control-text-align-start .oj-text-field .oj-text-field-input {
      @include oj-bidi-property(
        $property: 'text-align',
        $startOrEnd: start,
        $important: false);
    }

    .oj-form-control-text-align-end.oj-text-field .oj-text-field-input,
    .oj-form-control-text-align-end .oj-text-field .oj-text-field-input {
      @include oj-bidi-property(
          $property: 'text-align',
          $startOrEnd: end,
          $important: false);
    }

    // Styling for readonly state, if supported in the future
    .oj-text-field.oj-read-only .oj-text-field-input {
      @include oj-form-control-content-readonly;
      
      padding-left: 0;
      padding-right: 0;
    }

    /* clears the 'X' from Chrome */
    .oj-text-field-input::-webkit-search-decoration,
    .oj-text-field-input::-webkit-search-cancel-button,
    .oj-text-field-input::-webkit-search-results-button,
    .oj-text-field-input::-webkit-search-results-decoration {
      display: none;
    }
    
    // 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-text-field .oj-text-field-input,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-container {
      @include oj-form-control-inherit();
    }

    // only override the background when not disabled
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-disabled) .oj-text-field-input,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-disabled) .oj-text-field-container {
      @include oj-form-control-inherit-background();
    }

    // only override the border when not oj-invalid or oj-warning
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-invalid):not(.oj-warning) .oj-text-field-input,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-invalid):not(.oj-warning) .oj-text-field-container {
      @include oj-form-control-inherit-border();
    }

    //Quiet form common styles
    //For inside label

    .oj-text-field-label-inside .oj-text-field-input.oj-hover{
      background-color: transparent;
    }

    .oj-text-field .oj-text-field-container {
      position: relative;
      box-sizing: border-box;
      border-style: solid;
      border-color: $formControlBorderColor;
      border-width: $formControlBorderWidth;
      border-radius: $formControlBorderRadius;
      background-color: $formControlBgColor;
      overflow: hidden;
      // For quiet Forms
      display: flex;
      flex-direction: row;
      align-items: center;
      // This is the element with the border, so the height needs to be
      // set on this element.
      height: $formControlInputHeight;
    } 

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

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

    // Styling for invalid state
    .oj-text-field.oj-invalid .oj-text-field-container {
      border-color: $borderColorError; 
    }
    // Styling for warning state
    .oj-text-field.oj-warning .oj-text-field-container {
      border-color: $borderColorWarning; 
    }
    //Styling for disabled state
    .oj-text-field.oj-disabled .oj-text-field-container {    
      background-color: $formControlBgColorDisabled;
      border-color: $formControlBorderColorDisabled;
    }
    .oj-text-field-label-inside.oj-text-field .oj-text-field-container {
      min-height: $formControlInsideInputHeight; 
    }

    .oj-text-field-label-inside.oj-text-field .oj-text-field-container .oj-label,
    .oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container .oj-label {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      
      transition: all .25s ease .1s;
      pointer-events: none;

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

    // Styling for small inside label on non-text-field 
    .oj-form-control-label-inside.oj-label-value .oj-label[slot="label"],
    .oj-form-control-label-inside.oj-form-control .oj-label {
      font-size: $formControlInsideLabelFontSize;
      font-weight: $formControlInsideLabelFontWeight;
      line-height: $formControlInsideLabelLineHeight;
    }

    .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container .oj-label,
    .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container .oj-label {
      transition: top .25s ease .1s, font-weight .25s ease .1s, font-size .25s ease .1s;
      font-size: $formControlInsideLabelFontSize;
      font-weight: $formControlInsideLabelFontWeight;
      line-height: $formControlInsideLabelLineHeight;
      
      // The label top should be 25% of the height of the input field, when the input field has value
      top: calc((#{$formControlInsideInputHeight} * 25) / 100);
    
      @include oj-ltr() {
        left: $formControlPaddingHorizontal;
      }
      @include oj-rtl() {
        right: $formControlPaddingHorizontal;
      }
    } 

    .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container .oj-label {
      font-size: $formControlInsideLabelFontSize;
      font-weight: $formControlInsideLabelFontWeight;
      line-height: $formControlInsideLabelLineHeight;
      
      // The label top should be 25% of the height of the input field, when the input field has value
      top: calc((#{$formControlInsideInputHeight} * 25) / 100);
  
      @include oj-ltr() {
        left: 0;
      }
      @include oj-rtl() {
        right: 0;
      }
    }

    .oj-text-field-label-inside.oj-text-field.oj-disabled:not(.oj-has-no-value) .oj-text-field-container .oj-label {
      transition: none; 
      background-color: $formControlBgColorDisabled;
    }

    .oj-text-field-label-inside.oj-text-field.oj-textarea .oj-label,
    .oj-text-field-label-inside.oj-text-field.oj-textarea.oj-disabled.oj-has-no-value .oj-label  {
      top: calc(#{$formControlInsideInputHeight} / 2);
    }

    .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container .oj-label {
      transition: none; 
      background-color: transparent;
    }

    .oj-text-field-label-inside .oj-text-field-middle {
      // needed for stopping single combobox to shrink
      height: 100%;
    }

    // start/end icon styles

    // Center the content vertically for label inside.
    .oj-text-field.oj-text-field-label-inside .oj-text-field-start,
    .oj-text-field.oj-text-field-label-inside .oj-text-field-end {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .oj-text-field .oj-text-field-start .oj-text-field-start-end-icon {
      @include oj-ltr() {
        margin-left: $formControlPaddingHorizontal;
      }
      @include oj-rtl() {
        margin-right: $formControlPaddingHorizontal;
      }
    }
    .oj-text-field .oj-text-field-end .oj-text-field-start-end-icon {
      @include oj-ltr() {
        margin-right: $formControlPaddingHorizontal;
      }
      @include oj-rtl() {
        margin-left: $formControlPaddingHorizontal;
      }
    }
    .oj-text-field .oj-text-field-start .oj-button,
    .oj-text-field .oj-text-field-end .oj-button {
      margin-bottom: 0;
    }
    // the margin is opposite for read only
    .oj-text-field.oj-read-only .oj-text-field-start .oj-text-field-start-end-icon {
      @include oj-ltr() {
        margin-left: 0;
        margin-right:$formControlPaddingHorizontal;
      }
      @include oj-rtl() {
        margin-right: 0;
        margin-left: $formControlPaddingHorizontal;
      }
    }
    .oj-text-field.oj-read-only .oj-text-field-end .oj-text-field-start-end-icon {
      @include oj-ltr() {
        margin-right: 0;
        margin-left: $formControlPaddingHorizontal;
      }
      @include oj-rtl() {
        margin-left: 0;
        margin-right: $formControlPaddingHorizontal;
      }
    }
    // In read only (not inline labels), the slot container needs to match the min-height of the read only
    // text element, or things don't line up vertically.
    .oj-text-field.oj-read-only:not(.oj-text-field-label-inline) .oj-text-field-start,
    .oj-text-field.oj-read-only:not(.oj-text-field-label-inline) .oj-text-field-end {
      min-height:  $formControlInputHeight;
    }

    .oj-text-field.oj-disabled .oj-text-field-start-end-icon {
      color: $iconColorDisabled;
    }

    .oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      cursor: default;
    }
    .oj-text-field .oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext:focus {
      outline-style: dotted;
      outline-width: 1px;
      outline-offset: 1px;
    }      
    .oj-text-field:not(.oj-focus-highlight) .oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext:focus {
      outline: none;
    }

    .oj-text-field-counter {
      align-items: center;
      justify-content: center;
      text-decoration: none;
      cursor: default;
      font-size: $formControlInsideLabelFontSize;
      color: $textColorDisabled;
    }

    .oj-required-inline-container {
      color: $messageDetailTextColor;
      font-size: $messageDetailFontSize;
      line-height: $messageDetailLineHeight;
      width: 100%;
    }
  }
}