@import './vars.less';

.jad-multi-cascader-panel-wrap {
    position: relative;
    box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.16), 0px 0px 2px 0px rgba(9, 30, 66, 0.2);
    height: 206px;
    display: flex;
    flex: 1 1 auto;
    max-width: 100%;

    .jad-cascader-panel-column {
        // flex: 1;
        flex: auto;
        overflow-y: auto;
        overflow-y: overlay;
        border-right: 1px solid @JG_BLACK_08_HSV;
        font-family: @default-font-family;
        font-size: 14px;
        font-variant: tabular-nums;
        color: @JG_BLACK_68_HSV;
        box-sizing: border-box;
        list-style: none;
        margin: 0;
        padding: 8px 0px;

        li {
            vertical-align: middle;
            height: 38px;
            position: relative;
            margin: 0;
            overflow: auto;
            overflow: overlay;
            list-style: none;
            white-space: nowrap;
            outline: 0;
            display: flex;
            align-items: center;
            cursor: pointer;

            >* {
                padding: 0 16px;
            }

            .icon-right-box {
                flex: 1;
                height: 100%;

                .icon-right {
                    font-size: 12px;
                    color: @JG_BLACK_20_HSV;
                    float: right;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            &.active {
                background-color: @primary-color-light-bgc-08;

                span {
                    color: @primary-color;
                }

                .icon-right {
                    color: @primary-color;
                }
            }

            &:hover {
                background: @neuter-gray-hover-04;
            }

            &:disabled {
                background: #fff;
                color: @JG_BLACK_32_HSV  !important;
                cursor: not-allowed;
            }
        }
    }
}


.jad-multi-cascader-select-search-drop {
    max-width: 100%;
    padding: 8px 0;
    font-size: 14px;
    color: @JG_BLACK_68_HSV;
    box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.16), 0px 0px 2px 0px rgba(9, 30, 66, 0.2);
    overflow-y: auto;
    overflow-y: overlay;
    max-height: 206px;

    .jad-multi-cascader-select-search-item {
        padding: 8px 16px;
        cursor: pointer;
        color: @JG_BLACK_68_HSV;
        position: relative;
        display: flex;
        justify-content: space-between;

        .icon-right {
            visibility: hidden;
        }

        &.item-selected {
            background: @primary-color-light-bgc-08;
            cursor: not-allowed;

            * {
                cursor: not-allowed !important;
            }

            .icon-right {
                color: @primary-color;
                visibility: visible;
            }
        }

        &.disabled {
            background: #fff;
            color: @JG_BLACK_32_HSV  !important;
        }

        &:hover {
            background: @neuter-gray-hover-04;

            .icon-right {
                visibility: visible;
            }
        }

    }

    .matched {
        color: @primary-color;
        visibility: visible;
    }
}

.jad-multi-cascader-card {
    flex: 1 1 auto;
    position: relative;

    .jad-multi-cascader-card-selected-wrap {
        line-height: 24px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 22px;

        .selections-title {
            width: 80px;
            height: 24px;
            font-weight: 500;
        }

        .selections-container {
            max-height: 100px;
            padding-right: 70px;
            overflow-x: auto;
            flex: 1;

            .selections-item {
                margin: 0 12px 6px 0;
                background: #fff;
                border: 1px solid rgba(0, 0, 0, 0.12);
                height: 24px;
                line-height: 24px;
                display: inline-block;
                padding-left: 15px;
                padding-right: 15px;
                color: rgba(0, 0, 0, 0.68);
                position: relative;

                i {
                    font-size: 0;
                    padding: 0;
                    cursor: pointer;
                    color: @JG_BLACK;
                }

                &:hover {
                    transition: .2s;
                    padding-left: 7px;
                    padding-right: 23px;

                    i {
                        font-size: 8px;
                        margin-left: 8px;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }

            a {
                margin-left: 12px;
                display: inline-block;
            }

            .selections-disabled {
                pointer-events: none;
                cursor: not-allowed;
                color: rgba(0, 0, 0, 0.32);
            }
        }
    }

    .jad-multi-cascader-card-quick-select-wrap {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;

        >span {
            &:first-child {
                width: 80px;
                font-weight: 500;
            }

            &.jad-multi-cascader-card-quick-selections {
                >label {
                    margin-right: 16px;
                }
            }
        }
    }

    .jad-multi-cascader-panel-wrap {
        box-shadow: none;
        // display: flex;
        // flex: 1 1 auto;
        border: 1px solid #E0E0E0;
        // position: relative;
        background-color: #fff;
    }
}

.jad-multi-cascader-card-search-drop-item {
    position: relative;
    display: flex;
    justify-content: space-between;

    .search-drop-matched {
        color: @primary-color;
        visibility: visible;
    }

    .icon-right {
        visibility: hidden;
    }

    &.selected {
        color: rgba(0, 0, 0, 0.68);
        background: @primary-color-light-bgc-08;
        cursor: not-allowed;

        * {
            cursor: not-allowed !important;
        }

        .icon-right {
            color: @primary-color;
            visibility: visible;
        }
    }

    &:hover {
        .icon-right {
            visibility: visible;
        }
    }
}