@charset "utf-8";
@import "./var";

.#{$prefix}cascader {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-color: $cascader-color-bg;
    border: 1px solid $cascader-color-border;
    border-radius: $cascader-border-radius;
    min-width: 200px;
    min-height: $form-height;
    padding: 0 26px 0 10px;
    cursor: pointer;
    color:$cascader-color-text;
    transition: .2s ease-in-out;
    transition-property: color, background-color, border;

    .#{$prefix}tag{
        // margin-top:($form-height - 20)/2;
        margin-top: 4px;
    }
    .#{$prefix}input--editor{
        position: relative;
        padding:0;
        height: 24px;
        line-height: 24px;
        width: 26px;
        top: ($form-height - 26)/2;
    }
}
.#{$prefix}cascader:hover{
    background-color: $cascader-color-bg-hover;
}
.#{$prefix}cascader__input .#{$prefix}input[readonly],
.#{$prefix}cascader__input .#{$prefix}input{
    background-color: transparent;
    border: 0;
    position: absolute;
    height: $form-height - 4;
    line-height: $form-height - 4;
    top: 1px;
    left: 1px;
    z-index: 1;
    right: 1px;
    cursor: pointer;
}

.#{$prefix}cascader__input .#{$prefix}input{
    // background-color:inherit;
    z-index: 2;
}
.#{$prefix}cascader__input .#{$prefix}input--editor{
    position: relative;
    padding:0;
    height: 24px;
    line-height: 24px;
    width: 26px;
    top: ($form-height - 26)/2;
}
.#{$prefix}cascader__value {
    line-height: $form-height - 2;
    font-size: $cascader-font-size;
    white-space: nowrap;
    overflow: hidden; 
    position: relative;   
    z-index: 2;
    .#{$prefix}tag-group{
        margin-top:0px;
        margin-bottom:4px;
        white-space: normal;
    }
}
.#{$prefix}cascader > .#{$prefix}icon,
.#{$prefix}cascader .#{$prefix}icon-arrowdown {
    position: absolute;
    z-index: 2;
    right: 4px;
    //top: 6px;
    top:($form-height - 16 - 2)/2;
}
.#{$prefix}cascader__label{
    height: auto;
    line-height: 20px;
    margin: ($form-height - 20)/2 4px 0px 0;
    display: inline-block;
}
.#{$prefix}cascader{
    &.is-disabled{
        background-color:$color-bg-disabled;
        cursor: not-allowed;
        .#{$prefix}cascader__value{
            color:$color-text-disabled;
        }
        .#{$prefix}cascader__input .#{$prefix}input{
            cursor: inherit;
        }

    }
    
}
.#{$prefix}cascader-menu{
    min-width: 198px;
    box-sizing: border-box;
}
.#{$prefix}cascader-menu .#{$prefix}tabs--bordered .#{$prefix}tabs__tab {
    font-size: $cascader-font-size;
}
.#{$prefix}cascader-menu__list{
    padding: 0 5px 0 15px;
    font-size: 0;
    width: 500px;
    margin-bottom: -10px;
    max-height: 280px;
    overflow-y: auto;
}
.#{$prefix}cascader-menu__list li{
    font-size:$cascader-font-size;
    line-height: 1.5;
    margin-bottom: 8px;
    display: inline-block;
    vertical-align: middle;
}
.#{$prefix}cascader-menu__col4 .#{$prefix}cascader-menu__list li{
    width: 116px;
}
.#{$prefix}cascader-menu__col2 .#{$prefix}cascader-menu__list li{
    width: 232px;
}
.#{$prefix}cascader-menu__col1 .#{$prefix}cascader-menu__list li{
    width: 100%;
}
.#{$prefix}cascader-menu__col1 .#{$prefix}cascader-menu__list{
    width: 350px;
}
.#{$prefix}cascader-menu__label{
    padding: 1px 5px;
    cursor: pointer;
    margin-right: 10px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.#{$prefix}cascader-menu__label:hover{
    background-color: $cascader-menu-li-color-bg-hover;
}
.#{$prefix}cascader-menu__label.is-selected{
    background-color:$cascader-menu-li-color-bg-selected;
    color: $color-text-anti-primary;
}

.#{$prefix}cascader-menu__label.is-disabled{
    color: $cascader-menu-li-color-text-disabled;
    &:hover{
        background-color: transparent;
        cursor: not-allowed;
    }
}
.#{$prefix}cascader--search{
    // padding-left: 0;

    .#{$prefix}input{
        border:none;
    }
    &:hover{
        .#{$prefix}input{
            // background-color: $color-bg-hover;
        }
    }
}
.#{$prefix}cascader-menu--thin{
    display: flex;
    min-width: 0;
    .#{$prefix}list{
        min-width: 100px;
        border-left: 1px solid $color-border-inner;
        &:first{
            border-left: none;
        }
        & > li{
            position: relative;
        }
        &__submenu{
            padding-right: 24px;
            &::after{
                top:50%;
                margin-top: -8px;
            }
        }
        &__submenu.is-selected::after{
            background-image: url(../../assets/image/slice/svg/right-arrow-icon.svg?fill=#fff);
        }
    }
}