// Mixins with weird names to avoid overwrites

@mixin dk-pre($property, $value, $prefixes) {
    @each $prefix in $prefixes {
        -#{$prefix}-#{$property}: $value;
    }

    #{$property}: $value;
}

@mixin dk-bxsz($box) {
    @include dk-pre(box-sizing, $box, webkit moz);
}

@mixin dk-txtflow($text) {
    @include dk-pre(text-overflow, $text, o);
}

$dk-color-aux: $accentColor !default;
$dk-border-color: $borderColor !default;
$dk-border-color-aux: $accentColor !default;
$dk-border-radius: $borderRadius !default;
$dk-disabled-color: #BBBBBB !default;

.dk-select,
.dk-select *,
.dk-select *:before,
.dk-select *:after,
.dk-select-multi,
.dk-select-multi *,
.dk-select-multi *:before,
.dk-select-multi *:after {
    @include dk-bxsz(border-box);
}

.dk-select,
.dk-select-multi {
    position: relative;
    display: block;
    vertical-align: middle;
    cursor: pointer;
}

.dk-selected {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    background-color: $bgColor;
    border: $borderWidth solid $dk-border-color;
    border-radius: $dk-border-radius;
    padding: $buttonPadding;
    padding-right: 1.5em;
    line-height: $buttonHeight;
    @include dk-txtflow(ellipsis);

    &:before,
    &:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
    }

    &:before {
        top: 50%;
        border: solid transparent;
        border-width: 0.25em 0.25em 0;
        border-top-color: $baseColor;
        margin: -0.125em 0.5em 0 0;
    }

    &:after {
        top: 0;
        height: 100%;
        border-left: 1px solid $dk-border-color;
        margin: 0 1.5em 0 0;
    }
}

.dk-selected-disabled {
    color: $dk-disabled-color;
}

.dk-select .dk-select-options {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
}

.dk-select-open-up .dk-select-options {
    border-radius: $dk-border-radius $dk-border-radius 0 0;
    margin-bottom: -1px;
    bottom: 100%;
}

.dk-select-open-down .dk-select-options {
    border-radius: 0 0 $dk-border-radius $dk-border-radius;
    margin-top: -1px;
    top: 100%;
}

.dk-select-multi .dk-select-options {
    max-height: 10em;
}

.dk-select-options {
    background-color: $bgColor;
    border: 1px solid $dk-border-color;
    border-radius: $dk-border-radius;
    list-style: none;
    margin: 0;
    max-height: 75vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: auto;
    z-index: 100;
}

.dk-option-selected {}

.dk-select-options-highlight .dk-option-selected {
    background-color: transparent;
    color: inherit;
}

.dk-option {
    padding: $buttonPadding;
    line-height: $buttonHeight;
}

.dk-select-options .dk-option-highlight {
    background-color: $bgColorHover;
}

.dk-select-options .dk-option-disabled {
    color: $dk-disabled-color;
    background-color: transparent;
}

.dk-select-options .dk-option-hidden {
    display: none;
}

// .dk-optgroup {
//     border: solid $dk-border-color;
//     border-width: 1px 0;
//     margin-top: 0.25em;

//     + .dk-option {
//         margin-top: 0.25em;
//     }

//     + .dk-optgroup {
//         border-top-width: 0;
//         margin-top: 0;
//     }

//     &:nth-child(2) {
//         padding-top: 0;
//         border-top: none;
//         margin-top: 0;
//     }

//     &:last-child {
//         border-bottom-width: 0;
//         margin-bottom: 0;
//         padding-bottom: 0;
//     }
// }

// .dk-optgroup-disabled {
//     opacity: 0.6;
//     color: $dk-disabled-color;
//     cursor: not-allowed;
// }

// .dk-optgroup-label {
//     padding: 0 0.5em 0.25em;
//     font-weight: bold;
//     width: 100%;
// }

// .dk-optgroup-options {
//     list-style: none;
//     padding-left: 0;

//     li {
//         padding-left: 1.2em;
//     }
// }

// .dk-select-open-up .dk-selected {
//     border-top-left-radius: 0;
//     border-top-right-radius: 0;
//     border-color: $dk-border-color-aux;
// }

// .dk-select-open-down .dk-selected {
//     border-bottom-left-radius: 0;
//     border-bottom-right-radius: 0;
//     border-color: $dk-border-color-aux;
// }

// .dk-select-open-up .dk-selected:before,
// .dk-select-open-down .dk-selected:before {
//     border-width: 0 0.25em 0.25em;
//     border-bottom-color: $dk-border-color-aux;
// }

// .dk-select-open-up .dk-selected:after,
// .dk-select-open-down .dk-selected:after {
//     border-left-color: $dk-border-color-aux;
// }

.dk-select-open-up .dk-select-options,
.dk-select-open-down .dk-select-options,
.dk-select-multi:focus .dk-select-options {
    display: block;
    // border-color: $dk-border-color-aux;
}

// .dk-select-multi:hover,
// .dk-select-multi:focus {
//     outline: none;
// }

.dk-selected:hover,
.dk-selected:focus {
    outline: none;
    background: $bgColorHover;

    // &::after {
    // }
    // border-color: $dk-border-color-aux;

    // &:before {
    //     border-top-color: $dk-border-color-aux;
    // }

    // &:after {
    //     border-left-color: $dk-border-color-aux;
    // }
}

.dk-select-disabled {
    opacity: 0.6;
    color: $dk-disabled-color;
    cursor: not-allowed;

    .dk-selected {

        &:hover,
        &:focus {
            border-color: inherit;

            &:before {
                border-top-color: inherit;
            }

            &:after {
                border-left-color: inherit;
            }
        }
    }
}

select[data-dkcacheid] {
    display: none;
}