@import '../../styles/_variables.scss';
@import '../../styles/_mixins.scss';
@import '../UIComboBox/_mixins.scss';

@mixin apply-dropdown-error-border($border) {
    .ms-Dropdown {
        &,
        &.is-open {
            &:after {
                border-color: $border;
            }
        }
    }
}

.ts-SelectBox {
    .ms-Dropdown {
        background: $dropdown-input-background;
        border-radius: $dropdown-input-border-radius;
        .ms-Dropdown-title {
            background: transparent;
            height: $dropdown-input-height;
            line-height: $dropdown-line-height;
            border: $dropdown-input-border-width solid transparent;
            padding: $dropdown-input-text-padding;
            border-radius: $dropdown-input-border-radius;
            @include base-font;
        }
        > .ms-Dropdown-caretDownWrapper {
            @include caretDown-icon;
            i {
                margin-top: -$dropdown-input-border-width;
            }
        }
        // Font color
        &,
        &:hover {
            .ms-Dropdown-title {
                color: $dropdown-input-color;
            }
        }
        .ms-Dropdown-titleIsPlaceHolder {
            color: $dropdown-input-placeholder-color;
        }
        &:after {
            pointer-events: none;
            content: '';
            position: absolute;
            box-sizing: border-box;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border: $dropdown-input-border;
            border-radius: $dropdown-input-border-radius;
        }
        &.is-open,
        &:focus,
        &:hover {
            &:after {
                border-color: $dropdown-input-focus-border-color;
            }
        }
        &:focus,
        &.is-open {
            &:after {
                border-style: solid;
            }
        }
    }
    &--readonly {
        .ms-Dropdown {
            &.is-disabled {
                @include input-readonly;
            }
        }
        // Empty and readonly field - disable hover efect
        &.ts-SelectBox--empty {
            .ms-Dropdown:hover:after {
                border-color: $dropdown-input-border-color;
            }
        }
    }
    &--disabled {
        .ms-Dropdown {
            &.is-disabled {
                @include input-disabled;
            }
        }
    }
    &--readonly,
    &--disabled {
        .ms-Dropdown:focus {
            &:after {
                border-style: solid;
                border-color: $dropdown-input-focus-border-color !important;
            }
        }
    }
    &--error {
        @include apply-dropdown-error-border(var(--vscode-inputValidation-errorBorder));
    }
    &--warning {
        @include apply-dropdown-error-border(var(--vscode-inputValidation-warningBorder));
    }
    &--info {
        @include apply-dropdown-error-border(var(--vscode-inputValidation-infoBorder));
    }
}

.ts-dropdown-item-blocker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}