@import '../base/states';
@import '../animation/main';
@import '../popup/main';
@import './layout';

$dropdowns-background-color: lighten($base, 4%) !default;
$dropdowns-border-color: rgba(0, 0, 0, .08) !default;

$dropdowns-gradient: linear-gradient($base, darken($base, 2%)) !default;
$dropdowns-hover-gradient: linear-gradient(darken($hover-background, 1%), darken($hover-background, 2%)) !default;
$dropdowns-active-gradient: linear-gradient(darken($base, 2%), $base) !default;

$dropdowns-hover-border-color: rgba(0, 0, 0, .15) !default;

$dropdowns-focused-background-color: saturate($hover-background, 1%) !default;
$dropdowns-focused-border-color: $dropdowns-hover-border-color;
$dropdowns-focused-box-shadow: 0 0 0 2px darken($background, 6%) !default;

$dropdowns-invalid-background: $error !default;
$dropdowns-invalid-color: $selected-text-color !default;

@include exports('dropdowns/theme') {

.k-combobox,
.k-dropdown,
.k-dropdown-wrap {
    border-radius: $border-radius;
}

.k-dropdown-wrap {
    background-color: $dropdowns-background-color;
    background-image: $dropdowns-gradient;
    border-color: $dropdowns-border-color;

    &:hover {
        background-color: $hover-background;
        background-image: $dropdowns-hover-gradient;
        border-color: $dropdowns-hover-border-color;

        .k-select {
            background-color: $hover-background;
            background-image: $dropdowns-hover-gradient;
            border-color: $dropdowns-hover-border-color;
        }
    }

    &:focus,
    &.k-state-focused {
        border-color: $dropdowns-focused-border-color;
        box-shadow: $dropdowns-focused-box-shadow;
        outline: 0;
    }

    &.k-state-disabled:hover,
    &.k-state-disabled.k-state-focused {
        box-shadow: none;
        background-color: $dropdowns-background-color;
        background-position: 50% 50%;
        border-color: $dropdowns-border-color;
    }

    &.k-state-invalid {
        color: $dropdowns-invalid-color;
        background-color: $dropdowns-invalid-background;
        background-image: none;

        >.k-input {
            color: $dropdowns-invalid-color;
        }
    }

    .k-input {
        border-radius: $border-radius 0 0 $border-radius;
    }

    > .k-select {
        border-radius: 0 $border-radius $border-radius 0;
    }
}

.k-combobox {
    .k-dropdown-wrap.k-state-invalid {
        >.k-input {
            color: $normal-text-color;
        }

        .k-select {
            color: $dropdowns-invalid-color;
            background-color: $dropdowns-invalid-background;
            background-image: none;
        }
    }
}

.k-textbox {
    border-color: $dropdowns-border-color;
    border-radius: $border-radius;

    &:hover {
        border-color: $dropdowns-hover-border-color;
    }
}

.k-dropdown-wrap.k-state-border-down {
    border-radius: $border-radius $border-radius 0 0;
}
}