/*
 * Copyright © Steris. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Presentation for the Steris product carousel slider. The core slick layout comes
 * from Magento_PageBuilder's slick.css; this adds gutters, arrows and dots so the
 * slider looks complete without depending on Page Builder's own LESS.
 */
.steris-product-carousel {
    position: relative;
}

.steris-product-carousel .block-title {
    margin-bottom: 15px;
}

.steris-product-carousel .product-items.widget-product-carousel {
    margin: 0;
    padding: 0;
    list-style: none;
}

.steris-product-carousel .slick-track {
    display: flex;
    align-items: stretch;
}

.steris-product-carousel .slick-slide {
    height: auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.steris-product-carousel .slick-slide > .product-item,
.steris-product-carousel .product-items.widget-product-carousel .product-item {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}

/* Arrows */
.steris-product-carousel .slick-prev,
.steris-product-carousel .slick-next {
    position: absolute;
    top: 40%;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}

.steris-product-carousel .slick-prev {
    left: -8px;
}

.steris-product-carousel .slick-next {
    right: -8px;
}

.steris-product-carousel .slick-prev::before,
.steris-product-carousel .slick-next::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #333333;
    border-right: 2px solid #333333;
}

.steris-product-carousel .slick-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.steris-product-carousel .slick-next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

.steris-product-carousel .slick-prev.slick-disabled,
.steris-product-carousel .slick-next.slick-disabled {
    opacity: 0.4;
    cursor: default;
}

/* Dots */
.steris-product-carousel .slick-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.steris-product-carousel .slick-dots li {
    margin: 0;
}

.steris-product-carousel .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cccccc;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}

.steris-product-carousel .slick-dots li.slick-active button {
    background: #333333;
}