.comments-form { border: 1px solid var(--accent-colour); border-radius: 3px; margin: 2px 0; display: grid; grid-template-columns: 46px 1fr; transition: opacity .1s; } .comments-form-root { margin: 2px; } .comments-form-disabled { opacity: .5; } .comments-form-avatar { flex: 0 0 auto; padding: 3px; } .comments-form-wrap { display: grid; grid-template-rows: 1fr 32px; gap: 2px; margin: 3px; margin-left: 0; overflow: hidden; } .comments-form-input { overflow: hidden; } .comments-form-input textarea { min-width: 100%; max-width: 100%; width: 100%; min-height: 40px; height: 0; } .comments-form-root .comments-form-input textarea { min-height: 60px; } .comments-form-actions { display: flex; align-items: center; overflow: hidden; gap: 6px; } .comments-form-status { flex: 1 1 auto; font-size: 1.2em; line-height: 1.4em; padding: 0 6px; overflow: hidden; transition: color .2s; } .comments-form-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comments-form-status-error { color: #c00; } .comments-form-pin { flex: 0 0 auto; font-size: 1.2em; line-height: 1.4em; } .comments-form-post { flex: 0 0 auto; }