@import "../../../scss/foundation/mixin/_media.scss";
// .swell-block-review{}

.swell-block-review__inner {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
    padding: 1.5rem;
    color: #000;
    background-color: #fff;
    border-top: solid 2px #000;
    border-radius: 0 0 4px 4px;
    box-shadow: var(--swl-box_shadow);

    @include mobile {
        padding: 1.5rem 1rem;
    }

    > :last-child {
        margin-bottom: 0 !important;
    }

}

.swell-block-review__image {
    display: block;
    max-width: 72%;
    margin: 0 auto 1.5rem;

    .__img {
        display: block;
        margin: 0 auto;
    }
}

.swell-block-review__title {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.1em;
}

.swell-block-review__rating {
    margin-bottom: 1.5rem;
    text-align: center;

    .__label {
        display: inline-flex;
        margin: 0 auto .5rem;
        padding: .5em;
        color: #fff;
        line-height: 1;
        background: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, .1) 25%, rgba(255, 255, 255, .1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, .1) 75%, rgba(255, 255, 255, .1));
        background-color: #111;
        background-size: 6px 6px;
        border-radius: 1px;
    }

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

    .__str {
        margin-right: -.5em;
        margin-left: .5em;
        color: #454545;
        font-size: .75em;
    }

    .__stars {
        font-size: 1.4em;
        line-height: 1.25;
        letter-spacing: .1em;
    }
}

.swell-block-review__merits,
.swell-block-review__demerits {
    margin-bottom: 2rem;

    .__label {
        width: fit-content;
        margin: 0 0 .5rem;
        padding: .5em 1em;
        color: #fff;
        font-size: .9em;
        line-height: 1;
        background: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, .1) 25%, rgba(255, 255, 255, .1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, .1) 75%, rgba(255, 255, 255, .1));
        background-size: 6px 6px;
        // background-clip: padding-box;
        border-radius: 5em;
    }


    .__list {
        margin: 0 0 0 1.5rem;
        padding: 0;
        list-style: none !important;

        @include mobile {
            margin-left: 1.25rem;
        }

        li {
            margin: .4em 0;
        }
    }


}

.swell-block-review__merits {
    --color_list_good: #71c863;

    .__label {
        background-color: var(--color_list_good);
    }
}

.swell-block-review__demerits {
    --color_list_bad: #e84f4f;

    .__label {
        background-color: var(--color_list_bad);
    }
}

