.hComment {
    &--area {
        padding-top: 10px;
    }

    &--item {
        &.depth-1 {
            border-bottom: 1px solid var(--hera-border-color-light);

            &:last-child {
                border-bottom: 0;
            }
        }
    }

    &--placeholder {
        text-align: center;
        padding: 50px 0;
        color: var(--hera-text-light);
    }

    &--list {
        border-top: 1px solid var(--hera-border-color-light);
        list-style: none;
        padding-top: 10px;
    }

    &--title {
        padding-top: 15px;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        svg {
            width: 24px;
            height: 24px;
            margin-right: 5px;
            position: relative;
            transform: translate3d(0, 1px, 0);
            fill: var(--hera-text-color);
        }
    }

    &--body {
        padding: 25px 0;

        --hera-comment-avatar-size: 42px;
        --hera-comment-fresh-start-color: rgba(255, 255, 255, 1);
        --hera-comment-fresh-end-color: rgba(255, 254, 224, 1);

        @media (prefers-color-scheme: dark) {
            .auto & {
                --hera-comment-fresh-start-color: #1e1e1e;
                --hera-comment-fresh-end-color: rgba(0, 0, 0, 1);
            }
        }

        .dark & {
            --hera-comment-fresh-start-color: #1e1e1e;
            --hera-comment-fresh-end-color: rgba(0, 0, 0, 1);
        }

        &__fresh {
            animation: comment--fresh 1.5s ease-in-out infinite alternate;
            border-radius: 5px;
        }

        @media screen and (max-width: 768px) {
            padding: 12px 0;
            --hera-comment-avatar-size: 32px;
        }
    }

    &--avatar {
        flex: 0 0 auto;
        margin-right: 10px;
        display: flex;
    }

    &--author {
        margin-left: 5px;
        font-size: 12px;
        color: var(--hera-background-white);
        background-color: var(--hera-main-color);
        line-height: 1.1;
        padding: 2px 5px;
        border-radius: 3px;
    }

    &--meta {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        font-size: 14px;

        .author--icon {
            --fill: rgb(0, 149, 246);
            --height: 14px;
            --width: 14px;
            fill: var(--fill);
            height: var(--height);
            width: var(--width);
            margin-left: 4px;
        }

        .comment-reply-link {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-left: 8px;

            svg {
                fill: var(--hera-text-gray);
                width: 14px;
                height: 14px;
            }

            &:hover {
                svg {
                    fill: var(--hera-hover-color);
                }
            }
        }

        a {
            color: var(--hera-main-color);

            &:hover {
                color: var(--hera-hover-color);
                text-decoration: underline;
            }
        }
    }

    &--time {
        color: var(--hera-text-light);
        margin-left: auto;
        font-size: 12px;
    }

    &--header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        color: var(--hera-text-light);

        .avatar {
            width: var(--hera-comment-avatar-size);
            height: var(--hera-comment-avatar-size);
            border-radius: 50%;
        }
    }

    &--content {
        padding-left: 10px;
        color: var(--hera-text-light);

        @media screen and (max-width: 768px) {
            font-size: 14px;
        }

        a {
            text-decoration: underline;
            &:hover {
                color: var(--hera-hover-color);
            }
        }
    }

    &--parent {
        margin-right: 5px;
        color: var(--hera-main-color);
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;

        &:hover {
            color: var(--hera-hover-color);
            text-decoration: underline;
        }

        .friend--icon {
            margin-left: 5px;
            width: 16px;
            height: 16px;
        }
    }
}

.children {
    margin-left: 0px;
    padding-bottom: 10px;

    .hComment--body {
        border-bottom: 0;
        padding: 15px 0;

        --hera-comment-avatar-size: 32px;

        @media screen and (max-width: 768px) {
            padding: 10px 0;
            --hera-comment-avatar-size: 24px;
        }
    }

    .hComment--content {
        font-size: 14px;

        @media screen and (max-width: 768px) {
            font-size: 12px;
        }
    }

    .depth-1 > & {
        margin-left: 50px;

        @media screen and (max-width: 768px) {
            margin-left: 25px;
        }
    }
}

.pingback {
    padding: 25px 0;
    border-bottom: 1px solid var(--hera-border-color-light);

    &:last-child {
        border-bottom: 0;
    }

    .pingback-content {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--hera-text-light);

        svg {
            fill: currentColor;
            margin-right: 6px;
        }

        a {
            &:hover {
                color: var(--hera-hover-color);
                text-decoration: underline;
            }
        }
    }
}
