:root {
    --rt-replies-offset: 40px;
    --rt-open-replies: var(--color-purple-500);
    --rt-reply: var(--rt-text-tertiary);
    --rt-comment-border: var(--rt-layout-border);
    --rt-comment-form-bg: var(--rt-bg-subtle);
    --rt-comment-pinned-bg: var(--color-purple-50);
    --rt-comment-pinned-border: var(--color-purple-250);
}

.comment {
    padding: 10px 12px;
    border-top: 1px solid var(--rt-comment-border);
}

.comment:last-of-type {
    border-bottom: none;
}

.comment__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.comment__actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.comment__rating {
    display: flex;
    flex-direction: row;
}

.comment__text {
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

.comment__edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: -25px;
}

.comment__reply {
    font-size: 11px;
    cursor: pointer;
    color: var(--rt-reply);
}

.comment__show-replies {
    display: flex;
    margin-top: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: var(--rt-open-replies);
}

.comment__respond {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rt-comment-border);
    margin-top: 14px;
    padding-top: 10px;
}

.comment__reply-input {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    margin-top: 4px;
    resize: vertical;
    margin-bottom: 8px;
}

.comment__reply-controls {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
    gap: 8px;
}

.comment__replies {
    display: flex;
    flex-direction: column;
    margin-left: var(--rt-replies-offset);
}

.comment__replies .comment {
    padding-right: 0;
    border: none;
}

.comment__like,
.comment__dislike {
    height: 1.8em !important;
    padding: 0 0.6em !important;
    font-size: 0.85em !important;
    border-radius: 0 !important;
}

.comment__like {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-right: none !important;
}

.comment__dislike {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.comment__like img,
.comment__dislike img {
    width: 1.1em;
    height: 1.1em;
}

.comment__load-replies {
    padding: 5px;
}

.comment-section {
    display: flex;
    flex-direction: column;
    max-width: 670px;
    align-self: flex-start;
    grid-area: comments;
    box-sizing: border-box;
}

.comment-section__form {
    display: flex;
    flex-direction: column;
    background-color: var(--rt-comment-form-bg);
    gap: 5px;
    padding: 8px;
}

.comment-section__section {
    border-bottom: 1px solid var(--rt-comment-border);
}

.comment-section__comments {
    display: flex;
    flex-direction: column;
}

.comment-section__pinned {
    box-sizing: border-box;
    border: 1px solid var(--rt-comment-pinned-border);
    background-color: var(--rt-comment-pinned-bg);
    position: relative;
    padding: 9px 2px 0 2px;
    margin: 0 -1px -1px -1px;
}

.comment-section__pinned .comment {
    border-top: none !important;
}

.comment-section__pinned::before {
    content: "Pinned";
    position: absolute;
    top: -10px;
    left: 10px;
    border: 1px solid var(--rt-comment-pinned-border);
    background: var(--rt-comment-pinned-bg);
    padding: 2px 5px;
}

.comment-attachment {
    width: 200px;
    height: auto;
}