/* ---------------------------- assignment comments */
.comments h4 {
    margin: 0;
    font-size: var(--font-size-phar);
    font-weight: var(--font-weight-semi-bold);
    color: var(--wb-40);
}

.add-assignment-comment {

    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--gap-medium);
    overflow: hidden;
    background: aqua;
}

.add-assignment-comment-area {
    margin: 20px 0 20px 0;
    box-sizing: border-box;
    padding: 35px;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    border-radius: 20px;
    transition: padding 0.5s ease-in-out,
    background-color 0.5s ease-in-out,
    margin 0.5s ease-in-out;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    gap: var(--gap-medium);
}

.add-assignment-comment-area.collapsed {
    padding: 0 25px;
    background: none;
    margin: 20px 0 0 0;
    box-shadow: none;
}

.add-assignment-comment-textarea {
    resize: none;
    width: 100%;
}

.add-assignment-comment-textarea::placeholder {
    resize: none;
    width: 100%;
    color: var(--wb-30);
}

.add-assignment-comment-container {
    width: 100%;
    display: flex;
    height: 95px;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-small);
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out, translate 0.5s ease-in-out;
}

.add-assignment-comment-container.hidden {
    height: 0;
    opacity: 0;
    pointer-events: none;
    translate: 0 -30px;
}

.add-assignment-comment-username {
    width: 100%;
    height: 15px;
    border-radius: 0;
    border: 0;
}

.add-assignment-comment-username::placeholder {
    color: var(--wb-30);
}

.add-assignment-comment-username:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-assignment-comment-button {
    box-sizing: border-box;
    border: 0;
    padding: 0 20px;
    height: 40px;
    align-self: end;
    border-radius: 8px;
    background: var(--wb-80);
    color: var(--wb-10);
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.add-assignment-comment-button:hover {
    background: var(--gold);
    color: var(--wb-80);
}

.add-assignment-comment-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignment-comments-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}