@charset "UTF-8";

.p-comment_wrap{
    display: grid;
    gap: 2rem;
}

.p-list_comment{
    display: grid;
    gap: 1rem;
    .comment{
        padding: 1rem;
        background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    }
    .children{
        margin-left: 2rem;
    }
    .comment-body{
        display: grid;
        grid-template-columns: 1fr max-content;
        align-items: center;
        gap: 0 2rem;
    }
    .comment-content{
        grid-area: 1 / 1 / span 1 / span 2;
        padding-bottom: 1rem;
        border-bottom: 1px dashed color-mix(in srgb, var(--color-font) 30%, transparent);
    }
    .comment-meta{
        grid-area: 2 / 1 / span 1 / span 1;
        font-size: small;
        display: grid;
        grid-template-columns: 1fr max-content;
        justify-content: space-between;
        padding-top: 1rem;
        .fn{
            font-style: normal;
            font-weight: bold;
        }
    }
    .reply{
        grid-area: 2 / 2 / span 1 / span 1;
        font-size: small;
        padding-top: 1rem;
        a{
            padding: 0.2rem 0.6rem;
            line-height: 1;
            border: 1px solid color-mix(in srgb, var(--color-font) 60%, transparent);
            border-radius: 4px;
        }
    }
}

.comment-respond{
    .comment-reply-title{
        color: var(--color-accent);
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
    }
    .comment-form{
        display: grid;
        grid-template-columns: 1fr max-content;
        gap: 1rem;
    }
    .comment-form-comment{
        grid-area: 1 / 1 / span 1 / span 2;
        label{
            display: none;
        }
        textarea{
            width: 100%;
            padding: 0.6rem;
            border: 1px solid var(--color-accent);
            border-radius: 8px;
        }
    }
    .comment-form-author{
        grid-area: 2 / 1 / span 1 / span 1;
        display: grid;
        gap: 0.4rem;
        label{
            font-size: smaller;
            color: var(--color-accent);
        }
        input{
            width: 100%;
            padding: 0.4rem;
            border: 1px solid var(--color-accent);
            border-radius: 8px;
        }
    }
    .form-submit{
        grid-area: 2 / 2 / span 1 / span 1;
        align-self: flex-end;
        input{
            color: white;
            background-color: var(--color-accent);
            border: 1px solid var(--color-accent);
            border-radius: 4px;
            padding: 0.4rem 1rem;
            cursor: pointer;
        }
    }
}