@import "./base/var";
@import "./mixins/index.scss";

@include c(cascader) {
    @include e(reference-input) {
        cursor: pointer;
        input {
            cursor: pointer;
        }
    }

    @include e(drop-down-inner) {
        position: relative;
        border: $--border-default;
        box-shadow: $--box-shadow-default;
        background-color: $--color-white;
    }

    @include e((empty, loading)) {
        text-align: center;
        min-width: $--cascader-panel-item-min-width;
        padding: 7px 16px;
        font-size: $--font-size-default;
        color: $--color-text-empty;
        vertical-align: middle;
        @include utils-ellipsis();
    }

    @include e(suffix-icon) {
        transition: all $--animation-time ease-in-out;
    }

    @include e(suffix-icon-open) {
        @include utils-rotate();
    }
}

@include c(cascader-panel) {
    height: 200px;
    line-height: normal;
    @include m(border) {
        display: inline-block;
        background-color: $--color-white;
        border: $--border-default;
        border-radius: $--border-radius-default;
    }
}

@include c(cascader-item) {
    height: 100%;
    vertical-align: top;
    display: inline-block;
    font-size: 0;
    @include utils-ellipsis();

    @include e(label) {
        height: 100%;
        font-size: $--font-size-default;
        display: inline-block;
        min-width: $--cascader-panel-item-min-width;
        vertical-align: top;
        padding: 5px 0;
        overflow: hidden;
        border-left: $--border-default;
    }
    @include e(label-inner) {
        padding: 8px 10px;
        padding-right: 30px;
        cursor: pointer;
        position: relative;
        &:not(&-disabled):hover {
            background-color: $--background-color-hover;
        }
    }
    @include e(label-match) {
        color: $--color-danger;
    }
    @include e(label-inner-selected) {
        color: $--color-primary;
        background-color: $--background-color-hover;
    }

    @include e(label-inner-disabled) {
        cursor: not-allowed;
        color: $--color-text-disabled;
        background-color: $--background-color-disabled;
    }

    @include e(label-expand-icon) {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        font-size: 14px;
    }
}
