@import '../../../styles/fills';
@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/mixins';
@import '../../../styles/definitions/colors';

// Local Variable
$product-review-detail-font-size: $bodyFontSize4;

// Component Styles
.productReviewDetail {
    &_wrapper {
        @include media-md-up {
            display: flex;
        }
    }

    &_avatar {
        $avatar-spacing: 28px;

        @include media-md-up {
            margin-right: var(--avatar-spacing, $avatar-spacing);
            padding: 5px 0 0;
        }
    }

    &_content {
        @include media-md-down {
            margin-top: 10px;
        }
    }

    &_jobs {
        padding: 0;
        margin: 2px 0 0;
        color: $dark-gray;
        font-size: $product-review-detail-font-size;
        line-height: 23px;
        list-style-type: none;
    }

    &_author {
        @include title-3;
        margin: 0;
        line-height: 23px;
    }

    &_tags {
        display: flex;
        flex-wrap: wrap;
        margin: 8px 0 0;
    }

    &_tag {
        @include text-6;
        margin-top: 7px;
        padding: 8px 14px;
        line-height: 14px;
        border: 1px $primary-color solid;
        border-radius: 2px;
        cursor: pointer;

        &:not(:last-of-type) {
            margin-right: 14px;
        }

        @include media-md-down {
            margin-bottom: 8px;
        }
    }

    &_info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 12px 0 0;
    }

    &_tags + &_info {
        margin-top: 12px;

        @include media-md-up {
            margin-top: 17px;
        }
    }

    &_rating {
        margin-right: 20px;
    }

    &_date {
        @include text-5;
        line-height: 16px;
    }

    &_review {
        margin: 16px 0 0;

        &Title {
            @include title-1;
            display: inline-block;
            margin: 0;
            line-height: 29px;

            &--small {
                margin: 0 0 5px;
                @include title-3;
                line-height: 23px;
            }
        }

        &Item {
            margin: 20px 0 0;
        }

        &Description {
            margin: 0;
            font-size: $product-review-detail-font-size;
            line-height: 25px;
        }
    }

    &_btnMoreReview {
        margin: 20px 0 0;

        &Icon {
            margin-left: 12px;
        }
    }
}
