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

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


@if $includeComboboxClasses != false {
  @include module-include-once("common.combobox") {
    /* combobox */
    /* --------------------------------------------------------------- */
            
    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-combobox:not(.oj-complete) {
        visibility: hidden;
      }      
    }

    .oj-combobox {
      position: relative;
      display: inline-block;
      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: $formControlTriggerFontSize;
        @include oj-form-control-text-size-adjust($formControlTriggerFontSize);    


      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-combobox,
    .oj-form-control-full-width .oj-combobox {
      max-width: 100%;
    }
   
    /* single-select */
    /* 
     * Applied to the single-select box which includes the input field and the dropdown open icon
     */
    .oj-combobox-choice {
      // TODO, We need to think about getting rid of this mixin and move the relevant style to 
      // container
      @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;
      }

      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      outline: 0;
      overflow: hidden;
      white-space: nowrap;
      background-clip: padding-box;
      // height needs to be 100% as the border and height is set on an ancestor element
      height: 100%;
    }

    .oj-text-field.oj-combobox-multi .oj-text-field-container {
      height: auto;
    }

    /* 
     * Applied to the input field
     */
    .oj-combobox-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;
      border: 0;
      outline: 0; 
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

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

    /* Styling for readonly mode */
    .oj-combobox.oj-read-only .oj-combobox-choice,
    .oj-combobox.oj-read-only .oj-combobox-choices {
      background-color: transparent;
      border-color: transparent;
      outline: none;
      padding-bottom: 0;
      @include oj-ltr() {
        padding-left: 0;
      }
      @include oj-rtl() {
        padding-right: 0;
      }
    }

    /* apply to the selected entries */
    .oj-combobox.oj-read-only .oj-combobox-input,
    .oj-combobox.oj-read-only .oj-combobox-selected-choice {
      outline: none;
      margin-top: 0;
      border-top-width: 0;
      border-bottom-width: 0;
      line-height: $formControlInputHeight;

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

    }

    /* apply to the selected entry in readonly mode */
    .oj-combobox.oj-read-only li.oj-combobox-selected-choice {
      @include oj-ltr() {
        padding-left: 0;
      }
      @include oj-rtl() {
        padding-right: 0;
      }
    }

    /* don't show dropdown trigger */
    .oj-combobox.oj-read-only .oj-combobox-arrow,
    .oj-combobox.oj-read-only .oj-combobox-divider {
      display: none;
    }

    /* don't show clear entry trigger and search field button */
    .oj-combobox.oj-read-only .oj-combobox-clear-entry,
    .oj-combobox.oj-read-only .oj-combobox-search-field {
      display: none;
    }

    .oj-combobox-multi.oj-loading .oj-combobox-choices,
    .oj-combobox.oj-loading .oj-combobox-choice {

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

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

    .oj-combobox-multi.oj-loading .oj-combobox-input,
    .oj-combobox.oj-loading .oj-combobox-input {
      background-color: transparent;
    }

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

        @include oj-bidi-property(
          $property: 'text-align',
          $startOrEnd: start,
          $important: false);

    }
    .oj-form-control-text-align-end.oj-combobox .oj-combobox-input
    {

        @include oj-bidi-property(
          $property: 'text-align',
          $startOrEnd: end,
          $important: false);

    }
    .oj-form-control-text-align-right.oj-combobox .oj-combobox-choices li
    {
      float: right;
    }
    .oj-form-control-text-align-start.oj-combobox .oj-combobox-choices li
    {

        @include oj-bidi-property(
          $property: 'float',
          $startOrEnd: start,
          $important: false);

    }
    .oj-form-control-text-align-end.oj-combobox .oj-combobox-choices li
    {

        @include oj-bidi-property(
          $property: 'float',
          $startOrEnd: end,
          $important: false);

    }
    .oj-form-control-text-align-right .oj-combobox-selected-choice,
    .oj-form-control-text-align-end .oj-combobox-selected-choice {
      @include oj-ltr() {
        margin: 5px 0 0 6px;
      }
    }
    .oj-form-control-text-align-end .oj-combobox-selected-choice {
      @include oj-rtl() {
        margin: 5px 6px 0 0;
      }
    }

    /* 
     * Applied to the single-select drop down arrow
     */
    .oj-combobox-arrow {
      box-sizing: border-box;
      display: inline-flex;
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
    }
    
    .oj-combobox-arrow:hover, .oj-combobox-arrow:focus  {
      text-decoration: none;
    }
    
    /*
     * Applied to the divider between the input and drop down arrow
     */
    .oj-combobox-divider {
      box-sizing: border-box;
      display: inline-flex;

        border-left: solid oj-shorthand-property-value-bottom($formControlBorderWidth) $formControlBorderColor;        
        @include oj-ltr() {
          margin-left: $formControlPaddingHorizontal;
        }
        @include oj-rtl() {
          margin-right: $formControlPaddingHorizontal;
        }

      height: 80%;
      vertical-align: middle;
    }
    
    /* multi-select */
    
    /* 
     * Applied to the multi-select box which includes the input field and the selected choices
     */
    .oj-combobox-choices {
      box-sizing: border-box;
        // TODO, We need to think about getting rid of this mixin and move the relevant style to 
        // container
        @include oj-form-control-input;
        min-height: $formControlTriggerHeight;
        padding-left: $formControlPaddingHorizontal;   
        padding-right: $formControlPaddingHorizontal;   
        @include oj-form-control-content-focus-padding($focusPaddingBottom: 5px);

      height: auto;
      margin: 0;
      position: relative;
      cursor: text;
      overflow: hidden;
      width: 100%;
    }
    
    /* 
     * Applied to the multi-select box list items which include the search field and the selected choices
     */
    .oj-combobox-choices li {
      list-style: none; 
      @include oj-ltr() {
        float: left;
      }
      @include oj-rtl() {
        float: right;
      }   
    }
    
    /* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
    .oj-combobox-search-field {
      margin-top: 5px;
      padding: 0;
      white-space: nowrap; 

        line-height: calc(#{$formControlTriggerHeight} * 0.9);        

    }

    /* 
     * Applied to the multi-select selected choice
     */
    .oj-combobox-selected-choice {
      line-height: 1.9rem;
      display: flex;
      align-items: center;
      cursor: default;

      @include oj-border-radius($buttonBorderRadius);
      border: 1px solid $buttonOutlinedChromeBorderColor;
      color: $buttonOutlinedChromeTextColor;        

      background-clip: padding-box;
      @include oj-ltr() {
        padding: 0 4px 0 7px;
        margin: 5px 6px 0 0;
      }
      @include oj-rtl() {
        padding: 0 7px 0 4px;
        margin: 5px 0 0 6px;
      }
    }

    /* 
     * Applied to the multi-select selected choice when getting focus
     */
    .oj-combobox-selected-choice.oj-focus {

        @include oj-browser-focus-outline-approximation($buttonTextColor);

    }

    /*
     * Applied to the multi-select selected choice when disabled
     */
    .oj-combobox.oj-disabled .oj-combobox-selected-choice {
      padding: 0;
    }

    /* 
     * Applied to the label of the selected choice
     */
    .oj-combobox-selected-choice-label,
    .oj-combobox-selected-choice-separator {
      display: inline-block;
      vertical-align: middle;
      word-break: break-word;
    }

    /*
     * Applied to the clear entry field of the selected choice
     */
    .oj-combobox-clear-entry {
      display: inline-block;
      outline: none;
      text-align: center;
      vertical-align: middle;
      line-height: 100%;
      @include oj-ltr() {
        right: 3px;
      }
      @include oj-rtl() {
        left: 3px;
      } 
    }

    /* end multiselect */
    
    /* 
     * Invalid styling for the widget 
     */
    // TODO we are actually clearing these here. We should instead clean it up
    // to not set these in the first place.
    .oj-combobox.oj-invalid .oj-combobox-choice,
    .oj-combobox-multi.oj-invalid .oj-combobox-choices,
    .oj-combobox.oj-warning .oj-combobox-choice,
    .oj-combobox-multi.oj-warning .oj-combobox-choices {

      border: 0;
      border-width: 0;
      border-style: none;
    }
    
    /* 
     * Disabled styles for single-select 
     */
    .oj-combobox.oj-disabled .oj-combobox-choice,
    .oj-combobox.oj-disabled input {

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

    }

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

    .oj-combobox.oj-disabled .oj-combobox-arrow { 
      cursor: default;
    }
    
    .oj-combobox.oj-disabled .oj-combobox-divider { 

        border-color: $formControlBorderColorDisabled;        

    }

    /* 
     * Disabled styles for multi-select 
     */
    .oj-combobox-multi.oj-disabled .oj-combobox-choices,
    .oj-combobox-multi.oj-disabled .oj-combobox-selected-choice,
    .oj-combobox-multi.oj-disabled .oj-combobox-selected-choice.oj-focus,
    .oj-combobox-multi.oj-disabled input {

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

      outline: 0;
    }

    .oj-combobox-multi.oj-disabled .oj-combobox-choices {
      width: 100%;
    }
    
    .oj-combobox-multi.oj-disabled input {
      border: 0;
    }

    .oj-combobox-multi.oj-disabled .oj-combobox-clear-entry {
      display: none;
      background: none; 
    }

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

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

    }
    .oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choice {

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

    }
    .oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choices {

        @include oj-form-control-content-focus-padding($focusPaddingBottom: 5px);
      
    }

    /**
     * Styling for loading state
     */
     .oj-combobox.oj-loading .oj-combobox-accessible-container {
      background-image: $loadingBgImage;
      animation: LoadingGradientAnimation 3s infinite; 
      background-size: 200% 200%;
      opacity: 1;
    }
    
    .oj-combobox.oj-loading .oj-combobox-arrow,
    .oj-combobox.oj-loading .oj-combobox-divider {
      display: none;
    }

    /* icon */
    /* -----------------------------*/
    
    /* 
     * Applied to the clear entry icon
     */
    .oj-combobox-clear-entry-icon {
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
    }

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

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

      line-height: inherit;
      padding-right: 5px;
      padding-left: 5px;
    }
    
    /* clear entry icon for combobox */
    .oj-combobox-clear-entry-icon {
      @extend .oj-fwk-icon-cross;
    }
    
    /* Override default options*/
    $comboboxDefaultOptions: ();

    @if ($loadingIndicatorDelayDuration) {
      $comboboxDefaultOptions: map-merge($comboboxDefaultOptions, (loadingIndicatorDelay: $loadingIndicatorDelayDuration));
    }
    .oj-combobox-option-defaults {
      font-family: oj-json-from-map($comboboxDefaultOptions);
    }
    
    // .oj-button adds margin-bottom, we need to remove it if it's used in the end slot
    .oj-combobox .oj-button {
      margin-bottom: 0;
    }
    
    // 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
    // need extra specificity since base selector has direction selectors
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
      @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-combobox:not(.oj-disabled) .oj-combobox-choice,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox:not(.oj-disabled) .oj-combobox-choices,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
      @include oj-form-control-inherit-background();
    }

    // TODO: multi combobox's color inherit does not work. the color does not get inherited. (same with select))
    // TODO: multi combobox when it is in a narrow box, and multiple items are selected, it doesn't
    // show all the items.
    // TODO: single combobox's text-align: right makes the text overlap the icon 
    // TODO: single combobox's height stretches for choice, but the icon no longer lines up

    // For quiet Forms

      .oj-text-field-label-inside .oj-combobox-choice {
        border: 0;
        background-color: transparent;
        width: 100%;
        min-height: $formControlInsideInputHeight;

        @include oj-ltr() {
          padding: 0;
        }
        @include oj-rtl() {
          padding: 0;
        }
      }

      .oj-text-field-label-inside .oj-combobox-input {
        padding: $formControlInsidePaddingTop $formControlPaddingHorizontal 0;
      }

      .oj-text-field-label-inside .oj-combobox-choices {
        border: 0;
        background-color: transparent;
        padding: $formControlInsidePaddingTop $formControlPaddingHorizontal 5px;
      }
  
      .oj-text-field-label-inside .oj-combobox-choice.oj-hover,
      .oj-text-field-label-inside .oj-combobox-choices.oj-hover {
        background-color: transparent;
      } 
  
      .oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-choice {
        padding: 0;

        @include oj-ltr() {
          margin-left: 0;
        }
        @include oj-rtl() {
          margin-right: 0;
        }
      } 

      .oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-input,
      .oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-choices {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
      }
      
      .oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-selected-choice {
        line-height: normal;
      }

      .oj-text-field-label-inside.oj-combobox.oj-disabled .oj-text-field-container {
        background-color: $formControlBgColorDisabled;
      }

      .oj-text-field-label-inside:not(.oj-read-only) .oj-combobox-selected-choice {
        @include oj-ltr() {
          margin: 10px 6px 0 0;
        }
        @include oj-rtl() {
          margin: 10px 0 0 6px;
        }
      }


    .oj-text-field-label-inside.oj-combobox {
      max-width: 100%;
    }

    .oj-text-field-label-inside .oj-combobox-label {
      align-self: flex-start;
    }
  }
}