@import "mixins/mixins";
@import "common/var";
@import "button";
@import "./popper";

@include b(dropdown) {
    display: inline-block;
    position: relative;
    color: $--color-text-regular;
    font-size: $--font-size-base;

    .el-button-group {
        display: block;
        .el-button {
            float: none;
        }
    }

    & .el-dropdown__caret-button {
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        border-left: none;

        &::before {
            $gap: 5px;

            content: "";
            position: absolute;
            display: block;
            width: 1px;
            top: $gap;
            bottom: $gap;
            left: 0;
            background: mix(white, transparent, 50%);
        }

        &:hover {
            &::before {
                top: 0;
                bottom: 0;
            }
        }

        & .el-dropdown__icon {
            padding-left: 0;
        }
    }
    @include e(icon) {
        font-size: 12px;
        margin: 0 3px;
    }

    .el-dropdown-selfdefine { // 自定义
        &:focus:active, &:focus:not(.focusing) {
            outline-width: 0;
        }
    }
}

@include b(dropdown-menu) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 10px 0;
    margin: 5px 0;
    background-color: $--color-white;
    border: 1px solid $--border-color-lighter;
    border-radius: $--border-radius-base;
    box-shadow: $--dropdown-menu-box-shadow;

    @include e(item) {
        list-style: none;
        line-height: 36px;
        padding: 0 20px;
        margin: 0;
        font-size: $--font-size-base;
        color: $--color-text-regular;
        cursor: pointer;
        outline: none;
        &:not(.is-disabled):hover, &:focus {
            background-color: $--dropdown-menuItem-hover-fill;
            color: $--dropdown-menuItem-hover-color;
        }

        @include m(divided) {
            $divided-offset: 6px;

            position: relative;
            margin-top: $divided-offset;
            border-top: 1px solid $--border-color-lighter;

            &:before {
                content: "";
                height: $divided-offset;
                display: block;
                margin: 0 -20px;
                background-color: $--color-white;
            }
        }

        @include when(disabled) {
            cursor: default;
            color: $--font-color-disabled-base;
            pointer-events: none;
        }
    }

    @include m(medium) {
        padding: 6px 0;

        @include e(item) {
            line-height: 30px;
            padding: 0 17px;
            font-size: 14px;

            &.el-dropdown-menu__item--divided {
                $divided-offset: 6px;
                margin-top: $divided-offset;

                &:before {
                    height: $divided-offset;
                    margin: 0 -17px;
                }
            }
        }
    }

    @include m(small) {
        padding: 6px 0;

        @include e(item) {
            line-height: 27px;
            padding: 0 15px;
            font-size: 13px;

            &.el-dropdown-menu__item--divided {
                $divided-offset: 4px;
                margin-top: $divided-offset;

                &:before {
                    height: $divided-offset;
                    margin: 0 -15px;
                }
            }
        }
    }

    @include m(mini) {
        padding: 3px 0;

        @include e(item) {
            line-height: 24px;
            padding: 0 10px;
            font-size: 12px;

            &.el-dropdown-menu__item--divided {
                $divided-offset: 3px;
                margin-top: $divided-offset;

                &:before {
                    height: $divided-offset;
                    margin: 0 -10px;
                }
            }
        }
    }
}

/* Vendor override styles ported from BriteCore-UI */

.el-dropdown {
    font-size: 1em;
}

.el-dropdown-menu {
    padding: .5em;
}

.el-dropdown-menu--wide {
    width: 20em;
}

.el-dropdown-link {
    cursor: pointer;

    // Center text (in a span) with icons
    display: flex;
    align-items: center;
}

.el-dropdown-menu__item {
    border-radius: $--border-radius-base;
    padding: .5em;
    line-height: 1;
    margin: .35em 0;
    transition: background-color 100ms ease-in, box-shadow 100ms ease-in;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

    &:hover {
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
        background-color: $color-gray--015 !important;
        color: $color-gray--080 !important;
    }
}

.el-dropdown-menu__item--active {
    background-color: $color-brand--055;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15);
    color: $color-white;

    &:hover {
        background-color: $color-brand--070 !important;
        color: $color-white !important;
    }
}

.el-dropdown-menu__item--divided {
    border-top: 0;
    margin-top: .9em !important;

    &:before {
        content: "";
        height: 1px;
        background: $color-gray--020;
        position: relative;
        top: -.9em;
        width: calc(100% + 1em);
        left: -.5em;
        margin: 0;
    }
}