////
/// Comment Respond component.
///
/// This component styles the comment respond interface on single posts.
///
/// @group  Components
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

.comment-respond {

   @extend .has-block-padding;

    border: 1px solid var( --colors--meta-medium );
    background-color: var( --colors--meta-light );

    // Header/title for the respond section.
    &__reply-title {
        margin-bottom: 0.2em;
        margin-top: 0;
        line-height: 1;
        font-size: 1.8em;
    }

    // Note section at the top of form.
    &__notes {
        font-size: 0.8em;
        margin: 0;
    }

    // Logged-in message at the top of the form.
    &__logged-in-as {
        margin: 0;
    }

    // The wrapping element around individual form fields.
    &__field {

        label {
            display: inline-block;
            margin-bottom: 5px;
        }

        &--comment, &--author, &--email, &--url, &--cookies {
            line-height: 1;
            margin: 1em 0;
        }

        &--submit {
            margin-bottom: 0;
            text-align: right;
        }

        &--cookies {

            display: inline-flex;
            margin: 0;
            line-height: 1.2;

            input {
                margin-right: 0.5em;
                margin-top: 0.1em;
            }
        }
    }

    // Extend the theme button styles to the comments submit button.
    &__submit {
        @extend .wp-block-button__link;
    }

    textarea, input[type="text"], input[type="url"], input[type="email"] {
        border: 1px solid var( --colors--meta-medium );
    }
}
