/*!
 * Copyright (c) 2017 Edelweiss72 GmbH - All Rights Reserved
 * Unauthorized usage or distribution of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 *
 * @author Wladimir Eberts <w.eberts@edelweiss72.de>
 */

.mod-form {
    .m-input-select {
        > .select2 {
            width: 100%;
        }
    }
}

.select2-container--form {
    .select2-selection--single {
        padding: 0;
        height: auto;
        cursor: default;
        box-shadow: $form-input-shadow;
        border-radius: $form-input-radius;
        background-color: $form-input-background;
        border: $form-input-border-width solid $form-input-border-color;

        @include if-parent('.select2-container--form.select2-container--disabled') {
            background-color: #eee;
        }

        .m-item.is-error & {
            border-color: $form-color-error;
        }

        @include if-parent('.select2-container--form.select2-container--focus') {
            border-color: $form-input-border-color-active;
            background-color: $form-input-background-active;
        }

        @include if-parent('.select2-container--form:hover') {
            border-color: $form-input-border-color-hover;
            background-color: $form-input-background-hover;
        }

        .select2-selection__rendered {
            line-height: inherit;
            color: $form-input-color;
            overflow-y: visible;
            overflow-x: hidden;
            padding: max(0, $form-input-padding-vertical - $form-input-border-width) max(0, $form-input-padding-horizontal - $form-input-border-width);

            @if unit($form-select-size) == em {
                padding-right: calc(#{$form-select-size} + #{2 * $form-input-padding-horizontal});
            }
            @else {
                padding-right: $form-select-size + 2 * $form-input-padding-horizontal;
            }

            @if $form-line-height and type-of($form-line-height) != string {
                @if unitless($form-line-height) {
                    min-height: calc(#{$form-line-height * 1em} + #{2 * $form-input-padding-vertical});
                }
                @else {
                    min-height: $form-line-height + 2 * $form-input-padding-vertical;
                }
            }

            &:empty::before {
                // unicode zero width space character
                content: '\200b';
            }
        }

        .select2-selection__clear {
            cursor: pointer;
            float: right;
            font-weight: bold;

            @include if-parent('.select2-container--form[dir="rtl"]') {
                float: left;
            }

            @include if-parent('.select2-container--form.select2-container--disabled') {
                display: none;
            }
        }

        .select2-selection__placeholder {
            color: $form-input-placeholder;
        }

        .select2-selection__arrow {
            @if unit($form-select-size) == em {
                width: calc(#{$form-select-size} + #{2 * $form-input-padding-horizontal});
            }
            @else {
                width: $form-select-size + 2 * $form-input-padding-horizontal;
            }

            background-repeat: no-repeat;
            background-size: $form-select-size;
            @include absolute($top: 0, $bottom: 0, $right: 0);
            background-position: center right $form-input-padding-horizontal;
            background-image: embed($form-select-svg, (double: $form-select-double, color: $form-select-color, strength: $form-select-strength));

            @include if-parent('.select2-container--form[dir="rtl"]') {
                left: 0;
                right: auto;
            }

            @include if-parent('.select2-container--form.select2-container--open') {
                transform: scaleY(-1);
            }
        }
    }

    .select2-selection--multiple {
        cursor: text;
        box-shadow: $form-input-shadow;
        border-radius: $form-input-radius;
        background-color: $form-input-background;
        border: $form-input-border-width solid $form-input-border-color;

        @include if-parent('.select2-container--form.select2-container--focus') {
            outline: none;
            border-color: $form-input-border-color-active;
            background-color: $form-input-background-active;
        }

        @include if-parent('.select2-container--form:hover') {
            border-color: $form-input-border-color-hover;
            background-color: $form-input-background-hover;
        }

        @include if-parent('.select2-container--form.select2-container--disabled') {
            cursor: default;
            background-color: #eee;
        }

        .select2-selection__rendered {
            margin: 0;
            width: 100%;
            padding: 0 5px;
            list-style: none;
            //box-sizing: border-box;

            li {
                list-style: none;
                white-space: normal;
            }
        }

        .select2-selection__placeholder {
            float: left;
            color: $form-input-placeholder;
            margin-top: $form-input-padding-vertical;

            @include if-parent('.select2-container--form[dir="rtl"]') {
                float: right;
            }
        }

        .select2-selection__clear {
            float: right;
            cursor: pointer;
            font-weight: bold;
            margin-top: $form-input-padding-vertical;
            margin-right: $form-input-padding-horizontal;
        }

        .select2-selection__choice {
            background-color: #e4e4e4;

            border: 1px solid #aaa;
            border-radius: 4px;
            cursor: default;

            float: left;

            margin-right: 5px;
            margin-top: 5px;
            padding: 0 5px;

            @include if-parent('.select2-container--form[dir="rtl"]') {
                float: right;
                margin-left: 5px;
                margin-right: auto;
            }
        }

        .select2-selection__choice__remove {
            color: #999;
            cursor: pointer;

            display: inline-block;
            font-weight: bold;

            margin-right: 2px;

            @include if-parent('.select2-container--form[dir="rtl"]') {
                margin-left: 2px;
                margin-right: auto;
            }

            &:hover {
                color: #333;
            }

            @include if-parent('.select2-container--form.select2-container--disabled') {
                display: none;
            }
        }

        .select2-search--inline {
            @include if-parent('.select2-container--form[dir="rtl"]') {
                float: right;
            }
        }
    }

    &.select2-container--open.select2-container--above {
        .select2-selection--single,
        .select2-selection--multiple {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }

    &.select2-container--open.select2-container--below {
        .select2-selection--single,
        .select2-selection--multiple {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    .select2-search--dropdown {
        padding: $form-input-padding-vertical $form-input-padding-horizontal;

        .select2-search__field {
            outline: none;
            border: $form-input-border-width solid $form-input-border-color;
            background-color: $form-input-background;
            padding: $form-input-padding-vertical $form-input-padding-horizontal;
        }
    }

    .select2-search--inline {
        .select2-search__field {
            border: none;
            outline: none;
            box-shadow: none;
            font-size: inherit;
            background: transparent;
            -webkit-appearance: textfield;

            &[placeholder]:not([placeholder='']) {
                width: 100% !important; // sass-lint:disable-line no-important
            }

            &::placeholder {
                opacity: 1;
                color: $form-input-placeholder;
            }

            // &:focus::placeholder {
            //     opacity: 0;
            // }

            // Internet Explorer 10+
            &::-ms-clear {
                display: none;
            }
        }
    }

    .select2-results > .select2-results__options {
        max-height: 200px;
        overflow-y: auto;
    }

    .select2-results__option {
        &:empty::before {
            // unicode zero width space character
            content: '\200b';
        }

        &[role=group] {
            padding: 0;
        }

        &[aria-disabled=true] {
            color: #999;
        }

        &[aria-selected=true] {
            background-color: #ddd;
        }

        .select2-results__option {
            padding-left: 1em;

            .select2-results__group {
                padding-left: 0;
            }

            .select2-results__option {
                margin-left: -1em;
                padding-left: 2em;

                .select2-results__option {
                    margin-left: -2em;
                    padding-left: 3em;

                    .select2-results__option {
                        margin-left: -3em;
                        padding-left: 4em;

                        .select2-results__option {
                            margin-left: -4em;
                            padding-left: 5em;

                            .select2-results__option {
                                margin-left: -5em;
                                padding-left: 6em;
                            }
                        }
                    }
                }
            }
        }
    }

    .select2-results__option--highlighted[aria-selected] {
        background-color: #5897fb;
        color: white;
    }

    .select2-results__group {
        cursor: default;
        display: block;
        padding: 6px;
    }
}