/* ======== icon-carousel Styles =========== */

.icon-carousel {
    background-image: url("../../assets/bg-hero-image.png");
    background-position: bottom left;
    background-size: cover;

    &.theme-blue {
        background-color: var(--lindal-blue);

        .header, .item-header, .paragraph {
            color: white;

            h2 {
                color: white;
            }
        }

        .slick-arrow {
            path {
                stroke: white;
            }

            &:hover {
                path{
                    color: var(--lindal-orange);
                }
            }
        }
    }

    .icon-image {
        margin-bottom: 35px;
    }
    .header {
        margin: 0 auto;
        padding-bottom: 45px;
        text-align: center;
        width: 85%;
    }
    .item-header {
        margin-bottom: 15px;
        transition-duration: 350ms;
    }

    .paragraph {
        transition-duration: 350ms;
    }

    a:hover .item-header,
    a:focus .item-header,
    a:hover .paragraph, 
    a:focus .paragraph {
        color: var(--lindal-orange-dark) !important;
    }
    .icons-container {
        display: flex;
        gap: 50px;
    }

    .button {
        margin-top: 15px;
        box-shadow: none;
    }
    .slick-slide {
        opacity: 1;
        transition-duration: 350ms;
    }
    .slick-arrow {
        z-index: 10;
        path {
            transition-duration: 350ms;
            stroke: var(--lindal-blue-alt);
        }
        &:hover {
            path {
                stroke: var(--lindal-orange-dark);
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .icon-carousel {
        .slide {
            padding: 0;

            > div {
                padding-right: 0;
            }
        }

        .slick-slide {
            padding: 0 12px 0 12px;

            /* previous slide - hidden */
            &:has(+ .slick-center) {
                opacity: 0;
            }

            /* next slide - translucid */
            &.slick-current + div,
            &.slick-current + div + div {
                opacity: 0.1;
                filter: grayscale();
            }
        }

        .slick-arrow {
            height: 45px;
            width: 23px;
            top: calc(50% + 40px);

            &.slick-prev {
                left: 14px;
            }

            &.slick-next {
                right: 14px;
            }
        }
    }
}

@media screen and (min-width: 768px) {
    .icon-carousel {
        .slick-slide {
            .slide {
                padding: 0 0 0 24%;
            }

            /* PREVIOUS */
            &:has(+ .slick-center) {
                opacity: 0.1;
                filter: grayscale();
            }

            /* TRANSLUCID 3TH SLIDE */
            /* This is for a carousel with 3 slides  */
            &.slick-current + div,
            &.slick-current + div + div {
                opacity: 0.1;
                filter: grayscale();
            }
        }

        .slick-slide {
            .slide {
                padding: 0 10% 0 10%;
            }
        }
    }
}
/* HIDE ARROW WHEN SPACE IS LIMITED */
@media screen and (min-width: 1440px) and (max-width: 1920px) {
    .icon-carousel {
        .slick-arrow {
            &.slick-prev {
                display: none !important;
            }
        }
    }
}

@media screen and (min-width: 1024px) {
    .icon-carousel {
        .slick-slide {
            .slide {
                padding: 0 0 0 24%;
            }

            /* TRANSLUCID 3TH SLIDE */
            /* This is for a carousel with 3 slides  */
            &.slick-current + div,
            &.slick-current + div + div {
                opacity: 0.1;
                filter: grayscale();
            }
        }
        .slick-arrow {
            height: 125px;
            width: 62px;

            &.slick-prev {
                left: -10%;
            }

            &.slick-next {
                right: 10%;
            }
        }
    }
}

@media screen and (min-width: 1440px) {
    .icon-carousel {
        padding-left: var(--lindal-desktop-left-padding);

        .header {
            position: relative;
            padding-bottom: 75px;
            width: 100%;
            margin: 0 auto 0 calc(var(--lindal-desktop-left-padding) / 2 * -1);
        }

        .icons-container {
        }
        .slick-slide {
            .slide {
                padding: 0 10% 0 10%;
            }

            /* RESET 2ND AND 3RD SLIDE */
            &.slick-current + div,
            &.slick-current + div + div {
                opacity: initial;
                filter: initial;
            }

            /* TRANSLUCID 4TH SLIDE */
            &.slick-current + div + div + div,
            &.slick-current + div + div + div + div {
                opacity: 0.1;
                filter: grayscale();
            }
        }
    }
}

/* ======== END icon-carousel Styles =========== */