[digilab-block-customer-reviews] {
    .checkbox-list-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;

        .checkbox-list {
            background-color: #f3434330;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-radius: .5rem;
            border :1px solid #EFEFEF;
            transition: background-color ease-in-out .3s;

            &:hover {
                background-color: transparent;
            }

            .checkbox-list-label {
                font-size: .9rem;
                padding: .5rem 1rem;
                margin: auto;
                white-space: nowrap;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
            }

            [type="checkbox"] {
                display: none;
            }
        }

        .checkbox-list:has([type="checkbox"]:checked) {
            background-color:#43f36130;
        }
    }

    .form-group {
        gap:.5rem;
    }
}

.digilab-review-thumb-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;

    @media screen and (min-width: 993px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.digilab-review-thumb {
    display: grid;
    grid-template-areas:
'avatar author'
'avatar date'
'avatar agency'
'rating rating'
'title title'
'review review';
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto auto 1fr;

    gap: .5rem 1rem;
    width:-webkit-fill-available;
    max-width: 100%;
    background-color: #EFEFEF;
    padding: 1rem;
    border-radius: .5rem;

    @media screen and (min-width: 993px) {
        gap:1rem;
    }

    --avatar-bg-color: #1ABC9C;

    &:nth-child(5n+1) {
        --avatar-bg-color:#FF5733;
    }

    &:nth-child(5n+2) {
        --avatar-bg-color:#33FF57;
    }

    &:nth-child(5n+3) {
        --avatar-bg-color: #3357FF;
    }

    &:nth-child(5n+4) {
        --avatar-bg-color: #F1C40F;
    }

    &:nth-child(5n+4) {
        --avatar-bg-color: #8E44AD;
    }
}

.digilab-review-thumb__avatar-wrapper {
    grid-area: avatar;
}

.digilab-review-thumb__avatar {
    max-width: 5rem;
}

.digilab-review-thumb__avatar--default {
    display: grid;
    place-items: center;
    border-radius: .8rem;
    color: white;
    font-size: 2rem;
    font-weight: 600;
    aspect-ratio: 1;
    background-color: blueviolet;
    background-color: var(--avatar-bg-color);
    width: 5rem;
}

.digilab-review-thumb__author {
    grid-area: author;
    place-self: end;
    font-size: 0.8rem;
    font-style: italic;
}

.digilab-review-thumb__date {
    grid-area: date;
    place-self: end;
    font-size: 0.8rem;
    font-style: italic;
}

.digilab-review-thumb__agency {
    grid-area: agency;
    font-size: 0.9rem;
    text-align: right;
    font-weight: bold;
}

.digilab-review-thumb__rating {
    grid-area: rating;
    place-self: start;

    --rating-star-gap:.1rem;
    --rating-star-font-size:1.2rem;
    --rating-star-empty-color: rgba(0, 0, 0, 0.1);
    --rating-star-color: yellow;

    .review-rating {
        display: grid;
        grid-template-areas: 'stars number';
        gap: .5rem;
    }

    .review-rating:has(.review-rating__percentage)
    {
        grid-template-areas: 'percentage stars number';
    }

    .review-rating__star-wrapper {
        position: relative;
        grid-area: stars;
    }

    .review-rating_star--empty {
        display: flex;
        gap: var(--rating-star-gap);

        .empty-star {
            font-size: var(--rating-star-font-size);
            color: var(--rating-star-empty-color);
        }
    }

    .review-rating-star {
        position: absolute;
        inset: 0 auto 0 0;
        display: flex;
        gap: var(--rating-star-gap);
        overflow: hidden;

        font-size: var(--rating-star-font-size);
        color: var(--rating-star-color);
    }

    .review-rating__number {
        grid-area: number;
        font-size: .8rem;
        white-space: nowrap;
    }

    .review-rating__percentage {
        grid-area: percentage;
        font-size: .9rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .review-rating__count {
        font-size: .8rem;
        white-space: nowrap;
    }

    &.rating-display {
        display:flex;
        gap: 1rem;
    }
}

.digilab-review-thumb__title {
    grid-area: title;
    font-weight: bold;
    place-content:start;
    font-size: 1.25rem;
}

.digilab-review-thumb__content {
    grid-area: review;
    line-height:1.6;
    place-content:start;
}

.digilab-review-thumb-slider {
    --swiper-navigation-size: 2rem;
    --swiper-navigation-color: var(--primary-color, darkgrey);
    --swiper-pagination-bullet-size: var(--primary-color, .625rem);
    --swiper-pagination-color: var(--primary-color, darkgrey);
    max-width: 100%;

    .swiper-wrapper {
        display: grid;
        grid-auto-flow: column;
        margin-bottom: 1rem;

        .digilab-review-thumb {
            height: 100%;
        }
    }

    .swiper__navigation {
        padding: 2rem;
    }
}

.digilab-review-thumb-slider:has(.swiper-pagination) {
    padding: 0 0 3rem;
}

.digilab-review-pagination {
    display: grid;
    grid-template-areas: 'prev next';
    gap: 1.5rem;
    padding: 2.5rem 0;

    --review-pagination-bg-color: #CCC;
    --review-pagination-color: #000;
    --review-pagination-border: none;
    --review-pagination-radius: 0;
    --review-pagination-active-bg-color: #FFF;
    --review-pagination-active-color: #000;
    --review-pagination-active-border: .1rem solid var(--review-pagination-bg-color);
    --review-pagination-active-radius: 0;

    @media screen and (min-width: 993px) {
        grid-template-areas: 'prev pages next';
    }
}

.digilab-review-pagination__link--wrapper {
    grid-area: pages;
    display: none;

    @media screen and (min-width: 993px) {
        display: flex;
        gap:1rem;
        justify-content: center;
        align-items: center;
    }
}

.digilab-review-pagination__link {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--review-pagination-color);
    background-color: var(--review-pagination-bg-color);
    border: var(--review-pagination-border);
    border-radius: var(--review-pagination-radius);
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    transition: width ease-in-out .2s, height ease-in-out .2s;
}

.digilab-review-pagination__link.prev, .digilab-review-pagination__link.next {
    place-self:center;
}

.digilab-review-pagination__link.current {
    background-color: white;
    width: 3.3rem;
    height: 3.3rem;
    color: var(--review-pagination-active-color);
    background-color: var(--review-pagination-active-bg-color);
    border: var(--review-pagination-active-border);
    border-radius: var(--review-pagination-active-radius);
    pointer-events: none;
}

.digilab-review-pagination__link.separator {
    pointer-events: none;
}

.digilab-review-pagination__link:hover {
    width: 3rem;
    height: 3rem;
}

.digilab-review-pagination__link.prev {
    grid-area: prev;
}

.digilab-review-pagination__link.next {
    grid-area: next;
}

.digilab-review-widget {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    --review-widget-header-bg-color: orange;

    .swiper-wrapper {
        display: grid;
        grid-auto-flow: column;
        margin-bottom: 1rem;

        .digilab-review-thumb {
            height: 100%;
        }
    }
}

.digilab-review-widget-header {
    background-color: var(--review-widget-header-bg-color);
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.digilab-review-widget-provider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: .5rem;

    @media screen and (min-width: 993px) {
        display: grid;
        gap: 1rem;
        grid-template-areas:
        'logo cta'
        'rating cta';
        justify-content: inherit;
    }
}

.digilab-review-widget-provider-logo {
    grid-area: logo;

    .provider-name {
        font-size: 1.8rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.7);
    }
}

.digilab-review-widget-provider-logo:has(.provider-logo) {
    max-width: 10rem;
    width: 100%;
}

.digilab-review-widget-provider-link-wrapper {
    grid-area: cta;
    place-self: center end;
}

.digilab-review-widget-provider-link {
    background-color: white;
    color:black;
    border-radius: 5rem;
    padding: 1rem;
    white-space: nowrap;
}