// @import "../core/core";
// @import "../atoms/divider";

@mixin dc-btn-dropdown {
    @include dc-cf;
    position: relative;
}

@mixin dc-btn-dropdown__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0;
    margin-left: 4px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    overflow: visible;
    vertical-align: middle;
}

@mixin dc-btn-dropdown__arrow--down {
    border-top: 5px dashed;
}

@mixin dc-btn-dropdown__arrow--up {
    border-bottom: 5px dashed;
}

@mixin dc-btn-dropdown__list {
    display: none;
    position: absolute;
    padding: $dc-space50 0;
    border-radius: $dc-radius100;
    background-color: $dc-white;
    box-shadow: 0 4px 8px rgba($dc-black, .2);
    z-index: 999;
    list-style-type: none;

    &::after {
        position: absolute;
        width: 0;
        height: 0;
        content: " ";
        pointer-events: none;
    }
}

@mixin dc-btn-dropdown__list--down {
    top: 100%;
    margin-top: 0;

    &::after {
        bottom: 100%;
        left: $dc-space150;
        margin-left: -8px;
        border: 8px solid transparent;
        border-bottom-color: $dc-white;
    }
}

@mixin dc-btn-dropdown__list--up {
    bottom: 100%;
    margin-bottom: $dc-space100;

    &::after {
        top: 100%;
        left: $dc-space150;
        margin-left: -8px;
        border: 8px solid transparent;
        border-top-color: $dc-white;
    }
}


@mixin dc-btn-dropdown__item {
    display: block;
    padding: 0 $dc-space100;
    line-height: $dc-space200;
    text-decoration: none;
    cursor: default;

    &:hover {
        background-color: $dc-gray70;
    }

    &:visited {
        color: $dc-gray10;
    }

    &:active {
        background-color: $dc-orange50;
        color: $dc-orange20;
    }

    &:focus {
        outline: none;
    }

    > * {
        cursor: default;
    }
}

@mixin dc-divider--btn-dropdown {
    height: 1px;
    margin: $dc-space50 0;
    background-color: $dc-gray60;
    overflow: hidden;
}

@mixin dc-btn-dropdown__item--disabled {
    cursor: not-allowed;
    opacity: .5;

    > * {
        pointer-events: none;
    }
}

@mixin dc-btn-dropdown__divider {
    @include dc-divider;
    height: 1px;
    margin: $dc-space50 0;
    background-color: $dc-gray60;
    overflow: hidden;
}

@mixin dc-dropdown-selectors {
    .dc-btn-dropdown {
        @include dc-btn-dropdown;
    }

    .dc-btn-dropdown__arrow {
        @include dc-btn-dropdown__arrow;
    }

    .dc-btn-dropdown__arrow--down {
        @include dc-btn-dropdown__arrow--down;
    }

    .dc-btn-dropdown__arrow--up {
        @include dc-btn-dropdown__arrow--up;
    }

    .dc-btn-dropdown__list {
        @include dc-btn-dropdown__list;
    }

    .dc-btn-dropdown__list--down {
        @include dc-btn-dropdown__list--down;
    }

    .dc-btn-dropdown__list--up {
        @include dc-btn-dropdown__list--up;
    }

    .dc-btn-dropdown__item {
        @include dc-btn-dropdown__item;
    }

    .dc-btn-dropdown__item--disabled {
        @include dc-btn-dropdown__item--disabled;
    }

    .dc-btn-dropdown__divider {
        @include dc-btn-dropdown__divider;
    }
}