.cs-reviews {
    &__title {
        @extend .#{$namespace}product-description__headline;
        background: $colorGallery;

        @include media('>=tablet') {
            background: none;
            padding: 0;
        }
    }

    &__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__label {
        float: left;
        line-height: 4rem;
    }

    &__item {
        padding: 0 0 2.5rem !important;
        margin: 0 0 2.5rem !important;
        border-bottom: 1px solid $colorAlto;
        list-style: none;

        &:last-of-type {
            border-bottom: 0;
            margin-bottom: 0 !important;
        }

        &:before {
            display: none !important;
        }
    }

    &__form {
        text-align: right;

        //For reviews star and German wording it is min-width to fit them in one line
        .#{$namespace}form__field--half {
            min-width: 37rem;
        }
    }

    &__legend {
        margin-bottom: 1em;
        text-align: left;
        @extend .#{$namespace}t-headline--size_2;
    }

    &__legend-product-name {
        font-weight: 700;
    }

    &__fieldset {
        margin-bottom: 1.5em;
        text-align: left;

        .cs-form__field {
            margin-bottom: 2rem;
        }
    }

    &__rate {
        height: 7rem;
        overflow: hidden;
        margin-top: 0;
        margin-bottom: 2rem;
        @include media('>=phone-lg') {
            height: 4.1rem;
        }

        &:before {
            @include media('<phone-lg') {
                top: 2.6rem;
            }
        }

        + .mage-error {
            margin: -2rem 0 2rem !important; // stylelint-disable-line
        }
    }

    &__rate-stars {
        @include media('<phone-lg') {
            top: 2.5rem;
        }
    }

    &__rate-feedback {
        position: absolute;
        top: 0.8rem;
        left: 0;
        padding: 2rem 1rem 0;
        font-size: 1.08rem;
        font-weight: 700;
        transform: translateY(-50%);
        color: $colorGray;
        @include media('>=phone-lg') {
            top: 50%;
            right: 0;
            left: auto;
            padding: 0 1rem;
        }
    }

    &__review-field {
        min-height: 10rem;
    }

    //Single review in user area style below

    &__subtitle {
        display: block;
        width: 100%;
        margin-bottom: 0.8rem;
        @extend .#{$namespace}t-headline;
        @extend .#{$namespace}t-headline--size_3;
    }

    &__content {
        width: 100%;
        @extend .#{$namespace}t-text;
        margin-bottom: 2rem;
    }

    &__single-name {
        @extend .#{$namespace}t-headline;
        @extend .#{$namespace}t-headline--size_2;
    }

    &__product-details {
        margin-bottom: 4rem;
        display: flex;
        flex-wrap: wrap;

        @include media('>=tablet') {
            flex-wrap: nowrap;
            margin-bottom: 3rem;
        }
    }

    &__product-media {
        width: 100%;
        text-align: center;

        @include media('>=tablet') {
            margin-right: 3%;
            max-width: 28.5rem;
            width: 30%;
        }

        img {
            height: auto;
            margin-bottom: 1.5rem;
            max-width: 100%;
        }
    }

    &__rating-average-label {
        @extend .#{$namespace}t-text;
        margin-top: 1rem;
        display: block;
    }

    &__product-photo {
        @include media('>=tablet', '<laptop') {
            max-width: 18rem;
            display: inline-block;
        }
    }
}

.review-control-vote {
    background: $colorWhite;
    border-radius: 3px;
    max-width: 40rem;
    width: 100%;

    @include media('>=tablet') {
        background: $colorGallery;
        max-width: 50%;

        //For reviews star and German wording it is min-width to fit them in one line
        min-width: 37rem;
    }

    &:before,
    label:before {
        font-size: 4rem;
        height: auto;
        line-height: 1;
    }

    &:before {
        color: $colorAlto;
    }

    label:before {
        color: $colorGold;
    }

    input[type='radio']:focus:not(:checked)
        + .#{$namespace}reviews__rate-stars {
        &:before {
            opacity: 0 !important;
        }
    }
}