/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */

@include exports('forms.select') {
  .clr-select-wrapper,
  .clr-multiselect-wrapper {
    position: relative;
    white-space: nowrap;

    select {
      @include custom-inputs($clr_baselineRem_1);
      @include form-fields-appearance();
      &:not([multiple]) {
        @include input-border-bottom-animation();
      }
      &[multiple]:focus {
        @include include-slim-outline-style-form-fields();
      }
      position: relative;
      padding: 0 ($clr-forms-select-caret-size + $clr-forms-baseline * 2) 0 $clr-forms-baseline;
      cursor: pointer;
      font-size: $clr-forms-field-font-size;

      //Moves the :after pseudo element (arrow) to the back so that clicking over it activates
      //the dropdown.
      z-index: map-get($clr-layers, select-box);

      &:hover,
      &:active {
        $hoverSassVar: $clr-forms-select-hover-background;
        $hoverCssVar: clr-forms-select-hover-background;
        @include css-var(border-color, $hoverCssVar, $hoverSassVar, $clr-use-custom-properties);
        @include css-var(background, $hoverCssVar, $hoverSassVar, $clr-use-custom-properties);
      }

      &:disabled option {
        @include disabled-form-fields();
      }

      option {
        @include css-var(
          color,
          clr-forms-select-option-color,
          $clr-forms-select-option-color,
          $clr-use-custom-properties
        );
      }
    }

    //Remove default arrow from IE
    select::-ms-expand {
      display: none;
    }
  }

  .clr-select-wrapper {
    max-height: $clr-forms-baseline * 4;
    display: inline-block;

    &::after {
      position: absolute;
      content: '';
      @include equilateral($clr-forms-select-caret-size);
      top: ($clr-forms-baseline * 4 - $clr-forms-select-caret-size) * 0.5;
      right: $clr-forms-baseline;
      // TODO: get rid of generated icons?
      background-image: generateCaretIcon($clr-forms-select-caret-color);
      @include icon-background-styles();
      margin: 0;
    }

    &:hover::after {
      @include css-var(
        color,
        clr-forms-select-caret-hover-color,
        $clr-forms-select-caret-hover-color,
        $clr-use-custom-properties
      );
    }
  }

  .clr-error .clr-select-wrapper::after,
  .clr-success .clr-select-wrapper::after {
    right: $clr-forms-icon-size + $clr-forms-baseline;
  }

  .clr-multiselect-wrapper {
    display: flex;

    .clr-validate-icon {
      margin-left: 0;
    }
  }

  //Multiple Select
  select[multiple],
  select[size] {
    $multiSassBgVar: $clr-forms-select-multiple-background-color;
    $multiCssBgVar: clr-forms-select-multiple-background-color;
    $multiSassBorderVar: $clr-forms-select-multiple-border-color;
    $multiCssBorderVar: clr-forms-select-multiple-border-color;
    padding: 0;
    @include css-var(background, $multiCssBgVar, $multiSassBgVar, $clr-use-custom-properties);
    border: $clr-global-borderwidth solid;
    @include css-var(border-color, $multiCssBorderVar, $multiSassBorderVar, $clr-use-custom-properties);
    @include css-var(border-radius, clr-global-borderradius, $clr-global-borderradius, $clr-use-custom-properties);
    height: auto;
    min-width: $clr_baselineRem_5;

    &:hover,
    &:active {
      @include css-var(background, $multiCssBgVar, $multiSassBgVar, $clr-use-custom-properties);
      @include css-var(border-color, $multiCssBorderVar, $multiSassBorderVar, $clr-use-custom-properties);
    }
    option {
      padding: ($clr-forms-baseline * 0.5) $clr-forms-baseline;
      @include css-var(
        color,
        clr-forms-select-multiple-option-color,
        $clr-forms-select-multiple-option-color,
        $clr-use-custom-properties
      );
    }
  }

  .clr-error select:not([multiple]) {
    @include css-var(
      border-bottom-color,
      clr-forms-invalid-color,
      $clr-forms-invalid-color,
      $clr-use-custom-properties
    );
  }

  .clr-error select[multiple] {
    @include css-var(border-color, clr-forms-invalid-color, $clr-forms-invalid-color, $clr-use-custom-properties);
  }
  .clr-form-control-disabled .clr-select {
    &.disabled {
      @include disabled-form-fields();

      &:hover::after {
        @include css-var(
          color,
          clr-forms-select-caret-color,
          $clr-forms-select-caret-color,
          $clr-use-custom-properties
        );
      }
    }

    &.disabled > select,
    select:disabled {
      @include disabled-form-fields();
      &:hover {
        background: none;
        @include css-var(border-color, clr-forms-border-color, $clr-forms-border-color, $clr-use-custom-properties);
      }
    }
  }

  .clr-form-compact .clr-multiselect-wrapper {
    margin-top: 0;
  }
}