// Copyright (c) 2014, 2026, 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.select2.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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


@if $includeSelectSingleClasses != false {
  @include module-include-once("common.select2") {
    /* searchselect */
    /* --------------------------------------------------------------- */

    // This is to prevent the flash of unstyled content before the html becomes JET components.
      oj-searchselect:not(.oj-complete) {
        visibility: hidden;
      }

    .oj-searchselect {
      position: relative;
      display: inline-block;
      vertical-align: middle;
        max-width: $formControlLargeMaxWidth;
        min-width: $formControlMinWidth;
        // 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);

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

    .oj-searchselect .oj-text-field-middle {
      width: 100%;
      flex: auto;
    }

    /* single-select */

    /*
     * Applied to the input field
     */
    .oj-searchselect-input {
      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;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
        background-color: transparent;
        color: $formControlInputValueColor;
        font-size: $formControlInputFontSize;
        box-shadow: none;
        @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;
        }  

      // the below styles came from the old oj-searchselect-choice class

      @include oj-form-control-input;
      @include oj-form-control-content-no-focus-padding;
      @include oj-ltr() {
        padding-left: $formControlPaddingHorizontal;
      }
      @include oj-rtl() {
        padding-right: $formControlPaddingHorizontal;
      }
    }

    .oj-searchselect.oj-text-field .oj-text-field-container {
      // This is the element with the border, so the height needs to be
      // set on this element.
      height: $formControlInputHeight;
    }

    // .oj-searchselect-fullscreen .oj-searchselect-input
    // {
    //   caret-color: 'transparent';
    // }

    /*
     * Applied to the filter field on desktop and mobile.
     */
    .oj-searchselect-filter.oj-form-control {
      max-width: 100%;
    }

    /*
     * Applied to the filter field on desktop.
     */
    .oj-searchselect .oj-searchselect-filter {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: inherit;
    }
    .oj-searchselect .oj-searchselect-filter.oj-form-control {
      margin-bottom: 0;
    }
    .oj-searchselect .oj-searchselect-filter.oj-text-field .oj-text-field-container {
      background-color: transparent;
      border-color: transparent;
    }
    .oj-searchselect.oj-form-control-text-align-end .oj-searchselect-filter,
    .oj-searchselect.oj-form-control-text-align-right .oj-searchselect-filter {
      @include oj-ltr() {
        padding-right: 1px;
      }
    }
    .oj-searchselect.oj-form-control-text-align-end .oj-searchselect-filter {
      @include oj-rtl() {
        padding-left: 1px;
      }
    }

    /* Styling for readonly mode */

    /* don't show dropdown trigger or mobile clear value icon */
    .oj-searchselect.oj-read-only .oj-searchselect-arrow,
    .oj-searchselect.oj-read-only .oj-searchselect-clear-value {
      display: none;
    }
    
    /* don't show mobile clear value icon when field is required */
    .oj-searchselect.oj-required .oj-searchselect-clear-value {
      display: none;
    }

    /*
     * Applied to the single-select drop down arrow and mobile clear value icon
     */
    .oj-searchselect-arrow,
    .oj-searchselect-clear-value {
      cursor: pointer;
    }

    /*
     * Only show either the dropdown arrow or the clear value icon on mobile depending on whether
     * a value is selected.
     */
    .oj-searchselect-mobile.oj-searchselect-no-value .oj-searchselect-clear-value,
    .oj-searchselect-mobile.oj-disabled .oj-searchselect-clear-value,
    .oj-searchselect-mobile:not(.oj-searchselect-no-value):not(.oj-disabled):not(.oj-required) .oj-searchselect-arrow {
      display: none;
    }

    /*
     * On desktop, hide the main field when the filter field is shown (when the component
     * has focus) and vice versa
     */
    .oj-searchselect.oj-searchselect-filter-shown:not(.oj-searchselect-mobile) .oj-searchselect-main-field .oj-searchselect-arrow,
    .oj-searchselect.oj-searchselect-filter-shown:not(.oj-searchselect-mobile) .oj-searchselect-main-field .oj-searchselect-input,
    .oj-searchselect:not(.oj-searchselect-filter-shown):not(.oj-searchselect-mobile) .oj-searchselect-filter {
      visibility: hidden;
    }
 
    .oj-searchselect-arrow,
    .oj-searchselect-clear-value,
    .oj-searchselect-back-button {
      box-sizing: border-box;
      display: inline-flex;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      align-items: center;
      justify-content: center;
    }

    .oj-searchselect-arrow:hover, .oj-searchselect-arrow:focus,
    .oj-searchselect-clear-value:hover, .oj-searchselect-clear-value:focus,
    .oj-searchselect-back-button:hover, .oj-searchselect-back-button:focus {
      text-decoration: none;
    }

    /*
     * Disabled styles for single-select
     */
    .oj-searchselect.oj-disabled .oj-searchselect-input {
      border-style: $inputTextBorderStyleDisabled;
      @include oj-form-control-content-disabled;
    }

    .oj-searchselect.oj-disabled .oj-searchselect-arrow,
    .oj-searchselect.oj-disabled .oj-searchselect-clear-value  {
      cursor: default;
      background-color: $formControlBgColorDisabled;
    }

    /*
     * Styling for focus state
     */
    .oj-searchselect:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-searchselect-input:focus {
        @include oj-form-control-content-focus;
        @include oj-form-control-content-focus-padding;
    }

    .oj-searchselect.oj-loading .oj-searchselect-input {
      background-image: $loadingBgImage;
      animation: LoadingGradientAnimation 3s infinite; 
      background-size: 200% 200%;
      opacity: 1;
    }

    .oj-searchselect.oj-loading .oj-searchselect-arrow,
    .oj-searchselect.oj-loading .oj-searchselect-clear-value {
      display: none;
    }

    /*
     * Applied to results collection element
     */
    .oj-select-results {
      @extend .oj-listbox-results-base;
    }

    /*
     * Applied to results collection element when the dropdown is initially opened while the
     * data is being fetched
     */
    .oj-listbox-initial-open .oj-select-results {
      min-height: 10rem; // 160px;
    }

    .oj-listbox-fullscreen .oj-select-results {
      max-height: none;
    }



    /* icon */
    /* -----------------------------*/

    /*
     * Applied to the single-select drop down open icon
     */
    .oj-searchselect-open-icon {
      @extend .oj-fwk-icon-arrow02-s;
    }

    /*
     * Applied to the single-select mobile clear value icon
     */
    .oj-searchselect-clear-value-icon {
      @extend .oj-fwk-icon-cross03;
    }
    
    .oj-searchselect-open-icon,
    .oj-searchselect-clear-value-icon {
      line-height: inherit;
      padding-right: 5px;
      padding-left: 5px;
      
      min-height: $formControlInputHeight;
      min-width: $formControlInputHeight;
      margin: unset;
    }

    /*
     * Applied to the single-select mobile filter field back icon
     */
    .oj-searchselect-back-icon {
      @extend .oj-fwk-icon-caret-start;

      line-height: inherit;
      padding-right: 5px;
      padding-left: 5px;
    }

    /*
     * Applied to the container of the no data template shown in the default listView.
     */
    .oj-searchselect-no-results-container {
      display: none;
      height: 0;
    }
    
    /**
     * Applied to the default list view if no results are found
     */
    .oj-listbox-searchselect-no-results .oj-select-results {
      display: none;
    }

    /* Styling on collection current item */
    .oj-listbox-selectsingle .oj-listview-current-item:not(.oj-selected) {
      background-color: $collectionCellBgColorHover;
    }
    .oj-listbox-selectsingle .oj-table-body-current-row:not(.oj-selected) .oj-table-data-cell {
      background-image: linear-gradient($collectionCellBgColorHover, $collectionCellBgColorHover);
    }

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

    // 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 {
        border-width:0;
      }
    }

    .oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-arrow,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-clear-value {
      align-self: stretch;
    }

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

    /* clears the 'X' from Internet Explorer */
    .oj-searchselect input[type=search]::-ms-clear,
    .oj-searchselect input[type=search]::-ms-reveal,
    .oj-listbox-searchselect .oj-searchselect-filter input[type=search]::-ms-clear,
    .oj-listbox-searchselect .oj-searchselect-filter input[type=search]::-ms-reveal {
      display: none;
      width : 0;
      height: 0;
    }

    /* Default options*/
    $searchSelectDefaultOptions: ();

    @if ($loadingIndicatorDelayDuration) {
      $searchSelectDefaultOptions: map-merge($searchSelectDefaultOptions, (showIndicatorDelay: $loadingIndicatorDelayDuration));
    }
    .oj-searchselect-option-defaults {
      font-family: oj-json-from-map($searchSelectDefaultOptions);
    }

    // TODO: single searchselect's text-align: right makes the text overlap the icon
    // TODO: single searchselect's height stretches for choice, but the icon no longer lines up

    // For quiet Forms

    .oj-text-field-label-inside .oj-searchselect-open-icon {
      min-height: $formControlInsideInputHeight;
      min-width: $formControlInsideInputHeight;
    }
  }
}