@import "../variables";

.slider-wrap {
    position: relative;
}

.slider-content {
    @include breakpoint-up('lg') {
        padding: 0 5rem;
    }
}

.slider-nav {
    margin-top: 4rem;

    @include breakpoint-up('lg') {
        margin-top: 5.7rem;
    }

    &__item {
        max-width: calc(100% - 3rem);
        margin: 0 1.5rem;
        cursor: pointer;

        @include breakpoint-down('lg') {
            max-width: calc(100% - 2rem);
            margin: 0 1rem;
        }
    }

    &__item-marker {
        height: 0.5rem;
        background-color: var(--current-slide-marker-color, var(--color-line));
        transition: background-color .25s;
    }

    .slick-track {
        display: flex;
        justify-content: center;
        transform: none !important; // smoother view

        &:before,
        &:after {
            display: none; // we dont need it
        }

        // Current element
        .slick-current {
            --current-slide-marker-color: var(--color-highlight); //  &__item-marker
            --current-slide-text-color: var(--color-text-primary); // &__item-name
        }
    }
}

.slider-arrow {
    --arrow-offset-x: var(--container-padding);

    position: absolute;
    top: var(--arrow-offset-y);
    cursor: pointer;

    @include breakpoint-down('lg') {
        display: none;
    }

    @include breakpoint-up('lg') {
        --arrow-offset-y: 50%;
    }

    &.as-prev-btn {
        left: var(--arrow-offset-x);
        transform: translateY(-50%);
    }

    &.as-next-btn {
        right: var(--arrow-offset-x);
        transform: translateY(-50%);
    }
}