.commentContainer{
    @include flex-direction(column);

    gap: 1.6rem;
    position: relative;
    margin-bottom: 3.4rem;

    @include min(tablet){
        margin-bottom: 0;
    }
  
}

.commentTopArea{
    @include flex-align(center, start);

    flex-wrap: wrap;
    gap: .8rem;

    >  img{
        border-radius: 50%;
        width: 5rem;
        height: 5rem;
    }
}

.commentName{
    font-size: var(--comment-name-font-size, 18px);
    font-weight: 600;
    line-height: 28px;
    color: var(--comment-name-font-color, #1B1B1C);

    @include flex-align(center, center);

    > svg{
        margin-left: .8rem;
        width: 2rem;
        height: 2rem;
        color: var(--comment-name-font-color, #1B1B1C);
    }

}

.commentJobTitle{
    height: var(--comment-jobTitle-height, 24px);
    padding: var(--comment-jobTitle-padding, .8rem);
    font-size: var(--comment-jobTitle-font-size, 1.2rem);
    font-weight: var(--comment-jobTitle-font-weight, 400);
    line-height: 1.8rem;

    @include flex-align(center, center);

    border-radius: var(--comment-jobTitle-border-radius, 5rem);
    background: var(--comment-jobTitle-bg, #CFC7C0);
    color: var(--comment-jobTitle-font-color, #0F172A);
}

.commentDate{
    color: var(--comment-date-font-color, #64748B);
    font-size: var(--comment-date-font-size, 1.6rem);
    font-weight: 400;
    line-height: 2.6rem; 
}

.commentContent{
    border-radius: var(--comment-border-radius, .8rem);
    border: var(--comment-border, .1rem solid #F4F4F4);
    background: var(--comment-bg-color, #FFF);
    position: relative;
    padding: var(--comment-padding, 2.4rem);
}

.commentActions{
    margin-left: auto;

    @include flex-direction(row);
}

.replyButton{
    border-radius: var(--comment-btn-border-radius, 10rem);
    border: var(--comment-btn-border, 1.5px solid #161128);
    color: var(--comment-btn-font-color, #0A0E19);
    font-size: var(--comment-btn-font-size, 1.2rem);
    font-weight: var(--comment-btn-font-weight, 700);
    line-height: 1.8rem;
    text-transform: capitalize;
    margin-left: .8rem;
    padding: var(--comment-btn-padding, 0.2rem 1.6rem);
}

.replySection{
    display: grid;
}

.buttonGroup[disabled]{
    cursor: default;
}