.dy-select-wrapper {
    display: inline-block;

    .dy-input-wrapper .dy-input__inner {
        .input-icon {
            font-size: 18px;
            cursor: pointer;
        }
    }

    input:focus {
        border-color: #dcdfe6;
        outline: none;
    }

    .input-foucs {
        outline: auto;
        outline-width: 1px;
        outline-color: #397af2;
    }

    .select-input {
        position: relative;
        display: inline-block;

        .dy-icon-dropdown::before {
            line-height: 1;
            transform: rotate(0deg);
            transition: .3s all ease;
        }

        .dy-icon-circle_delete {
            position: absolute;
            top: 50%;
            right: 12px;
            display: none;
            color: #606266;
            transform: translateY(-50%);
            cursor: pointer;
        }

        &:hover {
            .dy-icon-circle_delete {
                display: block;
            }
        }
    }

    .select-input--open {
        .dy-icon-dropdown::before {
            display: inline-block;
            transform: rotate(180deg);
            transition: .3s all ease;
        }
    }
}

.dy-select-wrapper--disabled {
    border-radius: 4px;
    background: #dcdfe6;
    cursor: not-allowed;

    .dy-input-wrapper .dy-input__inner {
        .input-icon {
            font-size: 18px;
            cursor: not-allowed;
        }
    }
}

.dy-select-wrapper-menu {
    box-sizing: border-box;
    width: 180px;
    font-size: 14px;
    color: #606266;

    .menu-list {
        min-height: 80px;
        max-height: 200px;
        padding: 5px 0;
        margin: 0;
        overflow: auto;

        .menu-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style: none;
            box-sizing: border-box;
            width: 100%;
            padding: 0 20px;
            margin: 8px 0;
            line-height: 1.5;
            cursor: pointer;

            .menu-item-slot {
                position: absolute;
                left: 100%;
                display: none;
            }

            &:hover {
                background: #f5f7fa;

                .menu-item-slot {
                    display: block;
                }
            }

            .single-item {
                width: 100%;
                padding: 0 20px;
            }

            .multiple-item {
                width: 100%;
            }
        }

        .empty-item {
            height: 150px;
        }

        .is-selected {
            color: #397af2;
        }

        .menu-label {
            display: flex;
            align-items: center;
        }

        .select-box {
            margin-right: 10px;
        }

        .menu-empty {
            padding: 0 20px;
        }
    }

    .multiple-button {
        padding: 10px;
        text-align: center;
    }
}

.dy-pull-out-child--top {
    .menu-arrow {
        top: initial;
        transform: rotate(180deg);
    }

    .menu-arrow-in {
        bottom: -13px;
    }

    .menu-arrow-out {
        bottom: -12px;
    }
}