.vehicle-select-attributes {
    height: 100vh;

    .select-car-form {
        background: $white;
        height: 100%;

        form {
            height: calc(100% - 230px);
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .car_list, .current_car_info-text, .needed_car_info-text {
            flex-shrink: 0;
            width: 100%;
            position: relative;
            transition: transform .3s;
        }
    }

    .current_car_info {
        position: relative;
        min-height: 2.5rem;

        .current_car_info-text {
            position: absolute;
        }
    }
}

.slide-enter-from {
    opacity: 0;
    transform: translateX(30vw);
}
.slide-enter-active, .slide-leave-active {
    transition: all .4s;
}
.slide-leave-to {
    opacity: 0;
    transform: translateX(-30vw);
}

.slide_reverse-enter-from {
    opacity: 0;
    transform: translateX(-30vw);
}
.slide_reverse-enter-active, .slide_reverse-leave-active {
    transition: all .4s;
}
.slide_reverse-leave-to {
    opacity: 0;
    transform: translateX(30vw);
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}
.fade-enter-active, .fade-leave-active {
    transition: all .5s ease;
}