.content {
    display: flex;
    align-items: center;
    cursor: pointer;
    column-gap: 8px;

    .arrow {
        font-size: 12px;
        transition: 0.3s;

        &.active {
            transform: rotate(180deg);
        }
    }
}

.overlay {
    z-index: 99;
    position: absolute;
    left: 50%;
    top: 100%;
    background-color: #fff;
    border-radius: 1px;
    box-shadow: 0 5px 29px 0 hsla(0, 0%, 64%, 0.2);
    transform: scaleY(0.8) translateX(-50%);
    transform-origin: 0 0;
    transition: 0.2s;
    opacity: 0;

    &.select {
        left: 0;
        right: 0;
        transform: scaleY(0.8);
        max-height: 300px;
        overflow-y: auto;

        &.open {
            transform: scaleY(1) !important;
        }

        .item {
            height: 60px;
            line-height: 60px;
            text-align: left;
            color: #aaa;
            font-size: 17px;

            &.active {
                color: #333;
                background-color: #fff3e6;
            }
        }
    }

    &.open {
        opacity: 1;
        transform: scaleY(1) translateX(-50%);
    }

    .item {
        padding: 0 14px;
        height: 38px;
        line-height: 38px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        transition: 0.3s;
        cursor: pointer;

        &:hover:not(.disabled, .active) {
            color: #333;
            background-color: #f5f5f5;
        }

        &.disabled {
            color: rgba(0, 0, 0, 0.25);
            cursor: not-allowed;
        }

        &.active {
            color: #333;
            background-color: #fff3e6;
        }
    }
}
