/*
// .select2
*/
@import '../variables';
@import '../svg';
@import '../mixins/direction';


$local-border-width: 1px;
$local-height: (
    lg: 42px,
    nl: 36px,
    sm: 30px,
);
$local-padding-x: (
    lg: 12px,
    nl: 10px,
    sm: 8px,
);
$local-font-size: (
    lg: 18px,
    nl: 16px,
    sm: 14px,
);
$local-line-height: (
    lg: 21px,
    nl: 19px,
    sm: 17px,
);


@mixin local-select2-size($size) {
    $postfix: -#{$size};

    @if($size == nl) {
        $postfix: '';
    }

    .form-control#{$postfix} + .select2-container {
        .select2-selection--single {
            height: map_get($local-height, $size);

            @include direction {
                background-position: $inline-end map_get($local-padding-x, $size) center;
            }
        }
        .select2-selection__rendered {
            line-height: map_get($local-line-height, $size);
            padding:
                calc(#{map_get($local-height, $size) - map_get($local-line-height, $size) - $local-border-width * 2} / 2)
                map_get($local-padding-x, $size);
            font-size: map_get($local-font-size, $size);

            @include direction {
                #{$padding-inline-end}: (5px + map_get($local-padding-x, $size) * 2 + 2px);
            }
        }
    }
}


@mixin local-select2-state($scheme, $state) {
    $bg-color-key:          #{$state}-bg-color;
    $font-color-key:        #{$state}-font-color;
    $border-color-key:      #{$state}-border-color;
    $placeholder-color-key: #{$state}-placeholder-color;

    .select2-selection--single {
        @if(map_has_key($scheme, $bg-color-key)) {
            background-color: map_get($scheme, $bg-color-key);
        }
        @if(map_has_key($scheme, $border-color-key)) {
            border-color: map_get($scheme, $border-color-key);
        }
    }
    .select2-selection__rendered {
        @if(map_has_key($scheme, $font-color-key)) {
            color: map_get($scheme, $font-color-key);
        }
    }
}


.form-control + .select2-container {
    width: 100%;

    .select2-selection__arrow {
        display: none;
    }
    .select2-selection--single {
        border-radius: 2px;
        border-width: $local-border-width;
        border-style: solid;
        background-clip: border-box;
        background-image: url(svg-select-arrow($form-control-select-arrow-color));
        background-repeat: no-repeat;
        background-size: 5px 10px;
        transition:
            border-color .15s ease-in-out,
            background .15s ease-in-out;

        &:focus {
            outline: none;
        }
    }
    .select2-selection__rendered {
        box-sizing: border-box;
    }
}

// states
.form-control + .select2-container {
    @include local-select2-state($form-control-default-scheme, normal);
}
.form-control + .select2-container--disabled {
    opacity: .7;
}
.form-control + .select2-container:not(.select2-container--open):not(.select2-container--disabled):hover {
    @include local-select2-state($form-control-default-scheme, hover);
}
.form-control + .select2-container--open {
    @include local-select2-state($form-control-default-scheme, focus);
}

// sizes
@include local-select2-size(nl);
@include local-select2-size(lg);
@include local-select2-size(sm);


// dropdown
.select2-dropdown {
    background: $select2-dropdown-bg;
    border: none;
    border-radius: 0;
    box-shadow: $select2-dropdown-shadow;
}
.select2-search--dropdown {
    padding: 0;
    border-bottom: 1px solid $select2-dropdown-divider;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none;
    padding: 6px 10px;
    font-size: 15px;

    &:focus {
        outline: none;
    }
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: $select2-dropdown-item-selected-bg-color;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: $select2-dropdown-item-highlighted-bg-color;
    color: $select2-dropdown-item-highlighted-font-color;
}
.select2-results__option {
    padding: 4px 10px;
    font-size: 15px;
}
.select2-results__options {
    &:before,
    &:after {
        display: list-item;
        content: '';
        height: 6px;
    }
}