@import '../../../styles/mixins';
@import '../../../styles/definitions/forms';

// Local Variables
$namespace: ".select";
$select-height: $form-control-height;
$select-height-small: $form-control-small-height;
$select-border-color: $gray;
$select-border-radius: 3px;
$select-text-color: $body-color;
$select-text-color-hover: $white;

//Component Styles
#{$namespace} {
    &_group {
        #{$namespace} {
            &__container {
                flex-grow: 1;
            }

            &__control {
                @extend %form-select;
                position: relative;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
                min-height: auto;
                outline: 0;
                cursor: pointer;

                &--is-focused {
                    border-color: $primary-color;
                }
            }
        
            &__value-container {
                padding-top: 0;
                padding-bottom: 0;
            }
        
            &__indicator {
                padding-top: 0;
                padding-bottom: 0;
                color: $deep-gray;
                
                &:hover, &:focus {
                    color: $deep-gray;
                }
        
                &-separator {
                    display: none;
                }
            }

            &__placeholder {
                color: $form-control-placeholder-color;
                font-size: $form-control-font-size;
            }
        
            &__single-value {
                color: $select-text-color;
                font-size: $form-control-font-size;
            }
        
            &__menu {
                overflow: hidden;
        
                &-list {
                    padding: 0;
                }
            }
            
            &__option {
                @include text-4;
                position: relative;
                padding: 8px 11px;
                color: $select-text-color;
                cursor: pointer;

                &--is-focused {
                    background-color: $light-gray;
                }
                
                &:active,
                &--is-selected {
                    font-weight: 500;
                    background: transparent;

                    &:after {
                        content: '';
                        @include background-primary();
                        opacity: 0.15;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                    
                }
                &--is-selected {
                    font-weight: 500;
                }
            }
        }
        &--small {
            #{$namespace} {
                &_text {
                    font-size: $bodyFontSize5;
                }
                &__control {
                    height: $select-height-small;
                }
                &__single-value {
                    font-size: $bodyFontSize6;
                }
                &__option {
                    font-size: $bodyFontSize5;
                }
            }
        }
        &--auto {
            #{$namespace} {
                &__control {
                    height: auto;
                }
            }
        }
        &--button {
            #{$namespace} {
                &__control {
                    border-radius: $button_border-radius;
                    box-shadow: none;
    
                    &:hover {
                        box-shadow: $button_box-shadow;
                    }
                }
            }
        }
        &--light {
            #{$namespace} {
                &_text {
                    color: $white;
                }
            }
        }
        &--dark {
            #{$namespace} {
                &__control {
                    color: $form-control--dark_color;
                    background-color: $form-control--dark_bgcolor;
                    border-color: $form-control--dark_border-color;
                }
                &__placeholder {
                    color: $form-control--dark_color;
                }
            }
        }
        &--transparent {
            #{$namespace} {
                &__control {
                    color: inherit;
                    background-color: transparent;
                    border: 0;
                    box-shadow: none;
                }
                &__placeholder {
                    color: inherit;
                }
                &__value-container {
                    padding-left: 0;
                }
                &__single-value {
                    color: inherit;
                    margin-left: 0;
                }
                &__indicator {
                    color: inherit;
                    
                    &:hover, &:focus {
                        color: inherit;
                    }
                }
            }
        }
        &--button#{&}--small {
            #{$namespace} {
                &__control {
                    border-radius: $button_border-radius--small;
                }
            }
        }
        &--error {
            #{$namespace} {
                &__control {
                    border-color: $form-error-color;
                }
            }
        }
    }
    &_label {
        &--inline{
            display: flex;
            align-items: center;
        }
    }

    &_text {
        @extend %form-label;

        &--inline {
            margin: 0 15px 0 0;
            font-weight: normal;
        }
    }

    &_error {
        @extend %input-error;
    }
}
