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

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

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


    /* listbox */
    /* --------------------------------------------------------------- */

    /*
     * applied to the dropdown
     */

    /* defines the stacking context for the listbox */
    .oj-listbox-drop-layer {
      @extend .oj-component-layer;

        z-index: $popupZindex;

    }

    .oj-listbox-drop {
      @extend .oj-component-popup;
      box-sizing: border-box;
      top: 100%;

        background: $popupBgColor;
        border: 1px solid $popupBorderColor;
        @include oj-box-shadow($smallBoxShadow);
      border-top: 0;
    }

    .oj-listbox-drop.oj-listbox-searchselect {
      display: flex;
      flex-direction: column;
    }

    .oj-listbox-drop.oj-listbox-fullscreen {
      position: fixed;
    }
    
    .oj-listbox-searchselect-no-results:not(.oj-listbox-fullscreen) {
      border: none;
    }

    /*
     * applied to the dropdown when it is open above the component
     */
    .oj-listbox-drop-above {

        border-top: 1px solid $popupBorderColor;

      border-bottom: 0;
      // top border moves the div down 1 px when the listbox is displayed above
      margin-top: -1px;
    }

    /*
     * applied to placeholder in the dropdown
     */
    .oj-listbox-placeholder {

        color: $formControlPlaceholderColor;

    }

    /*
     * Base class for results, shared by oj-listbox-results and oj-select-results (for
     * oj-select-single).  oj-select-single cannot directly reuse oj-listbox-results itself
     * because that interferes with collection styling, such as by hiding the selected item.
     */
    .oj-listbox-results-base {
      padding: 0;
      margin: 1px 0 2px 0;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      max-height: 200px;
    }
    /*
     * applied to results
     */
    .oj-listbox-results {
      @extend .oj-listbox-results-base;
    }

    /*
     * applied to nested option groups
     */
    .oj-listbox-result-sub {
      margin: 0;
      padding: 0;
    }

    /*
     * applied to result labels
     */
    .oj-listbox-result-label {
      line-height: 2rem;
      margin: 0;
      min-height: 2rem;
      word-break: break-word;
      -webkit-touch-callout: none;

        @include oj-user-select-property(none);
        @include oj-ltr() {
          padding-left: $listboxItemPadding;
        }
        @include oj-rtl() {
          padding-right: $listboxItemPadding;
        }

    }

    /*
     * applied to result labels in different nested levels of option groups.
     * Padding is used instead of margins because the background color for states
     * like hover need to span across the entire box.
     */
    .oj-listbox-results-depth-1 > .oj-listbox-result-label {

        @include oj-ltr() {
          padding-left: calc(#{$listboxIndentWidth} + #{$listboxItemPadding});
        }
        @include oj-rtl() {
          padding-right: calc(#{$listboxIndentWidth} + #{$listboxItemPadding});
        }

    }

    .oj-listbox-results-depth-2 > .oj-listbox-result-label {

        @include oj-ltr() {
          padding-left: calc(2 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }
        @include oj-rtl() {
          padding-right: calc(2 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }

    }

    .oj-listbox-results-depth-3 > .oj-listbox-result-label {

        @include oj-ltr() {
          padding-left: calc(3 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }
        @include oj-rtl() {
          padding-right: calc(3 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }

    }

    .oj-listbox-results-depth-4 > .oj-listbox-result-label {

        @include oj-ltr() {
          padding-left: calc(4 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }
        @include oj-rtl() {
          padding-right: calc(4 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }

    }

    .oj-listbox-results-depth-5 > .oj-listbox-result-label {

        @include oj-ltr() {
          padding-left: calc(5 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }
        @include oj-rtl() {
          padding-right: calc(5 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }

    }

    .oj-listbox-results-depth-6 > .oj-listbox-result-label {

        @include oj-ltr() {
          padding-left: calc(6 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }
        @include oj-rtl() {
          padding-right: calc(6 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }

    }

    .oj-listbox-results-depth-7 > .oj-listbox-result-label {

        @include oj-ltr() {
          padding-left: calc(7 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }
        @include oj-rtl() {
          padding-right: calc(7 * #{$listboxIndentWidth} + #{$listboxItemPadding});
        }

    }

    /*
     * applied to the nested option group labels,
     * they are direct children of li.oj-listbox-result-with-children
     */
    .oj-listbox-result-with-children > .oj-listbox-result-label {
      font-weight: bold;
    }

    /*
     * applied to choices in the dropdown
     */
    .oj-listbox-results li {
      list-style: none;
      display: list-item;
      background-image: none;
    }

    /*
     * applied to the hovered choices in the dropdown
     */
    .oj-listbox-results .oj-hover {

        background: $listboxBgColorFocus;

    }

    /*
     * applied to disabled choices in the dropdown
     */
    .oj-listbox-results .oj-disabled {

        color: $textColorDisabled;

      display: list-item;
      cursor: default;
    }

    /*
     * applied to selected choice in the dropdown
     */
    .oj-listbox-results .oj-selected {
      display: none;
    }

    // .oj-listbox-fullscreen {
    //   .oj-listbox-header-wrapper,
    //   .oj-listbox-footer-wrapper {
    //     padding: 10px 5px 10px 5px;
    //   }
    // }

    // .oj-listbox-header-wrapper,
    // .oj-listbox-footer-wrapper {
    //   cursor: default;
    //   display: flex;
    //   flex-shrink: 0;
    // }

    // .oj-listbox-header-main,
    // .oj-listbox-footer-main {
    //   flex-grow: 1;
    // }

    /*
     * This class is only applied transiently to measure the browser native scollbar
     */
    .oj-listbox-measure-scrollbar {
      position: absolute;
      top: -10000px;
      width: 100px;
      height: 100px;
      overflow: scroll;
      @include oj-ltr() {
        left: -10000px;
      }
      @include oj-rtl() {
        right: -10000px;
      }
    }


    /* icons */
    /* -----------------------------*/

    /*
     * Applied to the search icon
     */
    .oj-listbox-search-icon {
      @extend .oj-fwk-icon-magnifier;
      color: $buttonIconColor;
    }

    /*
     * Applied to the search box which includes the search text and the spyglass icon
     */
    .oj-listbox-search {
      box-sizing: border-box;
      width: 100%;
      display: inline-flex;
      @include oj-form-control-text-size-adjust($formControlInputFontSize);

      background-color: $formControlBgColor;
    }

    /*
     * Applied to the search text
     */
    .oj-listbox-input {
      width: 100%;
     }

    /*
     * Used to cover the border bottom of the select box when the dropdown is open
     */
    .oj-listbox-search-wrapper {
      border: 0;
      padding: $listboxItemPadding;
      background-color: $formControlBgColor;
    }

    /*
     * Applied to the spyglass (search icon) container
     */
    .oj-listbox-spyglass-box {
      @include oj-ltr() {
        padding-right: 6px;
      }
      @include oj-rtl() {
        padding-left: 6px;
      }
    }

    // .oj-listbox-searchselect .oj-listbox-search-wrapper {
    //   display: flex;
    // }

    /*
     * Applied to the "No matches found" result entry
     */
   .oj-listbox-no-results {

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


   }

    /*
     * Applied to the filter message container
     */
    .oj-listbox-filter-message-box {

        padding-left: $listboxItemPadding;
        padding-right: $listboxItemPadding;

    }

    /*
     * Applied to the filter message text
     */
    .oj-listbox-filter-message-text {
      line-height: 1.8rem;

        color: $listboxMessageTextColor;
        font-size: $smallFontSize;
        padding-top: $listboxItemPadding;
        padding-bottom: $listboxItemPadding;

    }

    /*
     * Applied to the filter message separator
     */
    .oj-listbox-filter-message-separator {

        border-bottom: 1px solid $popupBorderColor;

    }

    /**
     * Applied to the wrapper container of the loading indicator in the dropdown for the
     * ojselectcombobox components.
     */
     .oj-listbox-loader-wrapper {
      display: flex;
      justify-content: center;
    }

    /*
     * Applied to the data fetching indicator container
     */
    .oj-listbox-loading-icon-container {
      display: flex;

      // center containing items
      justify-content: center;

      // vertically center containing items
      align-items: center;

      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      border-style: none;
    }

    /*
     * Applied to the data fetching indicator icon
     */
    .oj-listbox-loading-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin: 0.5rem auto;
      @include oj-icon-content(
        $icon: oj-image-url("spinner_full.gif"),
        $lowResProportion: 0.15
      );
    }


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

    // apply to a hovered choice
    .oj-hicontrast .oj-listbox-results .oj-hover {

        border: 1px solid $formControlBorderColor;

    }

    // apply to a disabled choice
    .oj-hicontrast .oj-listbox-results .oj-disabled {

        border: 1px dotted $formControlBorderColor;

    }

    /*
     * Applied to the listbox results if it has custonm header.
     */
    .oj-listbox-results-with-header {
      padding: 0;
      margin: 0;
    }

    /*
     * Applied to the listbox custonm header options.
     */
    .oj-listbox-results-with-header li {
      background-image: none;
      list-style: outside none none;
    }

    /*
     * Applied to the listbox custonm header.
     */
    .oj-listbox-result-header {

        padding: $listboxItemPadding $listboxItemPadding 0 $listboxItemPadding;

    }

    .oj-listbox-result-header ul {
      padding: 0;
    }

    .oj-listbox-result-header a.oj-focus {
      text-decoration: underline;

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

    }

    /*
     * Applied to the matching text in the dropdown options
     */
    .oj-listbox-highlighter {
      @extend .oj-highlighttext-highlighter;
    }

    .oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
      @include oj-form-control-inherit();
      @include oj-form-control-inherit-background();
      @include oj-form-control-inherit-border();
    }

  }
}