// Copyright (c) 2016-2018 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("select.clarity") {
    .select {
        position: relative;

        select {
            @include custom-inputs(1rem);
            @include clr-form-fields-appearance(2.5rem, $clr-form-field-border-color, 70%);
            @include input-border-bottom-animation($clr-input-border-color);
            position: relative;
            padding: 0 ($clr-dropdown-caret-icon-dimension + 0.5rem) 0 0.25rem;
            cursor: pointer;
            width: 100%;
            //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-select-hover-background;
                background: $clr-select-hover-background;
            }

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

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

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

        //Selectbox custom arrow
        &::after {
            position: absolute;
            content: '';
            height: $clr-dropdown-caret-icon-dimension;
            width: $clr-dropdown-caret-icon-dimension;
            top: (1rem - $clr-dropdown-caret-icon-dimension) / 2;
            right: 0.25rem;
            // TODO: get rid of generated icons
            background-image: generateCaretIcon($clr-select-after-color);
            @include icon-background-styles();
            margin: 0;
        }

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

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

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

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

        //Multiple Select
        &.multiple::after {
            content: none;
        }
    }

    //Multiple Select
    select[multiple], select[size] {
        padding: 0;
        background: $clr-multiple-select-background;
        border: $clr-default-borderwidth solid $clr-multiple-select-border-color;
        border-radius: $clr-global-borderradius;
        height: auto;
        min-width: 5rem;

        &:hover,
        &:active {
            background: $clr-multiple-select-background;
            border-color: $clr-multiple-select-border-color;
        }
        option {
            padding: 0.125rem 0.25rem;
            color: $clr-multiselect-option-font-color;
        }
    }
}