@ckeditor/ckeditor5-comments 48.3.1 → 48.4.0-alpha.1

package/dist/index-editor.css

@@ -2,760 +2,756 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-:root{
-  --ck-color-comment-background:#f3f7fb;
-  --ck-color-comment-separator:#cddeef;
-  --ck-color-comment-remove-background:var(--ck-color-light-red);
-  --ck-color-comment-input-background:var(--ck-color-comment-background);
-  --ck-comment-content-font-family:var(--ck-font-face);
-  --ck-comment-content-font-size:var(--ck-font-size-base);
-  --ck-comment-content-font-color:var(--ck-color-base-text);
-}
-
-.ck .ck-comment__wrapper{
-  font-size:var(--ck-font-size-base);
-  outline:0;
-  transition:all .3s linear;
-  position:relative;
-}
-
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-comment__wrapper{
-    transition:none;
+:root {
+  --ck-color-comment-background: #f3f7fb;
+  --ck-color-comment-separator: #cddeef;
+  --ck-color-comment-remove-background: var(--ck-color-light-red);
+  --ck-color-comment-input-background: var(--ck-color-comment-background);
+  --ck-comment-content-font-family: var(--ck-font-face);
+  --ck-comment-content-font-size: var(--ck-font-size-base);
+  --ck-comment-content-font-color: var(--ck-color-base-text);
+}
+
+.ck .ck-comment__wrapper {
+  font-size: var(--ck-font-size-base);
+  outline: 0;
+  transition: all .3s linear;
+  position: relative;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-comment__wrapper {
+    transition: none;
   }
 }
 
-.ck .ck-comment__wrapper:first-of-type{
-  border-top-right-radius:var(--ck-border-radius);
-  border-top-left-radius:var(--ck-border-radius);
+.ck .ck-comment__wrapper:first-of-type {
+  border-top-right-radius: var(--ck-border-radius);
+  border-top-left-radius: var(--ck-border-radius);
 }
 
-.ck .ck-comment__wrapper:focus{
-  background:var(--ck-color-button-default-hover-background);
+.ck .ck-comment__wrapper:focus {
+  background: var(--ck-color-button-default-hover-background);
 }
 
-.ck .ck-comment:after{
-  content:"";
-  opacity:1;
-  top:calc(var(--ck-user-avatar-size) + var(--ck-spacing-small));
-  left:calc(var(--ck-spacing-standard) + ( var(--ck-user-avatar-size) / 2)
+.ck .ck-comment:after {
+  content: "";
+  opacity: 1;
+  top: calc(var(--ck-user-avatar-size) + var(--ck-spacing-small));
+  left: calc(var(--ck-spacing-standard) + ( var(--ck-user-avatar-size) / 2 )
 
-			 
+			/* Half width of line. */
 			- 2px);
-  background-color:var(--ck-color-comment-separator);
-  width:4px;
-  height:100%;
-  display:block;
-  position:absolute;
+  background-color: var(--ck-color-comment-separator);
+  width: 4px;
+  height: 100%;
+  display: block;
+  position: absolute;
 }
 
-.ck .ck-comment--edit{
-  background-color:var(--ck-color-comment-input-background);
+.ck .ck-comment--edit {
+  background-color: var(--ck-color-comment-input-background);
 }
 
-.ck .ck-comment--edit:after{
-  opacity:0;
+.ck .ck-comment--edit:after {
+  opacity: 0;
 }
 
-.ck .ck-comment--edit .ck-comment__input-actions{
-  margin-top:var(--ck-spacing-standard);
+.ck .ck-comment--edit .ck-comment__input-actions {
+  margin-top: var(--ck-spacing-standard);
 }
 
-.ck .ck-comment__content{
-  word-break:normal;
-  overflow-wrap:anywhere;
-  font-family:var(--ck-comment-content-font-family);
-  color:var(--ck-comment-content-font-color);
+.ck .ck-comment__content {
+  word-break: normal;
+  overflow-wrap: anywhere;
+  font-family: var(--ck-comment-content-font-family);
+  color: var(--ck-comment-content-font-color);
 }
 
-.ck .ck-comment--info .ck-comment__content{
-  font-style:italic;
-  font-family:var(--ck-comment-content-font-family);
-  font-size:var(--ck-comment-content-font-size);
-  color:var(--ck-comment-content-font-color);
+.ck .ck-comment--info .ck-comment__content {
+  font-style: italic;
+  font-family: var(--ck-comment-content-font-family);
+  font-size: var(--ck-comment-content-font-size);
+  color: var(--ck-comment-content-font-color);
 }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) p{
-  margin:0;
+:is(.ck .ck-comment, .ck .ck-comment__input) p {
+  margin: 0;
 }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul, :is(.ck .ck-comment, .ck .ck-comment__input) ol{
-  margin-left:10px;
-  padding-left:10px;
+:is(.ck .ck-comment, .ck .ck-comment__input) ul, :is(.ck .ck-comment, .ck .ck-comment__input) ol {
+  margin-left: 10px;
+  padding-left: 10px;
 }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul{
-  margin-top:0;
-  margin-bottom:5px;
-  list-style:outside;
+:is(.ck .ck-comment, .ck .ck-comment__input) ul {
+  margin-top: 0;
+  margin-bottom: 5px;
+  list-style: outside;
 }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul ul{
-  list-style:circle;
+:is(.ck .ck-comment, .ck .ck-comment__input) ul ul {
+  list-style: circle;
 }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul ul ul{
-  list-style:square;
+:is(.ck .ck-comment, .ck .ck-comment__input) ul ul ul {
+  list-style: square;
 }
 
-.ck .ck-comment__main .ck-comment__input-wrapper{
-  flex-direction:column;
-  transition:all .3s linear;
-  display:flex;
-  position:relative;
+.ck .ck-comment__main .ck-comment__input-wrapper {
+  flex-direction: column;
+  transition: all .3s linear;
+  display: flex;
+  position: relative;
 }
 
-.ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input{
-  padding:0;
+.ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input {
+  padding: 0;
 }
 
-.ck .ck-comment__user{
-  z-index:var(--ck-z-default);
+.ck .ck-comment__user {
+  z-index: var(--ck-z-default);
 }
 
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit{
-  background:var(--ck-color-base-action);
-  color:#fff;
+.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit {
+  background: var(--ck-color-base-action);
+  color: #fff;
 }
 
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit:hover{
-  background:var(--ck-color-button-save);
+.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit:hover {
+  background: var(--ck-color-button-save);
 }
 
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel{
-  color:var(--ck-color-text);
+.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel {
+  color: var(--ck-color-text);
 }
 
-.ck .ck-comment__external{
-  color:var(--ck-color-annotation-info);
-  font-style:italic;
-  font-size:var(--ck-font-size-tiny);
-  margin-top:var(--ck-spacing-standard);
+.ck .ck-comment__external {
+  color: var(--ck-color-annotation-info);
+  font-style: italic;
+  font-size: var(--ck-font-size-tiny);
+  margin-top: var(--ck-spacing-standard);
 }
 
-.ck .ck-comment .ck-dropdown .ck-dropdown__arrow{
-  display:none;
+.ck .ck-comment .ck-dropdown .ck-dropdown__arrow {
+  display: none;
 }
 
-.ck .ck-comment .ck-dropdown .ck-list{
-  padding:var(--ck-spacing-small) 0;
-  margin:0;
+.ck .ck-comment .ck-dropdown .ck-list {
+  padding: var(--ck-spacing-small) 0;
+  margin: 0;
 }
 
-.ck .ck-comment .ck-dropdown .ck-list .ck-list__item{
-  color:var(--ck-color-base-text);
-  min-width:auto;
-  font-size:1.2em;
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item {
+  color: var(--ck-color-base-text);
+  min-width: auto;
+  font-size: 1.2em;
 }
 
-.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button{
-  color:var(--ck-color-text);
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button {
+  color: var(--ck-color-text);
 }
 
-:root{
-  --ck-color-thread-remove-background:var(--ck-color-comment-remove-background);
-  --ck-color-comment-count:#5891ca;
-  --ck-color-thread-header-background:#fdfadd;
-  --ck-color-thread-header-active-background:#fff3a8;
-  --ck-color-unlinked-background:#f5f5f5;
-  --ck-color-unlinked-active-background:#ebebeb;
+:root {
+  --ck-color-thread-remove-background: var(--ck-color-comment-remove-background);
+  --ck-color-comment-count: #5891ca;
+  --ck-color-thread-header-background: #fdfadd;
+  --ck-color-thread-header-active-background: #fff3a8;
+  --ck-color-unlinked-background: #f5f5f5;
+  --ck-color-unlinked-active-background: #ebebeb;
 }
 
-.ck .ck-thread{
-  border-radius:var(--ck-rounded-corners-radius);
-  width:100%;
-  color:var(--ck-color-base-text);
-  background-color:var(--ck-color-base-background);
-  outline:0;
-  transition-property:color, background-color, width, outline;
-  transition-duration:.3s;
-  transition-timing-function:ease;
-  overflow:hidden;
+.ck .ck-thread {
+  border-radius: var(--ck-rounded-corners-radius);
+  width: 100%;
+  color: var(--ck-color-base-text);
+  background-color: var(--ck-color-base-background);
+  outline: 0;
+  transition-property: color, background-color, width, outline;
+  transition-duration: .3s;
+  transition-timing-function: ease;
+  overflow: hidden;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-thread{
-    transition:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-thread {
+    transition: none;
   }
 }
 
-.ck .ck-thread:focus{
-  outline:var(--ck-focus-ring);
-  box-shadow:0 0 0 4px var(--ck-color-focus-outer-shadow);
+.ck .ck-thread:focus {
+  outline: var(--ck-focus-ring);
+  box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
 }
 
-.ck-balloon-panel:has(.ck-thread:focus){
-  border:var(--ck-focus-ring);
-  box-shadow:var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
-  outline:none;
+.ck-balloon-panel:has(.ck-thread:focus) {
+  border: var(--ck-focus-ring);
+  box-shadow: var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
+  outline: none;
 }
 
-.ck .ck-thread__header{
-  padding:var(--ck-spacing-standard);
-  background-color:var(--ck-color-thread-header-background);
-  line-height:1.57;
-  font-size:var(--ck-font-size-base);
-  justify-content:space-between;
-  display:flex;
+.ck .ck-thread__header {
+  padding: var(--ck-spacing-standard);
+  background-color: var(--ck-color-thread-header-background);
+  line-height: 1.57;
+  font-size: var(--ck-font-size-base);
+  justify-content: space-between;
+  display: flex;
 }
 
-.ck .ck-thread__header .ck-button{
-  font-size:var(--ck-annotation-button-size);
+.ck .ck-thread__header .ck-button {
+  font-size: var(--ck-annotation-button-size);
 }
 
-.ck .ck-thread__header .ck-context-wrapper{
-  width:100%;
-  min-width:0;
-  height:25px;
-  padding-right:var(--ck-spacing-large);
-  display:inline-flex;
-  position:relative;
+.ck .ck-thread__header .ck-context-wrapper {
+  width: 100%;
+  min-width: 0;
+  height: 25px;
+  padding-right: var(--ck-spacing-large);
+  display: inline-flex;
+  position: relative;
 }
 
-.ck .ck-thread__header .ck-context{
-  white-space:nowrap;
-  width:100%;
-  padding:var(--ck-spacing-small) var(--ck-spacing-medium);
-  display:flex;
-  overflow:hidden;
+.ck .ck-thread__header .ck-context {
+  white-space: nowrap;
+  width: 100%;
+  padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+  display: flex;
+  overflow: hidden;
 }
 
-.ck .ck-thread__header .ck-context.ck-context--quotes:after, .ck .ck-thread__header .ck-context.ck-context--quotes:before{
-  content:"\"";
-  display:inline-block;
+.ck .ck-thread__header .ck-context.ck-context--quotes:after, .ck .ck-thread__header .ck-context.ck-context--quotes:before {
+  content: "\"";
+  display: inline-block;
 }
 
-.ck .ck-thread__header .ck-context .ck-context__type{
-  padding-right:var(--ck-spacing-standard);
-  font-weight:bold;
+.ck .ck-thread__header .ck-context .ck-context__type {
+  padding-right: var(--ck-spacing-standard);
+  font-weight: bold;
 }
 
-.ck .ck-thread__header .ck-context .ck-context__value{
-  text-overflow:ellipsis;
-  border:1px solid #0000;
-  overflow:hidden;
+.ck .ck-thread__header .ck-context .ck-context__value {
+  text-overflow: ellipsis;
+  border: 1px solid #0000;
+  overflow: hidden;
 }
 
-.ck .ck-thread__header .ck-context .ck-context__value:focus{
-  border:var(--ck-focus-ring);
-  box-shadow:var(--ck-focus-outer-shadow), 0 0;
-  outline:none;
+.ck .ck-thread__header .ck-context .ck-context__value:focus {
+  border: var(--ck-focus-ring);
+  box-shadow: var(--ck-focus-outer-shadow), 0 0;
+  outline: none;
 }
 
-.ck .ck-thread__header .ck-context.overlay{
-  z-index:2;
-  background:var(--ck-color-base-background);
-  white-space:normal;
-  box-sizing:border-box;
-  border-radius:2px;
-  display:inline-block;
-  position:absolute;
-  top:0;
-  box-shadow:0 2px 3px #fff3;
+.ck .ck-thread__header .ck-context.overlay {
+  z-index: 2;
+  background: var(--ck-color-base-background);
+  white-space: normal;
+  box-sizing: border-box;
+  border-radius: 2px;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  box-shadow: 0 2px 3px #fff3;
 }
 
-.ck .ck-thread__comment-count{
-  --ck-user-avatar-size:28px;
-  padding-left:calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard) * 2);
-  color:var(--ck-color-comment-count);
-  font-size:var(--ck-font-size-base);
-  cursor:pointer;
-  font-weight:bold;
-  transition:background-color .3s;
+.ck .ck-thread__comment-count {
+  --ck-user-avatar-size: 28px;
+  padding-left: calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard) * 2);
+  color: var(--ck-color-comment-count);
+  font-size: var(--ck-font-size-base);
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color .3s;
 }
 
-.ck .ck-thread__comment-count:before{
-  content:"▼";
-  margin-right:var(--ck-spacing-small);
+.ck .ck-thread__comment-count:before {
+  content: "▼";
+  margin-right: var(--ck-spacing-small);
 }
 
-.ck .ck-thread--remove .ck-comment{
-  background-color:var(--ck-color-comment-remove-background);
+.ck .ck-thread--remove .ck-comment {
+  background-color: var(--ck-color-comment-remove-background);
 }
 
-.ck .ck-thread--remove .ck-thread__input--active{
-  background-color:var(--ck-color-base-background);
+.ck .ck-thread--remove .ck-thread__input--active {
+  background-color: var(--ck-color-base-background);
 }
 
-.ck .ck-thread--remove .ck-thread__input--active.ck-thread__input{
-  background-color:var(--ck-color-comment-remove-background);
+.ck .ck-thread--remove .ck-thread__input--active.ck-thread__input {
+  background-color: var(--ck-color-comment-remove-background);
 }
 
-.ck .ck-thread--remove .ck-thread__comment-count{
-  background-color:var(--ck-color-comment-remove-background);
+.ck .ck-thread--remove .ck-thread__comment-count {
+  background-color: var(--ck-color-comment-remove-background);
 }
 
-.ck .ck-thread--remove .ck-comment__wrapper .ck-comment:after{
-  opacity:0;
+.ck .ck-thread--remove .ck-comment__wrapper .ck-comment:after {
+  opacity: 0;
 }
 
-.ck .ck-thread__comments .ck-comment__wrapper:last-of-type .ck-comment:after{
-  opacity:0;
+.ck .ck-thread__comments .ck-comment__wrapper:last-of-type .ck-comment:after {
+  opacity: 0;
 }
 
-.ck .ck-thread__container{
-  transition:transform .3s;
+.ck .ck-thread__container {
+  transition: transform .3s;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-thread__container{
-    transition:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-thread__container {
+    transition: none;
   }
 }
 
-.ck .ck-thread__comments{
-  z-index:var(--ck-z-default);
-  border-radius:var(--ck-border-radius);
-  margin:0;
-  padding:0;
-  list-style:none;
-  position:relative;
+.ck .ck-thread__comments {
+  z-index: var(--ck-z-default);
+  border-radius: var(--ck-border-radius);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
 }
 
-.ck .ck-thread__user{
-  font-size:.85em;
+.ck .ck-thread__user {
+  font-size: .85em;
 }
 
-.ck .ck-thread__input{
-  width:calc(100% - var(--ck-user-avatar-size));
-  white-space:normal;
-  border-radius:var(--ck-border-radius);
-  min-height:38px;
-  transition:background-color .2s ease-in-out;
+.ck .ck-thread__input {
+  width: calc(100% - var(--ck-user-avatar-size));
+  white-space: normal;
+  border-radius: var(--ck-border-radius);
+  min-height: 38px;
+  transition: background-color .2s ease-in-out;
 }
 
-.ck .ck-thread--active .ck-comment__options.ck-dropdown{
-  display:block;
+.ck .ck-thread--active .ck-comment__options.ck-dropdown {
+  display: block;
 }
 
-.ck .ck-thread--active .ck-thread__input{
-  background-color:var(--ck-color-comment-background);
-  display:block;
+.ck .ck-thread--active .ck-thread__input {
+  background-color: var(--ck-color-comment-background);
+  display: block;
 }
 
-.ck .ck-thread--active .ck-thread__header{
-  background-color:var(--ck-color-thread-header-active-background);
+.ck .ck-thread--active .ck-thread__header {
+  background-color: var(--ck-color-thread-header-active-background);
 }
 
-.ck .ck-thread--unlinked{
-  --ck-color-comment-box-border:var(--ck-color-base-border);
-  --ck-color-thread-header-background:var(--ck-color-unlinked-background);
-  --ck-color-thread-header-active-background:var(--ck-color-unlinked-active-background);
+.ck .ck-thread--unlinked {
+  --ck-color-comment-box-border: var(--ck-color-base-border);
+  --ck-color-thread-header-background: var(--ck-color-unlinked-background);
+  --ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
 }
 
-.ck.ck-button.ck-confirm-view-submit{
-  color:var(--ck-color-button-save);
+.ck.ck-button.ck-confirm-view-submit {
+  color: var(--ck-color-button-save);
 }
 
-.ck.ck-button.ck-confirm-view-cancel{
-  color:var(--ck-color-button-cancel);
+.ck.ck-button.ck-confirm-view-cancel {
+  color: var(--ck-color-button-cancel);
 }
 
-.ck .ck-comment__input-container{
-  --ck-user-avatar-size:28px;
-  font-size:var(--ck-font-size-base);
-  padding:var(--ck-spacing-standard);
-  background:var(--ck-color-comment-background);
-  display:none;
+.ck .ck-comment__input-container {
+  --ck-user-avatar-size: 28px;
+  font-size: var(--ck-font-size-base);
+  padding: var(--ck-spacing-standard);
+  background: var(--ck-color-comment-background);
+  display: none;
 }
 
-.ck .ck-comment__input-container--active{
-  display:flex;
+.ck .ck-comment__input-container--active {
+  display: flex;
 }
 
-.ck .ck-comment__input{
-  padding:var(--ck-spacing-standard);
-  padding-top:var(--ck-spacing-medium);
-  color:var(--ck-color-base-text);
-  resize:none;
-  background-color:#0000;
-  border-width:0;
-  transition:color .3s ease-in-out;
+.ck .ck-comment__input {
+  padding: var(--ck-spacing-standard);
+  padding-top: var(--ck-spacing-medium);
+  color: var(--ck-color-base-text);
+  resize: none;
+  background-color: #0000;
+  border-width: 0;
+  transition: color .3s ease-in-out;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-comment__input{
-    transition:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-comment__input {
+    transition: none;
   }
 }
 
-.ck .ck-comment__input:focus{
-  outline:none;
+.ck .ck-comment__input:focus {
+  outline: none;
 }
 
-.ck .ck-comment__input .ck-editor__editable_inline{
-  --ck-focus-ring:none;
-  --ck-inner-shadow:none;
-  font-family:var(--ck-comment-content-font-family);
-  font-size:var(--ck-comment-content-font-size);
-  color:var(--ck-comment-content-font-color);
-  word-break:normal;
-  overflow-wrap:anywhere;
-  background-color:#0000;
-  border:0;
-  padding:0;
-  overflow:visible;
+.ck .ck-comment__input .ck-editor__editable_inline {
+  --ck-focus-ring: none;
+  --ck-inner-shadow: none;
+  font-family: var(--ck-comment-content-font-family);
+  font-size: var(--ck-comment-content-font-size);
+  color: var(--ck-comment-content-font-color);
+  word-break: normal;
+  overflow-wrap: anywhere;
+  background-color: #0000;
+  border: 0;
+  padding: 0;
+  overflow: visible;
 }
 
-.ck-comment__input-wrapper .ck.ck-editor__editable_inline :first-child{
-  margin-top:0;
+.ck-comment__input-wrapper .ck.ck-editor__editable_inline :first-child {
+  margin-top: 0;
 }
 
-.ck-comment__input-wrapper .ck.ck-editor__editable_inline :last-child{
-  margin-bottom:0;
+.ck-comment__input-wrapper .ck.ck-editor__editable_inline :last-child {
+  margin-bottom: 0;
 }
 
-.ck .ck-comment__input-actions{
-  text-align:right;
-  width:100%;
-  display:none;
+.ck .ck-comment__input-actions {
+  text-align: right;
+  width: 100%;
+  display: none;
 }
 
-.ck .ck-comment__input-actions.ck-comment__input-actions--active{
-  display:block;
+.ck .ck-comment__input-actions.ck-comment__input-actions--active {
+  display: block;
 }
 
-.ck .ck-comment__input-actions .ck.ck-button{
-  cursor:pointer;
-  min-height:var(--ck-ui-component-min-height);
-  min-width:60px;
-  font-size:var(--ck-annotation-button-size);
-  margin-left:var(--ck-spacing-large);
-  padding:0 var(--ck-spacing-medium);
-  justify-content:center;
-  align-items:center;
-  display:inline-flex;
+.ck .ck-comment__input-actions .ck.ck-button {
+  cursor: pointer;
+  min-height: var(--ck-ui-component-min-height);
+  min-width: 60px;
+  font-size: var(--ck-annotation-button-size);
+  margin-left: var(--ck-spacing-large);
+  padding: 0 var(--ck-spacing-medium);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
 }
 
-.ck .ck-comment__input-actions .ck-button.ck-disabled{
-  opacity:.3;
+.ck .ck-comment__input-actions .ck-button.ck-disabled {
+  opacity: .3;
 }
 
-.ck .ck-comment__input-textarea{
-  display:block;
+.ck .ck-comment__input-textarea {
+  display: block;
 }
 
-:root{
-  --ck-inline-annotation-container-width:300px;
-  --ck-inline-annotation-container-max-height:400px;
+:root {
+  --ck-inline-annotation-container-width: 300px;
+  --ck-inline-annotation-container-max-height: 400px;
 }
 
-.ck.ck-balloon-panel .ck-annotation-wrapper{
-  width:var(--ck-inline-annotation-container-width);
-  max-height:var(--ck-inline-annotation-container-max-height);
-  overscroll-behavior-y:contain;
-  position:static;
-  overflow:hidden auto;
+.ck.ck-balloon-panel .ck-annotation-wrapper {
+  width: var(--ck-inline-annotation-container-width);
+  max-height: var(--ck-inline-annotation-container-max-height);
+  overscroll-behavior-y: contain;
+  position: static;
+  overflow: hidden auto;
 }
 
-.ck.ck-balloon-panel .ck-annotation{
-  animation:none;
+.ck.ck-balloon-panel .ck-annotation {
+  animation: none;
 }
 
-.ck.ck-balloon-panel .ck-annotation-wrapper *{
-  white-space:normal;
+.ck.ck-balloon-panel .ck-annotation-wrapper * {
+  white-space: normal;
 }
 
-.ck.ck-balloon-panel .ck-annotation-wrapper strong{
-  font-weight:bold;
+.ck.ck-balloon-panel .ck-annotation-wrapper strong {
+  font-weight: bold;
 }
 
-.ck.ck-balloon-panel .ck-annotation-wrapper i{
-  font-style:italic;
+.ck.ck-balloon-panel .ck-annotation-wrapper i {
+  font-style: italic;
 }
 
-:root{
-  --ck-annotation-counter-icon-size:16px;
-  --ck-annotation-counter-number-size:10px;
-  --ck-color-annotation-counter-comment:#f2de02;
-  --ck-color-annotation-counter-suggestion-insertion:#5ad86b;
-  --ck-color-annotation-counter-suggestion-deletion:#d85a79;
-  --ck-color-annotation-counter-suggestion-format:#5ac1d8;
+:root {
+  --ck-annotation-counter-icon-size: 16px;
+  --ck-annotation-counter-number-size: 10px;
+  --ck-color-annotation-counter-comment: #f2de02;
+  --ck-color-annotation-counter-suggestion-insertion: #5ad86b;
+  --ck-color-annotation-counter-suggestion-deletion: #d85a79;
+  --ck-color-annotation-counter-suggestion-format: #5ac1d8;
 }
 
-.ck.ck-sidebar--narrow .ck-sidebar-item{
-  justify-content:center;
-  display:flex;
+.ck.ck-sidebar--narrow .ck-sidebar-item {
+  justify-content: center;
+  display: flex;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter{
-  font-size:var(--ck-annotation-counter-icon-size);
-  min-height:unset;
-  cursor:pointer;
-  color:gray;
-  padding:0;
+.ck.ck-sidebar--narrow .ck-annotation-counter {
+  font-size: var(--ck-annotation-counter-icon-size);
+  min-height: unset;
+  cursor: pointer;
+  color: gray;
+  padding: 0;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter:hover, .ck.ck-sidebar--narrow .ck-annotation-counter:focus{
-  box-shadow:none;
-  color:#4d4d4d;
-  background:none;
+.ck.ck-sidebar--narrow .ck-annotation-counter:hover, .ck.ck-sidebar--narrow .ck-annotation-counter:focus {
+  box-shadow: none;
+  color: #4d4d4d;
+  background: none;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge{
-  color:#fff;
-  width:16px;
-  height:16px;
-  font-weight:bold;
-  font-size:var(--ck-annotation-counter-number-size);
-  font-family:var(--ck-font-face);
-  text-shadow:-1px 0 2px #454545, 1px 0 2px #454545;
-  z-index:1;
-  background:#333;
-  border-radius:50%;
-  justify-content:center;
-  line-height:16px;
-  display:flex;
-  position:absolute;
-  top:-6px;
-  right:0;
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge {
+  color: #fff;
+  width: 16px;
+  height: 16px;
+  font-weight: bold;
+  font-size: var(--ck-annotation-counter-number-size);
+  font-family: var(--ck-font-face);
+  text-shadow: -1px 0 2px #454545, 1px 0 2px #454545;
+  z-index: 1;
+  background: #333;
+  border-radius: 50%;
+  justify-content: center;
+  line-height: 16px;
+  display: flex;
+  position: absolute;
+  top: -6px;
+  right: 0;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode{
-  line-height:1;
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode {
+  line-height: 1;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion, .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-replace{
-  background:var(--ck-color-annotation-counter-suggestion-insertion);
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion, .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-replace {
+  background: var(--ck-color-annotation-counter-suggestion-insertion);
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion{
-  background:var(--ck-color-annotation-counter-suggestion-deletion);
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion {
+  background: var(--ck-color-annotation-counter-suggestion-deletion);
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format{
-  background:var(--ck-color-annotation-counter-suggestion-format);
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format {
+  background: var(--ck-color-annotation-counter-suggestion-format);
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment{
-  background:var(--ck-color-annotation-counter-comment);
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment {
+  background: var(--ck-color-annotation-counter-comment);
 }
 
-:root{
-  --ck-color-annotation-icon:gray;
-  --ck-color-annotation-info:#757575;
-  --ck-annotation-button-size:.85em;
+:root {
+  --ck-color-annotation-icon: gray;
+  --ck-color-annotation-info: #757575;
+  --ck-annotation-button-size: .85em;
 }
 
-.ck .ck-annotation{
-  --ck-user-avatar-size:28px;
-  font-size:var(--ck-font-size-base);
-  padding:var(--ck-spacing-standard);
-  white-space:normal;
-  transition:background-color .3s;
-  animation:.3s annotationFadeInLeft;
-  display:flex;
-  position:relative;
+.ck .ck-annotation {
+  --ck-user-avatar-size: 28px;
+  font-size: var(--ck-font-size-base);
+  padding: var(--ck-spacing-standard);
+  white-space: normal;
+  transition: background-color .3s;
+  animation: .3s annotationFadeInLeft;
+  display: flex;
+  position: relative;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-annotation{
-    transition:none;
-    animation:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-annotation {
+    transition: none;
+    animation: none;
   }
 }
 
-.ck .ck-annotation .ck-button{
-  min-width:unset;
-  min-height:unset;
-  cursor:pointer;
-  color:var(--ck-color-annotation-icon);
-  border-radius:var(--ck-border-radius);
-  font-size:var(--ck-annotation-button-size);
-  background-color:#0000;
+.ck .ck-annotation .ck-button {
+  min-width: unset;
+  min-height: unset;
+  cursor: pointer;
+  color: var(--ck-color-annotation-icon);
+  border-radius: var(--ck-border-radius);
+  font-size: var(--ck-annotation-button-size);
+  background-color: #0000;
 }
 
-.ck .ck-annotation .ck-user{
-  font-size:.85em;
+.ck .ck-annotation .ck-user {
+  font-size: .85em;
 }
 
-.ck .ck-annotation__main{
-  width:calc(100% - var(--ck-user-avatar-size));
-  border-radius:var(--ck-border-radius);
-  padding-left:var(--ck-spacing-standard);
-  grid-template-columns:minmax(0, 1fr) auto;
-  grid-template-areas:"info actions" "content content";
-  transition:all .2s;
-  display:grid;
+.ck .ck-annotation__main {
+  width: calc(100% - var(--ck-user-avatar-size));
+  border-radius: var(--ck-border-radius);
+  padding-left: var(--ck-spacing-standard);
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: "info actions"
+                       "content content";
+  transition: all .2s;
+  display: grid;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-annotation__main{
-    transition:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-annotation__main {
+    transition: none;
   }
 }
 
-.ck .ck-annotation__main p{
-  white-space:normal;
-  font-size:var(--ck-comment-content-font-size);
-  margin:0;
-  line-height:1.5em;
+.ck .ck-annotation__main p {
+  white-space: normal;
+  font-size: var(--ck-comment-content-font-size);
+  margin: 0;
+  line-height: 1.5em;
 }
 
-.ck .ck-annotation__user{
-  margin-top:var(--ck-spacing-small);
+.ck .ck-annotation__user {
+  margin-top: var(--ck-spacing-small);
 }
 
-.ck .ck-annotation__info{
-  color:var(--ck-color-annotation-info);
-  grid-area:info;
-  align-items:center;
-  min-height:2.4em;
-  display:flex;
+.ck .ck-annotation__info {
+  color: var(--ck-color-annotation-info);
+  grid-area: info;
+  align-items: center;
+  min-height: 2.4em;
+  display: flex;
 }
 
-.ck .ck-annotation__info-name, .ck .ck-annotation__info-time{
-  white-space:nowrap;
-  color:var(--ck-color-annotation-info);
-  font-weight:bold;
-  font-size:var(--ck-font-size-small);
-  overflow:hidden;
+.ck .ck-annotation__info-name, .ck .ck-annotation__info-time {
+  white-space: nowrap;
+  color: var(--ck-color-annotation-info);
+  font-weight: bold;
+  font-size: var(--ck-font-size-small);
+  overflow: hidden;
 }
 
-.ck .ck-annotation__info-name{
-  text-overflow:ellipsis;
+.ck .ck-annotation__info-name {
+  text-overflow: ellipsis;
 }
 
-.ck .ck-annotation__info-time{
-  margin:0 var(--ck-spacing-large);
-  flex:none;
+.ck .ck-annotation__info-time {
+  margin: 0 var(--ck-spacing-large);
+  flex: none;
 }
 
-.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name, .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-time{
-  white-space:nowrap;
+.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name, .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-time {
+  white-space: nowrap;
 }
 
-.ck .ck-annotation__actions{
-  opacity:.5;
-  grid-area:actions;
-  transition:opacity .2s;
+.ck .ck-annotation__actions {
+  opacity: .5;
+  grid-area: actions;
+  transition: opacity .2s;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-annotation__actions{
-    transition:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-annotation__actions {
+    transition: none;
   }
 }
 
-.ck .ck-annotation__content-wrapper{
-  grid-area:content;
-  width:100%;
+.ck .ck-annotation__content-wrapper {
+  grid-area: content;
+  width: 100%;
 }
 
-@keyframes annotationFadeInLeft{
-  from{
-    opacity:0;
-    transform:translate3d(-5%, 0, 0);
+@keyframes annotationFadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-5%, 0, 0);
   }
 
-  to{
-    opacity:1;
-    transform:translate3d(0, 0, 0);
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
 }
 
-:root{
-  --ck-color-annotation-wrapper-background:#fff;
-  --ck-color-annotation-wrapper-drop-shadow:0 1px 1px 1px #e6e6e6;
+:root {
+  --ck-color-annotation-wrapper-background: #fff;
+  --ck-color-annotation-wrapper-drop-shadow: 0 1px 1px 1px #e6e6e6;
 }
 
-.ck.ck-sidebar{
-  outline:0;
-  transition:min-height .25s;
-  position:relative;
+.ck.ck-sidebar {
+  outline: 0;
+  transition: min-height .25s;
+  position: relative;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck.ck-sidebar{
-    transition:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck.ck-sidebar {
+    transition: none;
   }
 }
 
-.ck-sidebar-item{
-  width:100%;
-  transition:top .3s, box-shadow .3s;
-  position:absolute;
+.ck-sidebar-item {
+  width: 100%;
+  transition: top .3s, box-shadow .3s;
+  position: absolute;
 }
 
-@media (prefers-reduced-motion: reduce){
-  .ck-sidebar-item{
-    transition:none;
+@media (prefers-reduced-motion: reduce) {
+  .ck-sidebar-item {
+    transition: none;
   }
 }
 
-.ck-sidebar-item--no-animation{
-  transition:top !important;
+.ck-sidebar-item--no-animation {
+  transition: top !important;
 }
 
-.ck.ck-annotation-wrapper{
-  border-radius:var(--ck-border-radius);
-  background:var(--ck-color-annotation-wrapper-background);
-  box-shadow:var(--ck-color-annotation-wrapper-drop-shadow);
-  outline:0;
+.ck.ck-annotation-wrapper {
+  border-radius: var(--ck-border-radius);
+  background: var(--ck-color-annotation-wrapper-background);
+  box-shadow: var(--ck-color-annotation-wrapper-drop-shadow);
+  outline: 0;
 }
 
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions{
-  opacity:1;
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions {
+  opacity: 1;
 }
 
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions .ck-comment--resolve{
-  color:var(--ck-color-button-save);
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions .ck-comment--resolve {
+  color: var(--ck-color-button-save);
 }
 
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--accept{
-  color:var(--ck-color-button-save);
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--accept {
+  color: var(--ck-color-button-save);
 }
 
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--discard{
-  color:var(--ck-color-button-cancel);
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--discard {
+  color: var(--ck-color-button-cancel);
 }
 
-.ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover{
-  box-shadow:var(--ck-drop-shadow);
+.ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover {
+  box-shadow: var(--ck-drop-shadow);
 }
 
-.ck.ck-annotation-wrapper--active{
-  box-shadow:var(--ck-drop-shadow-active);
+.ck.ck-annotation-wrapper--active {
+  box-shadow: var(--ck-drop-shadow-active);
 }
 
-.ck .ck-comments-archive-dropdown.ck-dropdown__panel{
-  z-index:var(--ck-z-panel);
+.ck .ck-comments-archive-dropdown.ck-dropdown__panel {
+  z-index: var(--ck-z-panel);
 }
 
-.ck .ck-comments-archive{
-  box-sizing:content-box;
-  width:400px;
-  max-height:450px;
+.ck .ck-comments-archive {
+  box-sizing: content-box;
+  width: 400px;
+  max-height: 450px;
 }
 
-.ck .ck-comments-archive .ck-annotation{
-  animation:none;
+.ck .ck-comments-archive .ck-annotation {
+  animation: none;
 }
 
-.ck .ck-comments-archive .ck-comments-archive__header, .ck .ck-comments-archive .ck-comments-archive__content{
-  max-height:410px;
-  padding:var(--ck-spacing-large);
-  overflow:auto;
+.ck .ck-comments-archive .ck-comments-archive__header, .ck .ck-comments-archive .ck-comments-archive__content {
+  max-height: 410px;
+  padding: var(--ck-spacing-large);
+  overflow: auto;
 }
 
-.ck .ck-comments-archive .ck-comments-archive__header{
-  max-height:40px;
-  line-height:var(--ck-font-size-base);
-  border-bottom:1px solid var(--ck-color-toolbar-border);
-  font-weight:bold;
+.ck .ck-comments-archive .ck-comments-archive__header {
+  max-height: 40px;
+  line-height: var(--ck-font-size-base);
+  border-bottom: 1px solid var(--ck-color-toolbar-border);
+  font-weight: bold;
 }
 
-.ck .ck-comments-archive .ck-comments-archive__content .ck-annotation-wrapper:not(:last-child){
-  margin-bottom:var(--ck-spacing-large);
+.ck .ck-comments-archive .ck-comments-archive__content .ck-annotation-wrapper:not(:last-child) {
+  margin-bottom: var(--ck-spacing-large);
 }
 
-.ck .ck-comments-archive .ck-comments-archive__info{
-  text-align:center;
-  color:var(--ck-color-annotation-info);
-  font-style:italic;
-}
-
-:root{
-  --ck-color-comment-marker:#fef7a9;
-  --ck-color-comment-marker-active:#fdf05d;
+.ck .ck-comments-archive .ck-comments-archive__info {
+  text-align: center;
+  color: var(--ck-color-annotation-info);
+  font-style: italic;
 }