$selector-background-color: $base-color-light;
$selector-color: $base-color-dark;
$selector-shadow-color: rgba(0, 0, 0, 0.4);

$selector-open-option-border-color: #b0bec5;
$selector-open-option-background: #b0bec5;
$selector-open-option-width: 24px;

$selector-option-background-color: $selector-background-color;
$selector-option-color: $selector-color;
$selector-option-background-color-hover: $base-color-middle;

$selector-height: 28;
$selector-smaller-height: 18;

.selector {
    height: #{$selector-height}px;
    min-width: 80px;

    margin-right: 5px;
    position: relative;
    left: 0;

    display: inline-block;

    background: $selector-background-color;
    color: $selector-color;
    font-size: 1em;
    text-align: left;

    overflow: visible;

    @include set(box-shadow, 0px 2px 4px $selector-shadow-color);
    @include set(border-radius, 2px);

    .label_selected {
        position: relative;
        top: 3.5px;
        margin: 0 4px;
        padding-right: $selector-open-option-width;
    }

    .open_options {
        height: #{$selector-height}px;
        width: $selector-open-option-width;

        position: absolute;
        right: 0;
        top: 0;

        opacity: 0.5;

        border-left: 1px solid $selector-open-option-border-color;
        border-radius: 0 2px 2px 0;

        background: $selector-open-option-background;
        text-align: center;

        cursor: pointer;


        &:hover {
            opacity: 1;
        }

        .fa {
            text-shadow: none !important;
        }
    }

    .option_container {
        display: none;
        height: auto;
        max-height: 170px;
        min-width: 100%;
        width: auto;

        position: absolute;
        left: 0;
        top: #{$selector-height + 2}px;

        overflow-y: auto;
        background: $selector-background-color;

        z-index: 400;

        @include set(box-shadow, 0 2px 5px $selector-shadow-color);

        &.openUp {
            display: block;
            visibility: hidden;
            top: 0px;
            position: relative;
            float: left;
            max-height: 300px;
            overflow: auto;
            @include set(box-shadow, 0px 0px 5px $selector-shadow-color);
        }

        &.expanded {
            display: block;

            &.openUp {
                display: inline;
                visibility: visible;
            }
        }

        .option {
            height: 100%;
            width: 100%;
            padding: 5px;

            position: relative;
            left: 0;

            border-bottom: solid 1px $base-color-dark;

            background: $selector-option-background-color;
            color: $selector-option-color;

            display: flex;

            &:hover:not(.groupTitle) {
                cursor: pointer;
                background: $selector-option-background-color-hover;
                color: $selector-option-background-color;
            }

            &-icon-label {
                font-size: 0.6em;
                margin: auto 0;
                position: relative;
                text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
                margin-right: 6px;
            }

            &.groupTitle {
                cursor: default;
                font-size: 90%;
                font-variant: small-caps;
                font-weight: bold;
                border-bottom: none;
                border-top: 3px double #000;
            }

            &.doubleBorderTop {
                border-top: 3px double #000;
            }
        }

        .option.selected {
            background: $selector-option-color;
            color: $selector-option-background-color;
            cursor: default;

            &:hover {
                background: $selector-option-color;
                color: $selector-option-background-color;
            }
        }
    }

    &.smaller {
        height: #{$selector-smaller-height}px;

        .label_selected {
            top: 0;
        }

        .open_options {
            height: #{$selector-smaller-height}px;

            .fa {
                top: -2px;
                position: relative;
            }
        }

        .option_container {
            top: #{$selector-smaller-height + 2}px;

            .option {
                padding: 1px 5px;
            }
        }
    }
}