@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/forms';
@import '../../../styles/definitions/placeholders';
@import '../../../styles/definitions/colors';
@import '../../../styles/mixins';
@import '../../../styles/grid';

// Local Placeholders
%title {
    @include title-3;
    display: inline-block;
    margin: 0;
    line-height: 25px;
}

// Component Styles
.productReviewForm {
    &_container {
        position: relative;

        .productCard {
            &_content {
                min-height: auto;

                &Text {
                    margin: 0;
                }
            }
            &_title {
                margin-top: 0;
            }
            &_card {
                padding-top: 5px;
            }
        }
    }

    &_content {
        position: relative;
        
        @include media-md-up {
            @include grid-width(8);
            @include grid-offset(2);
        }
    }

    &_closeButton {
        display: flex;
        position: absolute;
        top: 0;
        right: $grid-gutter-width;

        &Text {
            @extend %sr-only;
        }

        &Icon {
            width: 24px;
        }
    }

    &_title {
        @extend %title;
    }

    &_productCard {
        margin: 35px 0 0;
    }

    &_fieldset {
        margin: 30px 0 0;
        padding: 0;
        border: 0;

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

    &_legend {
        @extend %title;
    }
    
    &_description {
        margin: 6px 0 0;
        @include text-4;
        line-height: 25px;
    }

    &_formGroup {
        margin: 20px 0 0;
    }

    &_error {
        @extend %input-error;
    }

    &_btnContainer {
        display: flex;
        align-items: center;
        margin: 20px 0 0;

        .button_item + .button_item {
            margin-left: 20px;
        }
    }
}
