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

@import "../../utilities/oj.utilities";


// ----- start dependencies ---------

// set up include variables before importing dependencies
@if $includeSelectClasses != false {
  $includeIconClasses:              true !global;
  $includePopupClasses:             true !global;
  $includeLabelClasses:             true !global;
  $includeMessagingClasses:         true !global;
  $includeFormControlCommonClasses: true !global;
  $includeListboxClasses:           true !global;
}

// import dependencies
@import "../../common/helpers/oj.common.helpers"; 
@import "oj.alta.ios.icons";
@import "oj.alta.ios.messaging";
@import "oj.alta.ios.popup";
@import "oj.alta.ios.formcontrol.label";
@import "oj.alta.ios.formcontrol.common";
@import "oj.alta.ios.formcontrol.listbox";

// ----- end dependencies ---------


// import classes defined in the common directory
@import "../../common/widgets/oj.common.formcontrol.select";


@if $includeSelectClasses != false {
  @include module-include-once("alta.ios.select") {
    .oj-select .oj-select-arrow {
      display: none;
    }

    // Text-align isn't supported by HTML select, but iOS wants to be end-aligned by
    // default.  Switching direction appears to give us what we want visually, without
    // any negative consequences (at least none that we've seen).  Overriding specifically
    // for iOS because we know there are issues in Android (with direction 'rtl', the multi-
    // select string "N selected" gets rendered as "selected N").
    .oj-select-select {

        @include oj-ltr() {
          @if ($formControlTextAlign == 'end' or $formControlTextAlign == 'right') {
            direction: rtl;
          }
        }
        @include oj-rtl() {
          @if ($formControlTextAlign == 'end' or $formControlTextAlign == 'left') {
            direction: ltr;
          }
        }

    }

    .oj-select-multiple-open-icon {
      display:none;
    }

    .oj-select-select::-ms-expand {
      display:none;
    }

    .oj-select-select {
      -moz-appearance:none;
    }

    // We want the placeholder style on the select for themes where we render
    // triggers + dropdowns (iOS and Android), but not for themes where we
    // render a menulist (Alta and Windows).  (In the latter case, only the
    // placeholder option is styled).
    .oj-select-select.oj-select-default[multiple] {

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

    }
    
    /* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
    .oj-select-search-field {

        line-height: $formControlTriggerHeight;
      
    }

    // ios has a native select element with no icon, so doesn't need the padding-right here.
    .oj-form-control-text-align-right .oj-select .oj-select-select
    {
      @include oj-ltr() {
        padding-right: 0px;
      }
    }
    .oj-form-control-text-align-end .oj-select .oj-select-select {
      @include oj-ltr() {
        padding-right: 0px;
      }
      @include oj-rtl() {
        padding-left: 0px;
      }
    }
  }
}