/*
 * Block IH DATENBLATT Review
 */
:root {

    /* review box */
    --Product-Database-pdb-ratingBubble-fill: light-dark(#553366, #B88FCC);
    --Product-Database-pdb-ratingBubble-content: light-dark(#FFFFFF, #000000);
    --Product-Database-pdb-ratingStar-container: light-dark(var(--color-nextpit-nyx-800), var(--color-nextpit-nyx-300));
    --Product-Database-pdb-ratingStar-empty: light-dark(var(--color-nextpit-nyx-500), var(--color-toxic-tomato-50));
    --Product-Database-pdb-ratingStar-full: light-dark(var(--color-toxic-tomato-600), var(--color-toxic-tomato-500));
    --Product-Database-pdb-ratingStarDecimal-text: light-dark(var(--General-Text-core-text), var(--color-nextpit-eos));
    --Product-Database-pdb-ratingStarDecimal-container: light-dark(var(--color-toxic-tomato-800), var(--color-toxic-tomato-300));
    --Product-Database-pdb-reviewSummary-pro: light-dark(var(--color-awkward-aqua-600), var(--color-awkward-aqua-800));
    --Product-Database-pdb-reviewSummary-con: light-dark(var(--color-toxic-tomato-400), var(--color-toxic-tomato-700));
    --Product-Database-pdb-reviewConclusion: light-dark(var(--color-nextpit-nyx-500), var(--color-nextpit-nyx-900));
}

div.td_block_ih_pdb_review {
    .td-block-title-wrap {
        margin-bottom: 0.625rem;
    }
    .td_block_inner {
        display: flex;
        flex-direction: column;
        gap: 1.875rem;
    }
    .conclusion {
        p {
            color: var(--Product-Database-pdb-reviewConclusion);
            font: var(--font-conclusion);
            &:before {
                content: "„"
            }
            &:after {
                content: "“"
            }
        }
    }
    .clearfix {
        display: none;
    }
    .rating-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .percentage-bubble {
            width: 68px;
            height: 28px;
            background: url("/wp-content/themes/Newspaper-child/images/design/svg/rating_percentage_bubble.svg") no-repeat center;
            color: #FFFFFF;
            font-weight: 500;
            margin-right: 5px;
            font-size: 17px;
            line-height: 28px;
            text-align: right;
            padding-right: 19px;
        }
    }
    .procontra-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.875rem;

        .pro,
        .contra {
            display: flex;
            gap: 0.3125rem;
        }

        i {
            flex-shrink: 0;
            width: 2rem;
            height: 2rem;
        }

        ul {
            list-style: none;
            li {
                padding-left: 1.5625rem;
                &:before {
                    display: inline-block;
                    flex-shrink: 0;
                    width: 1.25rem;
                    text-align: right;
                    margin-right: 0.3125rem;
                    margin-left: -1.5625rem;
                }
            }
        }

        .pro {
            i {
                background-image: url("/wp-content/themes/charli/assets/images/icons/thumb-up.svg");
                @media (prefers-color-scheme: dark) {
                    :root:not(.light-theme):not(.dark-theme) & {
                        background-image: url("/wp-content/themes/charli/assets/images/icons/dark/thumb-up.svg");
                    }
                }
            }
            ul li:before {
                content: "+";
                color: var(--Product-Database-pdb-reviewSummary-pro);
            }
        }

        .contra {
            i {
                background-image: url("/wp-content/themes/charli/assets/images/icons/thumb-down.svg");
                @media (prefers-color-scheme: dark) {
                    :root:not(.light-theme):not(.dark-theme) & {
                        background-image: url("/wp-content/themes/charli/assets/images/icons/dark/thumb-down.svg");
                    }
                }
            }
            ul li:before {
                content: "-";
                color: var(--Product-Database-pdb-reviewSummary-con);
            }
        }

    }
    .btn {
        align-self: flex-end;
    }
}