/* Comment Style */
:root {
    --BackGround: #e3e3e3;
}

div#comments {
    margin-top: 1.5rem;

    & * {
        color: #000000;
    }

    & h2.comments-title {
        font-size: 15px !important;
        padding: 10px;
        background: var(--BackGround);
        margin: 0;
        border-radius: 5px;
        margin-bottom: 8px;

        &:before {
            content: '#';
        }

        &:after {
            content: 'post';
        }
    }

    & ol {
        border-radius: 5px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;

        & li {
            background: var(--BackGround);
            border-radius: 5px;
            padding: 12px 8px;

            & p {
                font-size: 15px;
                background: #427e842e;
                margin-top: 1rem;
                padding: 10px;
                border-radius: 5px;
            }

            & .vcard {
                display: flex;
                gap: 10px;
                align-items: center;
                margin-bottom: 7px;

                & img {
                    width: 35px;
                    height: 35px;
                    border-radius: 100%;
                    border: 1px solid;
                    padding: 1px;
                }
            }

            & .commentmetadata {
                font-size: 12px;
            }

            & ol.children {
                margin-top: 6px;
                margin-left: 1rem;
                list-style: none;
                border-left: 1px solid #898989;
                border-radius: 0;
                padding-left: 10px;
            }
        }

        & .reply {
            border: 1px solid #898989;
            width: fit-content;
            padding: 5px 6px 4px;
            border-radius: 50px;
            transition: .4s;
            display: flex;

            & a {
                color: #898989;
                font-size: 13px;
            }

            &:hover {
                border-color: #83a2a5;

                & a {
                    color: #83a2a5;
                }
            }
        }
    }

    & #respond {
        padding: 10px;
        background: var(--BackGround);
        border-radius: 5px;

        & h3#reply-title {
            padding: 15px 0 15px 15px;
            background: #434343;
            border-radius: 5px;
            margin-bottom: 15px;
            font-size: 15px !important;
            color: #fff;
        }

        & .logged-in-as {
            font-size: 14px;

            & a {
                color: #241dff78 !important;
            }
        }

        & form {
            & p.comment-notes {
                font-size: 13px;
            }

            & p {
                margin-bottom: 10px;

                & label {
                    font-size: 13px;
                }

                & textarea,
                & input {
                    padding: 15px;
                    border-radius: 4px;
                    background: #00000030;
                    border: none;
                    width: 100%;
                    margin-bottom: 0px;
                    resize: none;
                }
            }

            & input#submit {
                padding: 1rem !important;
                cursor: pointer;
                background: #215f9a !important;
                text-align: center;
                color: #fff;
            }

            & p.comment-form-cookies-consent {
                & input {
                    width: fit-content;
                }

                & label {
                    font-size: 13px;
                }
            }
        }
    }
}