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

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


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

    /* select */
    /* --------------------------------------------------------------- */

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

    .oj-select {
      position: relative;
      display: inline-block;

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

    /* 
     * Focus ring support around the select box 
     */
    .oj-select .oj-select-accessible-container:focus {
      // The parent container has overflow: hidden; which would hide the focus ring
      // is shown here. So, remove the focus ring and make the parent to appear
      // focused.
      outline: none;
    }
    
    .oj-select.oj-focus-highlight .oj-text-field-container {
      // Make the parent to appear focused when the inner element is focused using
      // keyboard.
      @include oj-browser-focus-outline-approximation($formControlTriggerValueColor);
    }

    /* 
     * Applied to the select box which includes the selected text and the dropdown open icon
     */
    .oj-select-choice {

      @include oj-form-control-content($formControlTriggerValueColor);
      // Default to no border for common due to generic changes for quiet forms
      border-width: 0;

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

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

    // In the select one case, oj-text-field-middle div doesn't need height 100% due to the
    // difference in dom structure
    .oj-select-choice .oj-text-field-middle {
      height: auto;
      // TODO: Clean this up to use end slot when it is available (JET-15324)
      // JET-37393 - regression for oj-select-one in ojet 9.0.0 rc2 release
      // when having text element inside a flex box and if that text is styled for truncating
      // text when it overflows, by default it causes the flex-box to grow beyond the
      // available width. So we need this to allow the flex-box to shrink.
      min-width: 0;
    }

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

    /* apply to the selected entries */
    .oj-select.oj-read-only .oj-select-chosen,
    .oj-select.oj-read-only .oj-select-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-select.oj-read-only li.oj-select-selected-choice {
      @include oj-ltr() {
        padding-left: 0;
      }
      @include oj-rtl() {
        padding-right: 0;
      }
    }

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

    /* don't show clear entry trigger */
    .oj-select.oj-read-only .oj-select-clear-entry {
      display: none;
    }

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

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

    }
    .oj-form-control-text-align-end.oj-select .oj-select-choice
    {

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

    }

    /* Styling for native render mode text-align */
    .oj-form-control-text-align-right.oj-select .oj-select-select
    {
      text-align: right;
      direction: rtl;

      @include oj-ltr() {

          padding-right: calc(16px + #{oj-shorthand-property-value-left($selectArrowPadding)}
                              + #{oj-shorthand-property-value-right($selectArrowPadding)});          
        }

    }
    .oj-form-control-text-align-start.oj-select .oj-select-select
    {


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

      @include oj-ltr() {
        direction: ltr;
      }
    
      @include oj-rtl() {
        direction: rtl;
      }
    }
    .oj-form-control-text-align-end.oj-select .oj-select-select
    {

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

      @include oj-ltr() {
        direction: rtl;

          padding-right: calc(16px + #{oj-shorthand-property-value-left($selectArrowPadding)}
                              + #{oj-shorthand-property-value-right($selectArrowPadding)});          

      }

      @include oj-rtl() {
        direction: ltr;

          padding-left: calc(16px + #{oj-shorthand-property-value-left($selectArrowPadding)}
                              + #{oj-shorthand-property-value-right($selectArrowPadding)});          

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

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

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

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

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

    /* multi-select */

    /* 
     * Applied to the multi-select box which includes the input field and the selected choices
     */
    .oj-select-choices {
      box-sizing: border-box;
      height: auto;
      min-height: calc(#{$formControlTriggerHeight} * 1.25);
      padding: 0 $formControlPaddingHorizontal 5px;   
      @include oj-form-control-content;   
      // Default to no border for common due to generic changes for quiet forms
      border-width: 0;

      margin: 0;

      cursor: text;
      overflow: hidden;
      width: 100%;
    }
    
    // For oj-select-many .oj-select-choices is different from .oj-select-accessible-container
    // so we need to apply separate stylings for it.
    .oj-select-multi .oj-select-accessible-container {
      width: 100%;
    }

    /* 
     * Applied to the multi-select box list items which include the search field and the selected choices
     */
    .oj-select-choices li {
      list-style: none; 
      @include oj-ltr() {
        float: left;
      }
      @include oj-rtl() {
        float: right;
      }   
    }

    /* 
     * Applied to the multi-select placeholder
     */
    .oj-select-multi .oj-select-default {
      margin-top: 5px;
      padding: 0;

        line-height: calc(#{$formControlTriggerHeight} * 0.9);
        color: $formControlPlaceholderColor; 
        font-style: $formControlPlaceholderFontStyle;        

    }

    /* 
     * Applied to the input field. Override default .oj-listbox-input
     */
    .oj-select-multi .oj-listbox-input {

        background-color: $formControlBgColor;
        color: $formControlInputValueColor;
        font-size: $formControlInputFontSize;
        @include oj-form-control-text-size-adjust($formControlInputFontSize);


      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; 

      
      padding-top: 0;
      padding-bottom: 0;
      @include oj-ltr() {
        padding-right: 0;
        padding-left: 0;
      }
      @include oj-rtl() {
        padding-left: 0;
        padding-right: 0;
      }

    }

    /* 
     * Applied to the multi-select selected choice
     */
    .oj-select-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-select-selected-choice.oj-focus {

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

    }

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

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

    /*
     * Applied to the clear entry field of the selected choice
     */
    .oj-select-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/Warning styling for the widget */
    /* The borders are no longer on this element */
    .oj-select.oj-invalid .oj-select-choice,
    .oj-select-native.oj-invalid .oj-select-select,
    .oj-select-multi.oj-invalid .oj-select-choices,
    .oj-select.oj-warning .oj-select-choice,
    .oj-select-native.oj-warning .oj-select-select,
    .oj-select-multi.oj-warning .oj-select-choices {
      border-width: 0;
    }

    /* disabled styles  for single-select */
    .oj-select.oj-disabled .oj-select-choice {

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

    }

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

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

      outline: 0;
    }

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

    /* 
     * Applied to the place holder text
     */
    .oj-select-chosen.oj-select-default {

        color: $formControlPlaceholderColor; 
        font-style: $formControlPlaceholderFontStyle;

    }

    /* 
     * Applied to the selected text
     */
    .oj-select-chosen {
      border: 0;
      outline: 0;
      white-space: nowrap;
      flex: 1 1 auto; 
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;


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

      // height needs to be 100% as the border and height is set on an ancestor element
      height: 100%;
    }

    /* 
     * Applied to the dropdown open icon in jet theme
     */
    .oj-select-jet .oj-select-arrow {
      flex: 0 0 auto; 
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      vertical-align: middle;
    }

    // High Contrast
    //--------------------------------------------

    // a disabled select will have a less prominent border
    .oj-hicontrast .oj-select.oj-disabled {
      border-style: dotted;
    }

    /* 
     * Applied to the dropdown open icon
     */
    .oj-select-open-icon {
      @extend .oj-fwk-icon-arrow02-s;

        @include oj-rtl() {
          padding-left: oj-shorthand-property-value-right($selectArrowPadding);
          padding-right: oj-shorthand-property-value-left($selectArrowPadding);        
        }
        @include oj-ltr() {
          padding-right: oj-shorthand-property-value-right($selectArrowPadding);
          padding-left: oj-shorthand-property-value-left($selectArrowPadding);
        }        


    }

    .oj-select-open-icon,
    .oj-select-open-icon:hover,
    .oj-select-open-icon:focus  {
      text-decoration: none;
    }
    

    .oj-select-multiple-open-icon {
      @extend .oj-fwk-icon-dots-vertical !optional;

      font-size: 24px;

        @include oj-rtl() {
          padding-left: oj-shorthand-property-value-right($selectArrowPadding);
          padding-right: oj-shorthand-property-value-left($selectArrowPadding);
        }
        @include oj-ltr() {
          padding-right: oj-shorthand-property-value-right($selectArrowPadding);
          padding-left: oj-shorthand-property-value-left($selectArrowPadding);
        }      


    }

    /* clear entry icon */
    .oj-select-clear-entry-icon {
      @extend .oj-fwk-icon-cross;
    }


    // Native theming
    //--------------------------------------------

    /* Override default options*/
    $selectDefaultOptions: ();

    @if ($selectRenderModeOptionDefault)
    {
      $selectDefaultOptions: map-merge($selectDefaultOptions, (renderMode: $selectRenderModeOptionDefault));
    }
    @if ($loadingIndicatorDelayDuration) {
      $selectDefaultOptions: map-merge($selectDefaultOptions, (loadingIndicatorDelay: $loadingIndicatorDelayDuration));
    }
    .oj-select-option-defaults {
      font-family: oj-json-from-map($selectDefaultOptions);
    }

    //Bug 23299519 - single select doesn't center align in inherit styles demo
    .oj-select-native .oj-select-arrow {
      display: inline-block;
      text-align: center;
      position: absolute;
      top: calc(50% - 1rem);
      @include oj-ltr() {
        right: 0;
      }
      @include oj-rtl() {
        left: 0;
      }

        line-height: $formControlTriggerHeight;
        color: $selectArrowColor;        


      pointer-events: none;
    }

    .oj-select-native.oj-disabled .oj-select-arrow {

        opacity: $formControlOpacityDisabled;        

    }

    //Bug 23755887 - select messaging issues
    .oj-select-native.oj-invalid .oj-select-arrow,
    .oj-select-native.oj-warning .oj-select-arrow {
      top: 0;
    }

    //select tag
    .oj-select-select {

      @include oj-form-control-content($formControlTriggerValueColor);
      // Default to no border for common due to generic changes for quiet forms
      border-width: 0;
      height: $formControlTriggerHeight;
      padding: 0 $formControlPaddingHorizontal;

      box-sizing: border-box;
      width: 100%;
      white-space: nowrap;
      background-clip: padding-box;
    }

    select.oj-select-select.oj-select-default:not([multiple]) {

        color: $formControlPlaceholderColor; 
        font-style: $formControlPlaceholderFontStyle;        

    }

    .oj-select-select[disabled] {

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

    }

    .oj-select-select option {

        background-color: $formControlBgColor;        

    }

    /* 
     * Applied to focus ring around the select box 
     */
    .oj-select-select:not(.oj-focus-highlight):focus {
      outline: none;
    }

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

    //jet theme
    // trigger
    .oj-select-jet:not(.oj-read-only).oj-enabled .oj-select-choice:active,
      .oj-select-native.oj-enabled .oj-select-select:active {

          background-color: $formControlTriggerBgColorActive;          

    }

    .oj-select-jet .oj-select-arrow.oj-select-open-icon:not(.oj-disabled) {

        color: $selectArrowColor;

    }

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

    // Styling on form control dom which doesn't require text-align, padding, or color
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-select-chosen {
      background-color:inherit;
      border-width: 0;
    }

    .oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select {
      height:100%;
    }

    // TODO: single select when height is large, it doesn't vertically center align
    // TODO: multi select's color inherit does not work. the color does not get inherited. (same with combobox)

    // For quiet Forms

    

    .oj-text-field-label-inside .oj-select-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-select-choices {
      border: 0;
      background-color: transparent;
      padding: $formControlInsidePaddingTop $formControlPaddingHorizontal 5px;
    }

    .oj-text-field-label-inside .oj-select-chosen {
      padding: $formControlInsidePaddingTop $formControlPaddingHorizontal 0;
      margin-top: 5px;
    }

    .oj-text-field-label-inside .oj-select-choice.oj-hover,
    .oj-text-field-label-inside .oj-select-choices.oj-hover {
      background-color: transparent;
    }

    .oj-text-field-label-inside.oj-select.oj-read-only .oj-select-choice {
      padding: 0;

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

    .oj-text-field-label-inside.oj-select.oj-read-only .oj-select-chosen {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }
    
    .oj-text-field-label-inside.oj-select.oj-read-only .oj-select-selected-choice {
      line-height: normal;
    }

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

    .oj-text-field.oj-select-multi .oj-text-field-container {
      height: auto;
    }
    
    .oj-text-field.oj-select-multi:not(.oj-read-only) .oj-text-field-container {
      // The min height needs to be applied to the oj-text-field-container for .oj-select-many
      // since the border is on the .oj-text-field-container div.
      min-height: calc(#{$formControlTriggerHeight} * 1.25);
    }
    .oj-text-field.oj-select:not(.oj-select-multi) .oj-text-field-container {
      height: $formControlTriggerHeight;
    }

    .oj-text-field-label-inside:not(.oj-read-only) .oj-select-selected-choice {
      @include oj-ltr() {
        margin: 10px 6px 0 0;
      }
      @include oj-rtl() {
        margin: 10px 0 0 6px;
      }
    }
    .oj-text-field-label-inside.oj-select {
      max-width: 100%;
    }
    .oj-text-field-label-inside .oj-select-label {
      align-self: flex-start;
    }
  }
}