@use "../common/utils" as *;
@use "../common/mixins" as *;

.testimonials-slider {
    overflow-x: hidden;
    position: relative;

    &__header {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin-bottom: calc-rem(30px);

        @include media-breakpoint-up(md) {
            flex-direction: row;
        }


        @include media-breakpoint-up(lg) {
            margin-bottom: calc-rem(50px);
        }


        .total-reviews {
            display: flex;
            align-items: center;
            gap: calc-rem(20px);
            flex-direction: row-reverse;
            justify-content: flex-end;

            @include media-breakpoint-up(md) {
                flex-direction: row;
                justify-content: flex-start;
                gap: calc-rem(30px);
            }

            .wrapper {
                display: flex;
                flex-direction: column;

                @include media-breakpoint-up(md) {
                    align-items: flex-end;

                }

                small {
                    font-size: calc-rem(12px);

                    a {
                        text-decoration: underline;
                    }
                }
            }

            .total {
                font-size: clamp-font(18px, 25px);
                background: rgba(var(--color-primary));
                width: calc-rem(50px);
                height: calc-rem(50px);
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(var(--color-white));
                border-radius: 100%;
                flex: none;

                @include media-breakpoint-up(lg) {
                    width: calc-rem(95px);
                    height: calc-rem(95px);
                }

            }
        }

    }

    &__slider {
        position: relative;


        .slider {

            @include media-breakpoint-up(lg) {
                overflow-x: hidden;
            }

            .swiper-slide{
                height: auto;

            }

        }

        .swiper-button {
            margin-top: calc-rem(30px);

            @include media-breakpoint-up(lg) {
                margin-top: 0;
                position: absolute;
                right: calc-rem(-15px);
                top: 50%;
                z-index: 2;
                width: calc-rem(35px);
                height: calc-rem(35px);
                transform: translateY(-50%);
            }

            &.prev {

                @include media-breakpoint-up(lg) {
                    right: unset;
                    left: calc-rem(-15px);
                }

                svg {
                    rotate: 180deg;
                }
            }
        }

    }
}
