@charset "UTF-8";

// .p-comments {}


// コメントリスト
.c-commentList {
    margin: 2rem 0 0;
    font-size: .9rem;

    // li
    .comment {
        margin-top: 1rem;
    }

    // & > .comment:not(:last-child),
    & > .comment {
        padding: 1rem;
        background-color: var(--ark-color_gray);
    }

    .children {
        margin-left: 1rem;
        padding: 0 0 0 1rem;
        border-left: solid 1px var(--ark-color_border);
    }

    .reply {
        margin-top: .5rem;
    }

}

// article
.comment-body {
    padding: 8px;
}

// コメント主
.comment-author {
    display: flex;
    align-items: center;

    .avatar {
        border-radius: 50%;
    }

    //名前
    .fn {
        margin-left: 1rem;
        font-size: 1.1em;
        //a{}
    }
    // 名前のリンク（サイトURLある時）
    .url {
        color: inherit;
        text-decoration: none;
    }

    //「より」
    .says {
        display: none;
    }
}

// 日付
.comment-metadata {

    a {
        color: inherit;
        font-size: 11px;
        text-decoration: none;
        opacity: $thin_text_opacity;
    }

}

// コメント本文
.comment-content {
    margin-top: 1rem;
    // font-size: 14px;
    line-height: 1.5;

    & > :first-child {
        margin-top: 0;
    }

    p {
        margin-top: 1rem;
    }
}

// 「あなたのコメントは承認待ちです。」
.comment-awaiting-moderation {
    display: block;
    margin-top: 1rem;
    font-weight: bold;
    // font-size: .9em;
}

// 「返信」
// .comment-reply-link {}


// コメント入力エリア
.comment-respond {
    margin-top: 2.5rem;
}

.comment-reply-title {
    font-weight: bold;
    font-size: 1rem;

    &::before {
        margin-right: .5em;

        @extend .arkhe-icon-comment;
        @extend %arkheIcon;
    }
}


// 「メールアドレスが公開されることはありません」
.comment-notes {

    font-size: .75rem;
}

.comment-form {
    margin-top: 1rem;

    p {
        margin-top: 1rem;
    }

    label {
        display: block;
        margin-bottom: .5rem;
        font-weight: bold;
    }

    // 「コメント」を非表示（「コメントを残す」と被る）
    .comment-form-comment {

        label {
            display: none;
        }
    }


    [for="wp-comment-cookies-consent"] {
        font-weight: normal;
    }


    #comment,
    #author,
    #email,
    #url {
        width: 100%;
    }

    .form-submit {
        margin-top: 2rem;
    }

    .submit {
        padding: .5rem 1.5rem;
        color: #fff;
        background-color: var(--ark-color_main);
        border: none;
        transition: opacity .25s;

        &:hover {
            opacity: .75;
        }

    }
}

// 返信キャンセルリンク
#cancel-comment-reply-link {
    margin-left: 1em;
    font-size: .9em;
    font-style: italic;
}

// 「次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。」
.comment-form-cookies-consent {
    display: flex;
    align-items: center;

    label {
        margin-bottom: 0;
        margin-left: .5em;
    }
}

#wp-comment-cookies-consent {
    margin: 0;
}