.comments {
    display: grid;
    row-gap: 1rem;
    align-self: start;
    overflow-y: auto;
    max-height: 100%;

    & > .comment {
        display: grid;
        grid-template-areas: 
            "author time"
            "text text"
            "reply reply";
        grid-template-columns: 1fr auto;
        row-gap: 3px;
        padding: 0.5rem 0.5rem;
        position: relative;
        background-color: white;
        border-radius: 0.3rem;
        box-shadow: 0 2px 2px 0 #0000000a;
        transition: background-color 0.7s;
        
        &:target {
            outline: 2px solid #c99b84;
        }
        
        &.withcite {
            grid-template-areas: 
                "cite   time"
                "author author"
                "text   text"
                "reply  reply";
            column-gap: 10px;
    
            .author {
                margin-top: 7px;
            }
        }
        
        &.highlight {
            background-color: #c9d9e7;
        }
        
        .author {
            grid-area: author;
            font-weight: 600;
        }
        
        .time {
            grid-area: time;
            font-size: 0.8rem;
            align-self: start;
            color: #7a7a7a;
        }
        
        .cite {
            grid-area: cite;
            display: grid;
            width: fit-content;
            padding: 0.3rem 0.2rem 0.3rem 0.5rem;
            background-color: #f7f7f7;
            box-shadow: 0 2px 2px 0 #0000001f;
            border-radius: 0.2rem;
            border-left: 2px solid #aaa;
            cursor: pointer;
        }
        
        .cite-author {
            font-size: 14px;
            font-weight: 600;
            padding: 3px 0 1px 0;
        }
        
        .cite-text {
            white-space: pre-wrap;
            font-size: 14px;
            color: #7e7e7e;
        }
        
        .text {
            grid-area: text;
            white-space: pre-wrap;
        }
        
        .reply {
            grid-area: reply;
            width: fit-content;
            display: flex;
            justify-self: right;
            cursor: pointer;
            border-bottom: 1px dotted;
            color: slategray;
            user-select: none;
        }
    }

    .leave-comment {
        display: grid;
        row-gap: 0.5rem;
        border-radius: 0.3rem;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        background-color: #a3b3c1;
        box-shadow: 0 2px 2px 0 #0000000a;
        position: relative;
        
        .header {
            display: grid;
            grid-template-columns: 1fr auto;
            column-gap: 1rem;

            .answer {
                align-self: center;
                color: #ffffff;
                
                .error {
                    color: #b30000;
                }
            }
        }
    
        .close {
            width: 27px;
            height: 27px;
            position: relative;
            justify-self: end;
            cursor: pointer;
            border-radius: 3px;
            
            &:hover {
                background-color: #869aad;
            }
            
            .x1, .x2 {
                position: absolute;
                width: 100%;
                height: 3px;
                border-radius: 2px;
                background-color: #ffffff;
            }
            .x1 {
                top: 12px;
                transform: rotate(45deg);
            }
            .x2 {
                bottom: 12px;
                transform: rotate(-45deg);
            }
        }

        .send {
            width: fit-content;
            justify-self: right;
            padding: 0.3rem 0.8rem 0.4rem 0.8rem;
            border-radius: 0.4rem;
            background-color: white;
            color: #535d66;
            box-shadow: 0 2px 2px 0 #0000000a;
            cursor: pointer;
            transform: translate3d(0,0,0);
            transition: .3s;
            user-select: none;
            &:active {
                transform: translateY(2px);
                box-shadow: 0 0 0 0 #0000000a;
            }
        }

        .input-group {
            position: relative;
            
            & > label {
                position: absolute;
                left: 0.4rem;
                top: 2px;
                font-size: 0.9rem;
                color: #535d66;
            }
            
            & > input {
                padding: 1.6rem 0.2rem 0.4rem 0.4rem;
            }
            
            & > input,
            & > textarea {
                width: 100%;
                border-radius: 4px;
                font-size: 1rem;
                background-color: white;
                border: 0;
                outline: 0;
            }
            
            & > textarea {
                padding: 1.6rem 0.2rem 1.4rem 0.4rem;
                overflow: hidden;
                overflow-wrap: break-word;
                font-family: sans-serif;
                resize: none;
            }
        }
    }

    .leave-comment-btn {
        width: fit-content;
        padding: 0.3rem 0.8rem 0.4rem 0.8rem;
        margin-bottom: 0.3rem;
        border-radius: 0.4rem;
        background-color: white;
        box-shadow: 0 2px 2px 0 #0000000a;
        border: 1px solid #e5e5e5;
        cursor: pointer;
        user-select: none;
    }
    [data-rid] + .leave-comment-btn {
        display: none;
    }


}
