@use 'styles/settings.scss' as s;
@use 'styles/mixins.scss' as mx;

.project-slider {
    overflow: hidden;
    white-space: nowrap;
    padding: 30px 30px;
    margin: -30px -42px;
    position: relative;

    .prev-button, .next-button {
        display: flex;
        user-select: none;
        font-size: 2rem;
        cursor: pointer;
        position: absolute;
        opacity: 0.75;
        background-color: s.$background-light;
        width: 50px;
        height: 100px;
        border-radius: 25px;
        top: 50%;
        transform: translateY(-50%);
        justify-content: center;
        align-items: center;

        &.disabled {
            opacity: 0.1;
            cursor: auto;
        }
    }

    .prev-button {
        left: 10px;
    }

    .next-button {
        right: 10px;
    }

    .slide {
        display: inline-block;
        margin: 12px;
        width: calc(100% - 24px);
        user-select: none;
        -moz-user-select: none;
        transform: translateX(calc(var(--position) * (-100% - 24px)));

        @include mx.breakpoint(medium) {
            width: calc(50% - 24px);
        }

        @include mx.breakpoint(large) {
            width: calc(33.3% - 24px);
        }
    }

    @include mx.breakpoint(large) {
        padding: 30px 90px;
        margin: -30px -102px;

        .prev-button {
            left: 70px;
        }

        .next-button {
            right: 70px;
        }
    }
}