@use "../base/mixins";

section.flexi-block.block--testimonials-06 {

    padding-left: 0;
    padding-right: 0;

    .content {
        padding-left: var(--site-padding);
        padding-right: var(--site-padding);
        text-align: center;

        h1, h2, h3 {
            font-size: clamp(1.75rem, 2vw, 4rem);
            margin-bottom: clamp(30px, 4vw, 50px);
        }
    }

    .testimonial {
        text-align: center;

        .star-rating {
            list-style: none;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            gap: 2px;
            padding: 0;
            margin-bottom: 18px;

            .star {
                width: clamp(20px, 3vw, 30px);
                height: clamp(20px, 3vw, 30px);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FCD34D'%3E%3Cg%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z'/%3E%3C/g%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;

                /* stylelint-disable-next-line max-nesting-depth */
                &.half-filled {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FCD34D'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/%3E%3C/svg%3E");
                }

                /* stylelint-disable-next-line max-nesting-depth */
                &.filled {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FCD34D'%3E%3Cg%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z'/%3E%3C/g%3E%3C/svg%3E");
                }
            }
        }
    }

    @include mixins.min-width(m) {
        .container {
            max-width:  unset;
        }

        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .testimonial {
            max-width: 790px;
        }

        .content {
            max-width: var(--container-width);
            margin-left: auto;
            margin-right: auto;
            padding-left: var(--site-padding);
            padding-right: var(--site-padding);
        }
    }
}