// Copyright (c) 2016-2019 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(1rem);
      @include form-fields-appearance($clr-forms-border-color);
      @include input-border-animation($clr-forms-focused-color);
      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 {
        border-color: $clr-forms-select-hover-background;
        background: $clr-forms-select-hover-background;
      }

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

      option {
        color: $clr-forms-select-option-color;
      }
    }

    //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: '';
      height: $clr-forms-select-caret-size;
      width: $clr-forms-select-caret-size;
      top: ($clr-forms-baseline * 4 - $clr-forms-select-caret-size) / 2;
      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 {
      color: $clr-forms-select-caret-hover-color;
    }
  }

  .clr-error .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] {
    padding: 0;
    background: $clr-forms-select-multiple-background-color;
    border: $clr-default-borderwidth solid $clr-forms-select-multiple-border-color;
    border-radius: $clr-global-borderradius;
    height: auto;
    min-width: 5rem;

    &:hover,
    &:active {
      background: $clr-forms-select-multiple-background-color;
      border-color: $clr-forms-select-multiple-border-color;
    }
    option {
      padding: ($clr-forms-baseline / 2) $clr-forms-baseline;
      color: $clr-forms-select-multiple-option-color;
    }
  }

  .clr-error select[multiple] {
    border-color: $clr-forms-invalid-color;

    &:focus {
      outline: 0;
      box-shadow: 0 0 2px 2px lighten($clr-forms-invalid-color, 30%);
    }
  }

  .clr-form-control-disabled .clr-select {
    &.disabled {
      @include disabled-form-fields();

      &:hover::after {
        color: $clr-forms-select-caret-color;
      }
    }

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

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