@import "mixins/mixins";
@import "common/var";
@import "./checkbox";
@import "./radio";

@include b(cascader-panel) {
    display: flex;
    border-radius: $--cascader-menu-radius;
    font-size: $--cascader-menu-font-size;

    @include when(bordered) {
        border: $--cascader-menu-border;
        border-radius: $--cascader-menu-radius;
    }
}

@include b(cascader-menu) {
    min-width: 180px;
    box-sizing: border-box;
    color: $--cascader-menu-font-color;
    border-right: $--cascader-menu-border;

    &:last-child {
        border-right: none;
        .el-cascader-node {
            padding-right: 20px;
        }
    }

    @include e(wrap) {
        height: 204px;
        overflow: auto;
    }

    @include e(list) {
        position: relative;
        min-height: 100%;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        box-sizing: border-box;
    }

    @include e(hover-zone) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    @include e(empty-text) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: $--cascader-color-empty;
    }
}

@include b(cascader-node) {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 34px;
    line-height: 34px;
    outline: none;

    &.is-selectable.in-active-path {
        color: $--cascader-menu-font-color;
    }

    &.in-active-path,
    &.is-selectable.in-checked-path,
    &.is-active {
        color: $--cascader-menu-selected-font-color;
        font-weight: bold;
    }

    &:not(.is-disabled) {
        cursor: pointer;
        &:hover, &:focus {
            background: $--cascader-node-background-hover;
        }
    }

    @include when(disabled) {
        color: $--cascader-node-color-disabled;
        cursor: not-allowed;
    }

    @include e(prefix) {
        position: absolute;
        left: 10px;
    }

    @include e(postfix) {
        position: absolute;
        right: 10px;
    }

    @include e(icon) {
        padding-right: 4px;
    }

    @include e(label) {
        flex: 1;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    > .el-checkbox {
        margin-right: 0;
    }

    > .el-radio {
        margin-right: 0;

        .el-radio__label {
            padding-left: 0;
        }
    }
}

.el-cascader-node__right-icon {
    height: 100%;
    display: flex;
    align-items: center;
}