@import '../../common';
.rs-work-process-wrap {
    ul.list_content {
        display: flex;
        list-style: none;
        margin: 15px 0 0 0;
        display: flex;
        flex-direction: column;
        gap: 7px;
        li {
            display: flex;
            align-items: center;
            gap: 12px;
            i {
                font-size: 20px;
                color: $primaryColor;
            }
            svg {
                width: 20px;
                height: 20px;
                path {
                    fill: $primaryColor;
                }
            }
        }
    }
}
.rs-work-process-wrap-main {
    &.is_scrollable {
        position: relative;
        .rs-work-process-wrap {
            display: flex;
            flex-direction: column;
            gap: 40px;
            height: 600px;
            overflow-y: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
            &::-webkit-scrollbar {
                display: none;
            }
        }
        &:before,
        &::after {
            left: 0;
            right: 0;
            position: absolute;
            content: '';
            height: 100px;
            pointer-events: none;
            transition: $transition;
        }
        &:after {
            bottom: 0;
            background: linear-gradient(180deg, transparent 0%, #fff 100%);
        }
        &:before {
            top: 0;
            opacity: 0;
            background: linear-gradient(180deg, #fff 0%, transparent 100%);
        }
        &.anti {
            &::after {
                opacity: 0;
            }
            &:before {
                opacity: 1;
            }
        }
        &:hover {
            &:before,
            &::after {
                opacity: 0;
            }
        }
    }
}
.rs-work-process-scroll-btn {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .btn-inner {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: $primaryColor;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: $transition;
        cursor: pointer;
        i {
            font-size: 20px;
            color: #fff;
            transition: $transition;
        }
        svg {
            width: 20px;
            height: 20px;
            path {
                fill: #fff;
                transition: $transition;
            }
        }
        &.anti {
            transform: scaleY(-1);
        }
    }
}