$cascader-prefix-cls: #{$prefix-name}cascader;

.#{$cascader-prefix-cls} {
    
   
    &-selection {
        display: block;
        width: 100%;
        height: $input-height-base;
        line-height: $lineHeight;
        padding: $input-padding-vertical-base $input-padding-horizontal;
        font-size: $fontSize;
        border: 1px solid $input-border-color;
        border-radius: $borderRadius;
        color: $input-color;
        position: relative;
        cursor: pointer;
        transition: border .2s ease-in-out;
        background: white;
        user-select: none;

        &:hover {
            &:not(.#{$select-prefix-cls}-selection-disabled) {
                @include hover();
            }
        }

        &-focus {
            @include active();
        }

        &-disabled {
            cursor: not-allowed;
            background-color: $input-disabled-bg;
        }
    }

    &-placeholder {
        color: $disableColor;
    }

    &-selection-arrow {
        
        
        position: absolute;
        right: 8px;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 100%; 
        display: flex;
        align-items: center;
        &-inner{
            transition: transform .2s ease-in-out;
        }
    }
    &-active{
        transform: rotate(180deg);
    }
    &-inner{
        border: 1px solid #e8eaec;
        display: flex;
        background: white;
    }
    &-menu {
        display: inline-block;
        min-width: 100px;
        height: 180px;
        margin: 0;
        padding: 5px 0 !important;
        vertical-align: top;
        list-style: none;
        border-right: 1px solid #e8eaec;
        overflow: auto;

        &:last-child {
            border-right: none;
        }
        &-item{
            padding: 6px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            &-hover,&-active{
                background-color: #eee;
            }
            &-active{
                color: #2d9ff0;
            }
        }
    }
}