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

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


@if $includeInputSearchClasses != false {
  @include module-include-once("common.inputsearch") {
    /* InputSearch */
    /* --------------------------------------------------------------- */

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

    .oj-inputsearch {
      display: inline-block;
      position: relative;
      vertical-align: middle; 

        max-width: $formControlLargeMaxWidth;
        min-width: $formControlMinWidth;
        // font size needs to be on the root, because max/min width is in em.
        font-size: $formControlInputFontSize;
        @include oj-form-control-text-size-adjust($formControlInputFontSize);

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

    /* 
     * Applied to the InputSearch box which includes the input field and the search icon
     */
    .oj-inputsearch-choice {
      box-sizing: border-box;
      display: flex;
      align-items: center;

        @include oj-form-control-content;
        height: $formControlInputHeight;
        @include oj-form-control-content-no-focus-padding;


      @if ($inputSearchIconPosition == start) {
        flex-direction: row-reverse;
      }

      width: 100%;
      outline: 0;
      overflow: hidden;
      white-space: nowrap;
      background-clip: padding-box;
    }

    .oj-inputsearch-choice {

        background-color: $inputSearchBgColor;        

    }

    /* 
     * Applied to the input field
     */
    .oj-inputsearch-input {
      flex: 1;
      border: 0;
      outline: 0;

        @include oj-box-shadow(none);
        padding: 0 $formControlPaddingHorizontal;    
        background-color: $formControlBgColor;
        color: $formControlInputValueColor;    
        font-size: $formControlInputFontSize;
        @include oj-form-control-text-size-adjust($formControlInputFontSize);
        @include oj-placeholder()
        {
          color: $formControlPlaceholderColor;
          // in Firefox the default opacity is not 1 for placeholder
          opacity: 1;
          font-style: $formControlPlaceholderFontStyle;
        }

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; 
    }

    /* 
     * Applied to the search button
     */
    .oj-inputsearch-search-button {
      box-sizing: border-box;
      display: inline-flex;
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
    }

    .oj-inputsearch-search-button:hover, .oj-inputsearch-search-button:focus  {
      text-decoration: none;
    }

    /* 
     * Search button icon
     */
    .oj-inputsearch-search-icon {
      @extend .oj-fwk-icon-magnifier;

      line-height: inherit;

        font-size: $formControlInputFontSize;
        @include oj-form-control-text-size-adjust($formControlInputFontSize);
        @include oj-ltr() {
          padding-left: oj-shorthand-property-value-left($inputSearchIconPadding);
          padding-right: oj-shorthand-property-value-right($inputSearchIconPadding);
        }
        @include oj-rtl() {
          padding-right: oj-shorthand-property-value-left($inputSearchIconPadding);
          padding-left: oj-shorthand-property-value-right($inputSearchIconPadding);
        }

    }

    /*
     * Styling for focus state
     */
    .oj-inputsearch:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputsearch-choice {

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


    }

    /* 
     * Invalid styling for the widget 
     */
    .oj-inputsearch.oj-invalid .oj-inputsearch-choice {

        border-color: $borderColorError;
        @include oj-form-control-border-message-width();

      border-style: solid;
    }

    /* 
     * Warning styling for the widget 
     */
    .oj-inputsearch.oj-warning .oj-inputsearch-choice {

        border-color: $borderColorWarning;
        @include oj-form-control-border-message-width();

      border-style: solid;
    }

    /* 
     * Disabled styles for single-select 
     */
    .oj-inputsearch.oj-disabled .oj-inputsearch-choice,
    .oj-inputsearch.oj-disabled input {

        @include oj-form-control-content-disabled;
        background-color: $inputSearchBgColorDisabled;

    }

    .oj-inputsearch.oj-disabled input {
      border: 0;
    }

    .oj-inputsearch.oj-disabled .oj-inputsearch-search-button { 
      cursor: default;
    }

    // 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-inputsearch-choice,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input {
      @include oj-form-control-inherit();
      @include oj-form-control-inherit-background();
      @include oj-form-control-inherit-border();
    }

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


  }
}