.comment-form{background:var(--background);border-radius:10px;flex-direction:column;transition:all .2s;display:flex}.comment-form__input-wrapper{background-color:var(--surface);display:flex;position:relative}.comment-form__textarea{border:1px solid var(--outline);background-color:var(--surface);width:100%;min-height:100px;color:var(--on-surface);resize:none;letter-spacing:.02em;border-radius:5px;padding:10px 15px;font-family:Nunito-sans,sans-serif;font-size:.9rem;overflow:hidden}.comment-form__textarea::placeholder{letter-spacing:.02em;color:var(--on-surface-variant);font-family:Nunito-sans,sans-serif}.comment-form__textarea-count{width:fit-content;color:var(--on-surface-variant);font-size:.6rem;position:absolute;bottom:10px;right:45px}.comment-form__textarea:focus{outline:1px solid var(--primary)}.comment-form__textarea:hover{border-color:var(--surface-hover)}.comment-form__submit-button{padding:var(--padding);background-color:var(--surface)}.comment-form__submit-button .button{margin-left:auto}.comment-form__error{background-color:var(--surface);padding:15px 30px 0}.comment-form__auth-prompt{color:var(--on-surface);background-color:var(--surface-high);flex-direction:column;align-items:center;gap:15px;padding:30px;font-size:1rem;font-weight:600;display:flex}.comment-form__auth-prompt svg{fill:var(--on-surface);stroke:none}.comment-form .userInfo{align-items:center;gap:12px;display:flex}.comment-form .userInfo .avatar{color:#888;background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex;overflow:hidden}.comment-form .userInfo .avatar img{object-fit:cover;width:100%;height:100%}.comment-form .userInfo .username{color:#e8e8f0;font-size:14px;font-weight:500}
