// Cashmere theming for the third-party ng-select component.
// https://github.com/ng-select/ng-select

@import './colors';
@import './mixins';
@import './select';
@import './chip';
@import './variables';

$ng-select-primary-text: $offblack !default;
$ng-select-disabled-text: $gray-200 !default;
$ng-select-border: $slate-gray-300 !default;
$ng-select-border-focus: $primary-brand !default;
$ng-select-border-radius: 0 !default;
$ng-select-border-width: 1px !default;
$ng-select-bg: $white !default;
$ng-select-option-selected: $azure !default;
$ng-select-option-hover: tint($primary-brand, 75%) !default;
$ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
$ng-select-height: 35px !default;
$ng-select-value-padding-left: 9px !default;
$ng-select-value-font-size: 14px !default;

.ng-select {
    &.ng-select-opened {
        > .ng-select-container, >.ng-select-container:hover {
            border-color: $ng-select-border-focus;
            background-color: $white;
            box-shadow: 0 0 3px $primary-brand;
        }
        &.ng-select-bottom {
            > .ng-select-container {
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        &.ng-select-top {
            > .ng-select-container {
                border-top-right-radius: 0;
                border-top-left-radius: 0;
            }
        }
    }
    &.ng-select-focused {
        &:not(.ng-select-opened) > .ng-select-container {
            border-color: $ng-select-border-focus;
            background-color: $white;
            box-shadow: 0 0 3px $primary-brand;
        }
    }
    &.ng-select-disabled {
        > .ng-select-container {
            background-color: $slate-gray-100;
            border-color: $gray-200;
            cursor: not-allowed !important;

            .ng-value {
                opacity: 0.4;
                cursor: not-allowed !important;
            }

            .ng-placeholder {
                color: tint($text, 60%) !important;
                cursor: not-allowed !important;
            }
        }
        > .ng-select-container:hover {
            background-color: $slate-gray-100;
            border-color: $gray-200;
        }
        .ng-arrow-wrapper {
            cursor: not-allowed !important;
            opacity: 0.4;
        }
        input {
            cursor: not-allowed !important;
        }
    }
    &:not(.ng-select-disabled) {
        input {
            cursor: pointer !important;
        }
    }
    .ng-has-value .ng-placeholder {
        display: none;
    }
    .ng-select-container {
        background-color: $ng-select-bg;
        border-radius: $ng-select-border-radius;
        border: $ng-select-border-width solid $ng-select-border;
        min-height: $ng-select-height;
        align-items: center;
        cursor: pointer !important;

        &:hover {
            border-color: $ng-select-border-focus;
            background-color: tint($ng-select-border-focus, 95%);
        }

        .ng-value-container {
            line-height: 1.3;
            align-items: center;
            padding-left: $ng-select-value-padding-left;
            .ng-placeholder {
                color: $ng-select-placeholder;
            }
            input { @include fontSize($ng-select-value-font-size)}
        }
    }
    &.ng-select-single {
        .ng-select-container {
            height: $ng-select-height;
            .ng-value-container {
                .ng-input {
                    top: 5px;
                    left: 0;
                    padding-left: $ng-select-value-padding-left;
                    padding-right: 50px;
                }
            }
        }
    }
    &.ng-select-multiple {
        &.ng-select-disabled {
            > .ng-select-container .ng-value-container .ng-value {
                background-color: $ng-select-disabled-text;
                border: 1px solid lighten($ng-select-border, 10);
                .ng-value-label {
                    padding: 0 5px;
                }
            }
        }
        .ng-select-container {
            .ng-value-container {
                padding-left: 7px;

                /** .ng-value is the library's class name for the selected "chips" */
                .ng-value {
                    @include hc-chip();
                    @include hc-chip-neutral();
                    @include hc-chip-padding();
                    margin: 3px;
                    position: relative;
                    &.ng-value-disabled {
                        background-color: $ng-select-disabled-text;
                        .ng-value-label {
                            padding-left: 5px;
                        }
                    }
                    .ng-value-label {
                        max-width: 200px;
                        padding: 3px 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .ng-value-icon {
                        color: transparent;
                        position: relative;
                        top: 7px;
                        left: -7px;
                        @include hc-chip-close-icon();
                        @include hc-chip-close-icon-neutral();
                        opacity: 0.3;
                        &:hover {
                            opacity: 0.6;
                        }

                        &.right {
                            left: 7px;
                        }
                    }
                }
                .ng-input {
                    padding: 0 0 0 3px;
                }
                .ng-placeholder {
                    top: 7px;
                    padding-left: 3px;
                }
            }
        }
    }

    /** Button next to the dropdown arrow to clear out the input */
    .ng-clear-wrapper {
        .ng-clear {color: transparent; }
        &:after {
            content: '';
            display: block;
            opacity: 0.5;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAIAAAACtmMCAAAACXBIWXMAABJ0AAASdAHeZh94AAAF0WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTA0LTE3VDE0OjI5OjExLTA2OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA0LTE3VDE0OjI5OjExLTA2OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMC0wNC0xN1QxNDoyOToxMS0wNjowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphYWE5YTA5Zi1hYWNiLWM5NGEtODQxZC0xOGNjMmEwNGQ2OWUiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1NGNhMzI0OC0yNzc5LTBlNDctODIyMC03OTNlMjYwOGM2OWUiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3Zjg2MWU2YS1kNDU4LTcyNGYtYjAyMC01Yzc1MDhlZGFmYjUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3Zjg2MWU2YS1kNDU4LTcyNGYtYjAyMC01Yzc1MDhlZGFmYjUiIHN0RXZ0OndoZW49IjIwMjAtMDQtMTdUMTQ6Mjk6MTEtMDY6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YWFhOWEwOWYtYWFjYi1jOTRhLTg0MWQtMThjYzJhMDRkNjllIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE0OjI5OjExLTA2OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6blBAwAAAY1JREFUSInllUHL4yAQhnWRJqdcewtatIfiqb2F/HwpvdhLc2oGDPkJOSUSOntwkdD4tbtLWfjYOc0bXx/iOCpFRPLR+PFZ3H9LZC/GvPcA0Pf9MAzjOOZ5XhRFWZZSys1m89Us+tVeA4C1dpqm9VCWZafTSUr5B8Tr9do0zYvfJ4RorY/H4/p7oo4A8BZHCGmaBgDeE7331toopZS73S5KzvlysdZa7/0T4XlnACDWTkpZVRUiIqJzTghR1zWlNNgIIdM0AcDhcHhF7Ps+5vM8IyKltK7r7XarlKKUIuLj8Vj63xCHYYh513UBRynd7/eEEEQ0xjjnkv4Qz3Ucx3EpnXNt20bZtu0St/YniHmeL6UQQikVpVJKCPHCnyAWRRFzznlYMiLe7/dYU8550p8mlmUZc8ZYwBljLpeLMSZAGWNJ/69ZT1pKebvdQgOFFpnnues6QohzDhEZY7Gxsyxbn8XEKQSA8/lMfiOqqloTE6dQSqm1fovTWicvi39194T48P341/Ed3pnvQPwJwXHoP49ejAsAAAAASUVORK5CYII=');
            background-repeat: no-repeat;
            background-size: contain;
            box-sizing: border-box;
            height: 24px;
            width: 24px;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -12px;
        }
        &:hover:after {
            opacity: 0.8;
        }
    }
    .ng-spinner-zone {
        padding: 5px 5px 0 0;
    }
    .ng-arrow-wrapper {
        @include hc-select-chevron();
        pointer-events: auto;
        &:after {
            display: block;
            pointer-events: auto;
        }
    }

    .ng-select-container .ng-arrow-wrapper {
        height: 33px;
    }
}

ng-dropdown-panel.ng-dropdown-panel {
    background-color: $ng-select-bg;
    border: 1px solid $ng-select-border;
    box-shadow: 0 1px 0 $shadow;
    left: 0;
    z-index: $z-index-ng-select-dropdown;
    &.ng-select-bottom {
        top: 100%;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border-top-color: lighten($ng-select-border, 10);
        margin-top: 0;
        .ng-dropdown-panel-items {
            .ng-option {
                &:last-child {
                    border-bottom-right-radius: 4px;
                    border-bottom-left-radius: 4px;
                }
            }
        }
    }
    &.ng-select-top {
        bottom: 100%;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-color: lighten($ng-select-border, 10);
        margin-bottom: 0;
        .ng-dropdown-panel-items {
            .ng-option {
                &:first-child {
                    border-top-right-radius: 4px;
                    border-top-left-radius: 4px;
                }
            }
        }
    }
    .ng-dropdown-header {
        border-bottom: 1px solid $ng-select-border;
        padding: 5px 7px;
    }
    .ng-dropdown-footer {
        border-top: 1px solid $ng-select-border;
        padding: 5px 7px;
    }
    .ng-dropdown-panel-items {
        .ng-optgroup {
            user-select: none;
            padding: 8px 10px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.54);
            cursor: pointer;
            &.ng-option-disabled {
                cursor: default;
            }
            &.ng-option-marked {
                background-color: $ng-select-option-hover;
            }
            &.ng-option-selected, &.ng-option-selected.ng-option-marked {
                background-color: $ng-select-option-selected;
                color: $white;
            }
        }
        .ng-option {
            background-color: $ng-select-bg;
            color: rgba(0, 0, 0, .87);
            padding: 8px 10px;
            &.ng-option-selected, &.ng-option-selected.ng-option-marked {
                color: $white;
                background-color: $ng-select-option-selected;
            }
            &.ng-option-marked {
                background-color: $ng-select-option-hover;
                color: $ng-select-primary-text;
            }
            &.ng-option-disabled {
                color: lighten($ng-select-primary-text, 60);
            }
            &.ng-option-child {
                padding-left: 22px;
            }
            .ng-tag-label {
                font-size: 80%;
                font-weight: 400;
                padding-right: 5px;
            }
        }
    }
}