@use "../base/mixins";


section.flexi-block.block--testimonials-03 {
    .testimonial {
        --padding-x-sm: 20px;
        --padding-y-sm: 20px;
        --padding-x-lg: 20px;
        --padding-y-lg: 20px;
        background: var(--c-secondary);
        padding: clamp(var(--padding-y-sm), 2vw, var(--padding-y-lg)) clamp(var(--padding-x-sm), 2vw, var(--padding-x-lg));
        background-color: var(--c-l-grey);

        &__content {
            margin-bottom: 0;
        }

        &__author {
            font-size: 1.375rem;
            display: inline-block;
            margin-bottom: 14px;
            font-family: var(--t-heading-font-family);
        }

        &__star-rating {
            margin-bottom: 14px;
        }
    }

    .testimonials-carousel {
        position: relative;
    }

    .read-more-toggle {
        margin-top: 29px;
        appearance: none;
        border: none;
        background: none;

        &::after {
            content: "...";
        }
    }

    .star-rating {
        list-style: none;
        max-width: fit-content;
        display: flex;
        gap: 2px;
        padding: 0;
        margin: 0;
    }

    .swiper-button-prev .swiper-navigation-icon {
        rotate: 180deg;
    }

    .star {
        width: 20px;
        height: 20px;
        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;
    }

    .star.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");
    }

    .star.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");
    }

    .swiper {
        position: relative;
    }

    .swiper-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        margin-top: 32px;
    }

    .swiper-pagination {
        display: flex;
        align-items: center;
        gap: 8px;
        position: static; // override swiper's default absolute positioning

        &-bullet {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ccc;
            opacity: 1;
            transition: width .3s ease, border-radius .3s ease, background .3s ease;

            &-active {
                background: var(--c-black);
            }
        }
    }

    .swiper-button-prev,
    .swiper-button-next {
        position: static; // override swiper's default absolute positioning
        margin: 0;
        width: 16px;
        height: 26px;
        border-radius: 50%;
        color: var(--c-black);
        display: flex;
        align-items: center;
        justify-content: center;


        .swiper-navigation-icon {
            width: 18px;
            height: 18px;
        }
    }

    @include mixins.min-width(1400) {
        .swiper-controls {
            margin-top: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -50px;
            right: 50px;
            width: calc(100% + 100px);
            justify-content: space-between;
        }
    }
}