@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './mixin';

@cascader-prefix-cls: ~'@{acud-prefix}-cascader';

.@{cascader-prefix-cls} {
    .reset-component();

    &-input.@{acud-prefix}-input {
        position: static;
        width: 100%;
        padding-right: 8 * @P;
        height: 30px;
        line-height: 30px;
        border: none;

        &,
        & > input {
            cursor: pointer;
            background-color: transparent;
        }

        &:hover {
            background-color: transparent;
        }

        &[disabled],
        &[aria-disabled="true"] {
            &,
            &:hover,
            &:focus,
            &:active {
                background-color: transparent;
            }
        }
    }

    // &-picker-show-search &-input.@{acud-prefix}-input {
    //     position: relative;
    // }

    &-picker {
        .reset-component();
        .cascader-picker();
        .basic-config(@cascader-picker-tp, @cascader-picker-p);

        &-with-input-value &-label {
            color: transparent;
        }

        &:focus,
        &-focused,
        &-expand {
            .@{cascader-prefix-cls}-input.@{acud-prefix}-input {
                border-color: @p5-hover-border-color;
            }
        }

        &-focused {
            .property-setting(@cascader-picker-p, 'hover', border-color);
        }

        &-disabled {
            cursor: not-allowed;

            .@{cascader-prefix-cls}-input.@{acud-prefix}-input {
                &,
                & > input {
                    cursor: not-allowed;
                }
            }
        }

        &-borderless .@{cascader-prefix-cls}-input {
            border-color: transparent !important;
            box-shadow: none !important;
        }

        // &-show-search&-focused {
        //     // color: @disabled-color;
        // }

        &-label {
            .basic-tp-config(tp6);

            &[disabled],
            &[aria-disabled="true"] {
                &,
                &:hover,
                &:focus,
                &:active {
                    color: @G4;
                }
            }
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 20px;
            margin-top: -10px;
            padding: 0 11 * @P 0 3 * @P;
            overflow: hidden;
            line-height: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &-clear {
            position: absolute;
            top: 50%;
            right: 7.5 * @P;
            margin-top: -2 * @P;
        }

        // arrow
        &-arrow {
            &.@{iconfont-css-prefix} {
                .basic-tp-config(tp7);
            }
            position: absolute;
            top: 50%;
            right: @padding-m;
            width: 4 * @P;
            height: 4 * @P;
            margin-top: -2 * @P;
            font-size: @T2;
            line-height: 4 * @P;
            transition: transform .48s;

            &-expand {
                transform: rotate(180deg);
            }

            & > svg {
                width: 4 * @P;
                height: 4 * @P;
            }
        }

        &-multi {
            .@{cascader-prefix-cls}-tags {
                position: relative;
                display: flex;
                padding: 1px 12 * @P 1px @P;
                flex: auto;
                flex-wrap: wrap;
                max-width: 100%;
                max-height: 60px;
                overflow-y: auto;

                .@{cascader-prefix-cls}-input-wrap {
                    position: relative;
                    max-width: 100%;

                    .@{cascader-prefix-cls}-input,
                    .@{cascader-prefix-cls}-mirror {
                        padding: 0 0 0 2 * @P;
                    }

                    .@{cascader-prefix-cls}-input {
                        margin: 2px 0;
                        width: 100%;
                        min-width: 4.1px;
                        height: 6 * @P;
                        line-height: 6 * @P;

                        & > input {
                            height: 6 * @P;
                            line-height: 6 * @P;
                            padding: 0;
                        }
                    }

                    .@{cascader-prefix-cls}-mirror {
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 999;
                        white-space: pre;
                        visibility: hidden;
                        line-height: initial;
                    }
                }

                .@{cascader-prefix-cls}-tag-wrap {
                    flex: none;
                    align-self: center;
                    max-width: 100%;

                    .@{cascader-prefix-cls}-tag {
                        margin: 2px @P 2px 0;
                        padding: 0 8px;
                        vertical-align: middle;

                        &[disabled],
                        &[aria-disabled="true"] {
                            &,
                            &:hover,
                            &:focus,
                            &:active {
                                color: @G4;
                                background-color: @G8;
                            }

                            .@{acud-prefix}-tag-close-icon {
                                color: @G6;
                            }
                        }

                        &-mixed {
                            .@{acud-prefix}-tag-render-container > span:first-child {
                                max-width: 96px; // 12px * 8字符
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }

                        .@{acud-prefix}-tag-close-icon {
                            margin-left: 2 * @P;

                            & > svg {
                                width: 1em;
                            }
                        }
                    }

                    &:first-of-type {
                        .@{cascader-prefix-cls}-tag {
                            margin-top: 3px;
                        }
                    }

                    & + .@{cascader-prefix-cls}-input-wrap {
                        .@{cascader-prefix-cls}-input,
                        .@{cascader-prefix-cls}-mirror {
                            padding: 1px;
                        }
                    }
                }
            }
        }
    }

    &-picker-lg > &-input.@{acud-prefix}-input {
        height: @cascader-picker-height-lg;
    }

    &-menus {
        position: absolute;
        z-index: @cascader-menus-z-index;
        white-space: nowrap;

        ul,
        ol {
            margin: 0;
            list-style: none;
        }

        &-empty,
        &-hidden {
            display: none;
        }

        .@{acud-prefix}-empty {
            .reset-component();
            line-height: @cascader-menu-item-height;
        }

        &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
        &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
            animation-name: acudSlideUpIn;
        }

        &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
        &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
            animation-name: acudSlideDownIn;
        }

        &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
            animation-name: acudSlideUpOut;
        }

        &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
            animation-name: acudSlideDownOut;
        }
    }

    &-menu {
        .property-setting(@cascader-menu-item-p, 'default', background-color);
        position: absolute;
        display: inline-block;
        min-width: @cascader-menu-min-width;
        max-width: @cascader-menu-max-width;
        margin: 0;
        padding: @P 0;
        max-height: @cascader-menu-max-height;
        font-size: @cascader-menus-font-size;
        overflow-y: auto;
        vertical-align: top;
        list-style: none;
        box-shadow: @shadow-1;
        border-radius: @R3;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        // transition: top .48s;

        &:first-child {
            position: relative;
        }

        &-multi {
            min-width: @cascader-menu-multi-min-width;
            max-width: @cascader-menu-multi-max-width;
        }

        &-empty &-item-multi-check-all,
        &-empty &-item-content &-item-checkbox .@{acud-prefix}-checkbox {
            display: none;
        }

        &-search:not(&-empty) {
            .@{cascader-prefix-cls}-menu {
                &-item:first-child {
                    .property-setting(@cascader-menu-item-p, 'hover', background-color);
                }
            }
        }

        &-sm {
            border-radius: @R2;
        }
    }

    &-menu-wrap-hidden {
        opacity: 0;
    }

    &-menu&-submenu {
        position: absolute;
        left: 100%;
        top: -@P;
        margin-left: 1px;
    }

    &-menu-item {
        .basic-config(@cascader-menu-item-tp, @cascader-menu-item-p);

        display: flex;
        justify-content: space-between;
        padding: 0 3 * @P;
        height: @cascader-menu-item-height;
        line-height: @cascader-menu-item-height;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: all .3s;

        &-content {
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &-checkbox.@{acud-prefix}-checkbox-wrapper {
            vertical-align: middle;
            margin-right: 2 * @P;
            overflow: hidden;
            text-overflow: ellipsis;

            .@{acud-prefix}-checkbox {
                top: 0;

                & + span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        &-label {
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }

        &-disabled {
            cursor: not-allowed;

            &:hover {
                background: transparent;
            }
        }

        .@{cascader-prefix-cls}-menu-empty & {
            cursor: default;
            pointer-events: none;
        }

        &-hovered {
            .property-setting(@cascader-menu-item-p, 'hover', background-color);
        }

        &-active:not(&-disabled) {
            color: @B6;
        }

        &-expand {
            position: relative;
            padding-right: 2 * @P;
        }

        &-expand &-expand-icon,
        &-loading-icon {
            .basic-tp-config(tp7);
        }

        & &-keyword {
            color: @B6;
        }
    }

    &-tag-tooltip,
    &-picker-label-tooltip,
    &-menu-item-tooltip {
        &.@{acud-prefix}-tooltip {
            max-width: initial;
        }
    }

    &-tag-tooltip-label-item:not(:first-child) {
        margin-top: 8px;
    }
}

// @import './rtl';