/*
Product slider
==============================================
Styling for product slider component.
Displays product-boxes in a reusable slider component.
based on "base-slider" component and "tiny-slider" (https://github.com/ganlanyuan/tiny-slider)
*/

.product-slider {
    &.has-border {
        border: 1px solid $border-color;
        border-radius: $border-radius;
    }

    &.has-border {
        padding: 25px;
    }

    &.has-nav {
        padding-left: 20px;
        padding-right: 20px;
    }

    &.has-border.has-nav {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.product-slider-container {
    padding-bottom: 1px; // prevents border cut-off from tiny-slider
}

.product-slider-controls-prev,
.product-slider-controls-next {
    border: 0;
    background: none;

    &.is-arrow-prev-inside,
    &.is-arrow-next-inside {
        background: var(--bs-gray-200);
    }
}

.product-slider-controls-prev {
    left: -10px;

    &.has-border {
        left: 0;
    }

    &.is-arrow-prev-inside {
        left: 20px;

        &.has-border {
            left: 30px;
        }
    }
}

.product-slider-controls-next {
    right: -10px;

    &.has-border {
        right: 0;
    }

    &.is-arrow-next-inside {
        right: 20px;

        &.has-border {
            right: 30px;
        }
    }
}
