@ckeditor/ckeditor5-widget 48.8.1-alpha.4 → 49.0.0-alpha.1

package/dist/index-editor.css

@@ -2,547 +2,555 @@
  * @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-widget-outline-thickness:3px;
-  --ck-widget-handler-icon-size:16px;
-  --ck-widget-handler-animation-duration:.2s;
-  --ck-widget-handler-animation-curve:ease;
-  --ck-color-widget-blurred-border:#dedede;
-  --ck-color-widget-hover-border:#ffc83d;
-  --ck-color-widget-editable-focus-background:var(--ck-color-base-background);
-  --ck-color-widget-drag-handler-icon-color:var(--ck-color-base-background);
-  --ck-color-resizer:var(--ck-color-focus-border);
-  --ck-color-resizer-tooltip-background:#262626;
-  --ck-color-resizer-tooltip-text:#f2f2f2;
-  --ck-resizer-border-radius:var(--ck-border-radius);
-  --ck-resizer-tooltip-offset:10px;
-  --ck-resizer-tooltip-height:calc(var(--ck-spacing-small) * 2 + 10px);
-}
-
-.ck .ck-widget{
-  outline-width:var(--ck-widget-outline-thickness);
-  transition:outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
-  outline-style:solid;
-  outline-color:#0000;
-}
+:root, :host {
+  --ck-widget-outline-thickness: 3px;
+  --ck-widget-handler-icon-size: 16px;
+  --ck-widget-handler-animation-duration: var(--ck-duration-base);
+  --ck-widget-handler-animation-curve: var(--ck-ease-standard);
+  --ck-color-widget-blurred-border: var(--ck-color-base-border-light);
+  --ck-color-widget-hover-border: var(--ck-color-base-attention);
+  --ck-color-widget-editable-focus-background: var(--ck-color-base-background);
+  --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
+  --ck-color-resizer: var(--ck-color-focus-border, var(--ck-color-interactive-focus-border));
+  --ck-color-resizer-tooltip-background: var(--ck-color-surface-inverse);
+  --ck-color-resizer-tooltip-text: var(--ck-color-text-inverse);
+  --ck-resizer-border-radius: var(--ck-border-radius, var(--ck-radius-base));
+  --ck-resizer-tooltip-offset: 10px;
+  --ck-resizer-tooltip-height: calc(var(--ck-spacing-small, var(--ck-spacing-sm)) * 2 + 10px);
+  --ck-widget-label-border-radius: 0 0 var(--ck-radius-sm) var(--ck-radius-sm);
+  --ck-widget-selection-handle-border-radius: var(--ck-radius-sm) var(--ck-radius-sm) 0 0;
+}
+
+.ck .ck-widget {
+  outline-width: var(--ck-widget-outline-thickness);
+  transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
+  outline-style: solid;
+  outline-color: #0000;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-widget{
-    transition:none;
+  &.ck-widget_selected, &.ck-widget_selected:hover {
+    outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border, var(--ck-color-interactive-focus-border));
   }
-}
 
-.ck .ck-widget.ck-widget_selected, .ck .ck-widget.ck-widget_selected:hover{
-  outline:var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
-}
+  &:hover {
+    outline-color: var(--ck-color-widget-hover-border);
+  }
 
-.ck .ck-widget:hover{
-  outline-color:var(--ck-color-widget-hover-border);
+  position: relative;
 }
 
-.ck .ck-widget{
-  position:relative;
-}
+.ck .ck-editor__nested-editable {
+  border: 1px solid #0000;
 
-.ck .ck-editor__nested-editable{
-  border:1px solid #0000;
-}
+  &.ck-editor__nested-editable_focused, &:focus {
+    box-shadow: var(--ck-inner-shadow, var(--ck-inset-shadow-sm)), 0 0;
 
-.ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus{
-  box-shadow:var(--ck-inner-shadow), 0 0;
-}
+    @media (forced-colors: none) {
+      background-color: var(--ck-color-widget-editable-focus-background);
+    }
 
-@media (forced-colors: none){
-  .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus{
-    background-color:var(--ck-color-widget-editable-focus-background);
+    &:not(td, th) {
+      border: var(--ck-focus-ring);
+      outline: none;
+    }
   }
 }
 
-:is(.ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus):not(td, th){
-  border:var(--ck-focus-ring);
-  outline:none;
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle{
-  box-sizing:border-box;
-  opacity:0;
-  transition:background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
-  border-radius:var(--ck-border-radius) var(--ck-border-radius) 0 0;
-  left:calc(0px - var(--ck-widget-outline-thickness));
-  background-color:#0000;
-  padding:4px;
-  top:0;
-  transform:translateY(-100%);
-}
-
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle{
-    transition:none;
+.ck .ck-widget.ck-widget_with-selection-handle {
+  & .ck-widget__selection-handle {
+    box-sizing: border-box;
+    opacity: 0;
+    transition: background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
+			visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
+			opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
+    border-radius: var(--ck-widget-selection-handle-border-radius);
+    left: calc(0px - var(--ck-widget-outline-thickness));
+    background-color: #0000;
+    padding: 4px;
+    top: 0;
+    transform: translateY(-100%);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    & .ck-icon {
+      width: var(--ck-widget-handler-icon-size);
+      height: var(--ck-widget-handler-icon-size);
+      color: var(--ck-color-widget-drag-handler-icon-color);
+
+      & .ck-icon__selected-indicator {
+        opacity: 0;
+        transition: opacity .3s var(--ck-widget-handler-animation-curve);
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
+
+      display: block;
+    }
+
+    &:hover .ck-icon .ck-icon__selected-indicator {
+      opacity: 1;
+    }
+
+    position: absolute;
   }
-}
 
-.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon{
-  width:var(--ck-widget-handler-icon-size);
-  height:var(--ck-widget-handler-icon-size);
-  color:var(--ck-color-widget-drag-handler-icon-color);
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator{
-  opacity:0;
-  transition:opacity .3s var(--ck-widget-handler-animation-curve);
-}
-
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator{
-    transition:none;
+  &:hover > .ck-widget__selection-handle {
+    opacity: 1;
+    background-color: var(--ck-color-widget-hover-border);
+    visibility: visible;
   }
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon{
-  display:block;
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover .ck-icon .ck-icon__selected-indicator{
-  opacity:1;
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle{
-  position:absolute;
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle{
-  opacity:1;
-  background-color:var(--ck-color-widget-hover-border);
-  visibility:visible;
-}
-
-:is(.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover) > .ck-widget__selection-handle{
-  opacity:1;
-  background-color:var(--ck-color-focus-border);
-  visibility:visible;
-}
-
-:is(.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover) > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator{
-  opacity:1;
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle{
-  position:relative;
-}
-
-.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle{
-  left:auto;
-  right:calc(0px - var(--ck-widget-outline-thickness));
-}
-
-.ck.ck-editor__editable.ck-read-only .ck-widget{
-  transition:none;
-}
-
-.ck.ck-editor__editable.ck-read-only .ck-widget:not(.ck-widget_selected){
-  --ck-widget-outline-thickness:0px;
-}
-
-.ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle, .ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover{
-  background:var(--ck-color-widget-blurred-border);
-}
-
-.ck .ck-widget:has(.ck-widget.table:hover){
-  outline-color:#0000;
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle:has(.ck-widget.table:hover) > .ck-widget__selection-handle{
-  opacity:0;
-  visibility:hidden;
-}
-
-.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover{
-  outline-color:var(--ck-color-widget-blurred-border);
-}
-
-:is(.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover).ck-widget_with-selection-handle > .ck-widget__selection-handle, :is(.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover).ck-widget_with-selection-handle > .ck-widget__selection-handle:hover{
-  background:var(--ck-color-widget-blurred-border);
-}
-
-.ck.ck-editor__editable:not(.ck-pagination-view) > .ck-widget.ck-widget_with-selection-handle:first-child, .ck.ck-editor__editable:not(.ck-pagination-view) blockquote > .ck-widget.ck-widget_with-selection-handle:first-child{
-  margin-top:calc(1em + var(--ck-widget-handler-icon-size));
-}
-
-.ck .ck-size-view{
-  background:var(--ck-color-resizer-tooltip-background);
-  color:var(--ck-color-resizer-tooltip-text);
-  border:1px solid var(--ck-color-resizer-tooltip-text);
-  border-radius:var(--ck-resizer-border-radius);
-  font-size:var(--ck-font-size-tiny);
-  padding:0 var(--ck-spacing-small);
-  height:var(--ck-resizer-tooltip-height);
-  line-height:var(--ck-resizer-tooltip-height);
-  display:block;
-}
-
-.ck .ck-size-view.ck-orientation-top-left, .ck .ck-size-view.ck-orientation-top-right, .ck .ck-size-view.ck-orientation-bottom-right, .ck .ck-size-view.ck-orientation-bottom-left, .ck .ck-size-view.ck-orientation-above-center{
-  position:absolute;
-}
-
-.ck .ck-size-view.ck-orientation-top-left{
-  top:var(--ck-resizer-tooltip-offset);
-  left:var(--ck-resizer-tooltip-offset);
-}
-
-.ck .ck-size-view.ck-orientation-top-right{
-  top:var(--ck-resizer-tooltip-offset);
-  right:var(--ck-resizer-tooltip-offset);
-}
-
-.ck .ck-size-view.ck-orientation-bottom-right{
-  bottom:var(--ck-resizer-tooltip-offset);
-  right:var(--ck-resizer-tooltip-offset);
-}
 
-.ck .ck-size-view.ck-orientation-bottom-left{
-  bottom:var(--ck-resizer-tooltip-offset);
-  left:var(--ck-resizer-tooltip-offset);
-}
-
-.ck .ck-size-view.ck-orientation-above-center{
-  top:calc(var(--ck-resizer-tooltip-height) * -1);
-  left:50%;
-  transform:translate(-50%);
-}
+  &.ck-widget_selected, &.ck-widget_selected:hover {
+    & > .ck-widget__selection-handle {
+      opacity: 1;
+      background-color: var(--ck-color-focus-border, var(--ck-color-interactive-focus-border));
+      visibility: visible;
 
-:root{
-  --ck-resizer-size:10px;
-  --ck-resizer-offset:calc(( var(--ck-resizer-size) / -2) - 2px);
-  --ck-resizer-border-width:1px;
-}
+      & .ck-icon .ck-icon__selected-indicator {
+        opacity: 1;
+      }
+    }
+  }
 
-.ck .ck-widget__resizer{
-  outline:1px solid var(--ck-color-resizer);
-  pointer-events:none;
-  display:none;
-  position:absolute;
-  top:0;
-  left:0;
+  position: relative;
 }
 
-.ck .ck-widget__resizer__handle{
-  width:var(--ck-resizer-size);
-  height:var(--ck-resizer-size);
-  background:var(--ck-color-focus-border);
-  border:var(--ck-resizer-border-width) solid #fff;
-  border-radius:var(--ck-resizer-border-radius);
-  pointer-events:all;
-  position:absolute;
+.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
+  left: auto;
+  right: calc(0px - var(--ck-widget-outline-thickness));
 }
 
-.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left{
-  top:var(--ck-resizer-offset);
-  left:var(--ck-resizer-offset);
-}
+.ck.ck-editor__editable.ck-read-only .ck-widget {
+  transition: none;
 
-.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right{
-  top:var(--ck-resizer-offset);
-  right:var(--ck-resizer-offset);
-}
+  &:not(.ck-widget_selected) {
+    --ck-widget-outline-thickness: 0px;
+  }
 
-.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right{
-  bottom:var(--ck-resizer-offset);
-  right:var(--ck-resizer-offset);
+  &.ck-widget_with-selection-handle {
+    & .ck-widget__selection-handle, & .ck-widget__selection-handle:hover {
+      background: var(--ck-color-widget-blurred-border);
+    }
+  }
 }
 
-.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left{
-  bottom:var(--ck-resizer-offset);
-  left:var(--ck-resizer-offset);
+.ck .ck-widget:has(.ck-widget.table:hover) {
+  outline-color: #0000;
 }
 
-.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left, .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right{
-  cursor:nwse-resize;
+.ck .ck-widget.ck-widget_with-selection-handle:has(.ck-widget.table:hover) > .ck-widget__selection-handle {
+  opacity: 0;
+  visibility: hidden;
 }
 
-.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right, .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left{
-  cursor:nesw-resize;
-}
+.ck.ck-editor__editable.ck-blurred .ck-widget {
+  &.ck-widget_selected, &.ck-widget_selected:hover {
+    outline-color: var(--ck-color-widget-blurred-border);
 
-.ck .ck-widget_with-resizer{
-  position:relative;
+    &.ck-widget_with-selection-handle {
+      & > .ck-widget__selection-handle, & > .ck-widget__selection-handle:hover {
+        background: var(--ck-color-widget-blurred-border);
+      }
+    }
+  }
 }
 
-.ck-focused .ck-widget_with-resizer.ck-widget_selected > .ck-widget__resizer{
-  display:block;
+.ck.ck-editor__editable:not(.ck-pagination-view) > .ck-widget.ck-widget_with-selection-handle:first-child, .ck.ck-editor__editable:not(.ck-pagination-view) blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
+  margin-top: calc(1em + var(--ck-widget-handler-icon-size));
 }
 
-:root{
-  --ck-widget-type-around-button-size:20px;
-  --ck-color-widget-type-around-button-active:var(--ck-color-focus-border);
-  --ck-color-widget-type-around-button-hover:var(--ck-color-widget-hover-border);
-  --ck-color-widget-type-around-button-blurred-editable:var(--ck-color-widget-blurred-border);
-  --ck-color-widget-type-around-button-radar-start-alpha:0;
-  --ck-color-widget-type-around-button-radar-end-alpha:.3;
-  --ck-color-widget-type-around-button-icon:var(--ck-color-base-background);
-}
+.ck .ck-size-view {
+  background: var(--ck-color-resizer-tooltip-background);
+  color: var(--ck-color-resizer-tooltip-text);
+  border: 1px solid var(--ck-color-resizer-tooltip-text);
+  border-radius: var(--ck-resizer-border-radius);
+  font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
+  padding: 0 var(--ck-spacing-small, var(--ck-spacing-sm));
+  height: var(--ck-resizer-tooltip-height);
+  line-height: var(--ck-resizer-tooltip-height);
+  display: block;
 
-.ck .ck-widget .ck-widget__type-around__button{
-  width:var(--ck-widget-type-around-button-size);
-  height:var(--ck-widget-type-around-button-size);
-  background:var(--ck-color-widget-type-around-button);
-  transition:opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
-  opacity:0;
-  pointer-events:none;
-  z-index:var(--ck-z-default);
-  border-radius:100px;
-  display:block;
-  position:absolute;
-  overflow:hidden;
-}
+  &.ck-orientation-top-left, &.ck-orientation-top-right, &.ck-orientation-bottom-right, &.ck-orientation-bottom-left, &.ck-orientation-above-center {
+    position: absolute;
+  }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-widget .ck-widget__type-around__button{
-    transition:none;
+  &.ck-orientation-top-left {
+    top: var(--ck-resizer-tooltip-offset);
+    left: var(--ck-resizer-tooltip-offset);
   }
-}
 
-.ck .ck-widget .ck-widget__type-around__button svg{
-  width:10px;
-  height:8px;
-  margin-top:1px;
-  transition:transform .5s;
-  position:absolute;
-  top:50%;
-  left:50%;
-  transform:translate(-50%, -50%);
-}
+  &.ck-orientation-top-right {
+    top: var(--ck-resizer-tooltip-offset);
+    right: var(--ck-resizer-tooltip-offset);
+  }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-widget .ck-widget__type-around__button svg{
-    transition:none;
+  &.ck-orientation-bottom-right {
+    bottom: var(--ck-resizer-tooltip-offset);
+    right: var(--ck-resizer-tooltip-offset);
   }
-}
 
-.ck .ck-widget .ck-widget__type-around__button svg *{
-  stroke-dasharray:10;
-  stroke-dashoffset:0;
-  fill:none;
-  stroke:var(--ck-color-widget-type-around-button-icon);
-  stroke-width:1.5px;
-  stroke-linecap:round;
-  stroke-linejoin:round;
-}
+  &.ck-orientation-bottom-left {
+    bottom: var(--ck-resizer-tooltip-offset);
+    left: var(--ck-resizer-tooltip-offset);
+  }
 
-.ck .ck-widget .ck-widget__type-around__button svg line{
-  stroke-dasharray:7;
+  &.ck-orientation-above-center {
+    top: calc(var(--ck-resizer-tooltip-height) * -1);
+    left: 50%;
+    transform: translate(-50%);
+  }
 }
 
-.ck .ck-widget .ck-widget__type-around__button svg{
-  z-index:calc(var(--ck-z-default) + 2);
+:root, :host {
+  --ck-resizer-size: 10px;
+  --ck-resizer-offset: calc(( var(--ck-resizer-size) / -2 ) - 2px);
+  --ck-resizer-border-width: 1px;
 }
 
-.ck .ck-widget .ck-widget__type-around__button:hover{
-  animation:1s infinite ck-widget-type-around-button-sonar;
+.ck .ck-widget__resizer {
+  outline: 1px solid var(--ck-color-resizer);
+  pointer-events: none;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.ck .ck-widget .ck-widget__type-around__button:hover svg polyline{
-  animation:2s linear ck-widget-type-around-arrow-dash;
-}
+.ck .ck-widget__resizer__handle {
+  width: var(--ck-resizer-size);
+  height: var(--ck-resizer-size);
+  background: var(--ck-color-focus-border, var(--ck-color-interactive-focus-border));
+  border: var(--ck-resizer-border-width) solid var(--ck-color-base-background);
+  border-radius: var(--ck-resizer-border-radius);
+  pointer-events: all;
+  position: absolute;
 
-.ck .ck-widget .ck-widget__type-around__button:hover svg line{
-  animation:2s linear ck-widget-type-around-arrow-tip-dash;
-}
+  &.ck-widget__resizer__handle-top-left {
+    top: var(--ck-resizer-offset);
+    left: var(--ck-resizer-offset);
+  }
 
-@media (prefers-reduced-motion: reduce){
-  .ck .ck-widget .ck-widget__type-around__button:hover{
-    animation:none;
+  &.ck-widget__resizer__handle-top-right {
+    top: var(--ck-resizer-offset);
+    right: var(--ck-resizer-offset);
   }
 
-  .ck .ck-widget .ck-widget__type-around__button:hover svg polyline, .ck .ck-widget .ck-widget__type-around__button:hover svg line{
-    animation:none;
+  &.ck-widget__resizer__handle-bottom-right {
+    bottom: var(--ck-resizer-offset);
+    right: var(--ck-resizer-offset);
   }
-}
 
-.ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_before{
-  top:calc(-.5 * var(--ck-widget-outline-thickness));
-  left:min(10%, 30px);
-  transform:translateY(-50%);
-}
+  &.ck-widget__resizer__handle-bottom-left {
+    bottom: var(--ck-resizer-offset);
+    left: var(--ck-resizer-offset);
+  }
 
-.ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_after{
-  bottom:calc(-.5 * var(--ck-widget-outline-thickness));
-  right:min(10%, 30px);
-  transform:translateY(50%);
-}
+  &.ck-widget__resizer__handle-top-left, &.ck-widget__resizer__handle-bottom-right {
+    cursor: nwse-resize;
+  }
 
-.ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button{
-  opacity:1;
-  pointer-events:auto;
+  &.ck-widget__resizer__handle-top-right, &.ck-widget__resizer__handle-bottom-left {
+    cursor: nesw-resize;
+  }
 }
 
-.ck .ck-widget:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button{
-  background:var(--ck-color-widget-type-around-button-hover);
+.ck .ck-widget_with-resizer {
+  position: relative;
 }
 
-.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover{
-  background:var(--ck-color-widget-type-around-button-active);
+.ck-focused .ck-widget_with-resizer.ck-widget_selected {
+  & > .ck-widget__resizer {
+    display: block;
+  }
 }
 
-:is(.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover):after{
-  width:calc(var(--ck-widget-type-around-button-size) - 2px);
-  height:calc(var(--ck-widget-type-around-button-size) - 2px);
-  content:"";
-  z-index:calc(var(--ck-z-default) + 1);
-  background:linear-gradient(135deg, #fff0 0%, #ffffff4d 100%);
-  border-radius:100px;
-  display:block;
-  position:absolute;
-  top:1px;
-  left:1px;
-}
+:root, :host {
+  --ck-widget-type-around-button-size: 20px;
+  --ck-widget-type-around-button-border-radius: 100px;
+  --ck-color-widget-type-around-button-active: var(--ck-color-focus-border, var(--ck-color-interactive-focus-border));
+  --ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
+  --ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
+  --ck-color-widget-type-around-button-radar-start-alpha: 0;
+  --ck-color-widget-type-around-button-radar-end-alpha: .3;
+  --ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
+}
+
+.ck .ck-widget {
+  & .ck-widget__type-around__button {
+    width: var(--ck-widget-type-around-button-size);
+    height: var(--ck-widget-type-around-button-size);
+    background: var(--ck-color-widget-type-around-button);
+    border-radius: var(--ck-widget-type-around-button-border-radius);
+    transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
+    opacity: 0;
+    pointer-events: none;
+    z-index: var(--ck-z-default, var(--ck-z-base));
+    display: block;
+    position: absolute;
+    overflow: hidden;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    & svg {
+      width: 10px;
+      height: 8px;
+      margin-top: 1px;
+      transition: transform .5s;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      & * {
+        stroke-dasharray: 10;
+        stroke-dashoffset: 0;
+        fill: none;
+        stroke: var(--ck-color-widget-type-around-button-icon);
+        stroke-width: 1.5px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      & line {
+        stroke-dasharray: 7;
+      }
+
+      z-index: calc(var(--ck-z-default, var(--ck-z-base)) + 2);
+    }
+
+    &:hover {
+      animation: 1s infinite ck-widget-type-around-button-sonar;
+
+      & svg {
+        & polyline {
+          animation: 2s linear ck-widget-type-around-arrow-dash;
+        }
+
+        & line {
+          animation: 2s linear ck-widget-type-around-arrow-tip-dash;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+
+        & svg {
+          & polyline, & line {
+            animation: none;
+          }
+        }
+      }
+    }
+
+    &.ck-widget__type-around__button_before {
+      top: calc(-.5 * var(--ck-widget-outline-thickness));
+      left: min(10%, 30px);
+      transform: translateY(-50%);
+    }
+
+    &.ck-widget__type-around__button_after {
+      bottom: calc(-.5 * var(--ck-widget-outline-thickness));
+      right: min(10%, 30px);
+      transform: translateY(50%);
+    }
+  }
 
-.ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after{
-  outline-color:#0000;
-}
+  &:hover {
+    & > .ck-widget__type-around > .ck-widget__type-around__button {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
 
-.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button{
-  opacity:1;
-  pointer-events:auto;
-}
+  &:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button {
+    background: var(--ck-color-widget-type-around-button-hover);
+  }
 
-.ck .ck-widget.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before{
-  margin-left:20px;
-}
+  &.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, & > .ck-widget__type-around > .ck-widget__type-around__button:hover {
+    background: var(--ck-color-widget-type-around-button-active);
+  }
 
-.ck .ck-widget .ck-widget__type-around__fake-caret{
-  pointer-events:none;
-  background:var(--ck-color-base-text);
-  outline:1px solid #ffffff80;
-  height:1px;
-  animation:1s linear infinite forwards ck-widget-type-around-fake-caret-pulse;
-}
+  &.ck-widget_selected {
+    &.ck-widget_type-around_show-fake-caret_before, &.ck-widget_type-around_show-fake-caret_after {
+      outline-color: #0000;
+    }
 
-:is(.ck .ck-widget.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after).ck-widget_selected:hover{
-  outline-color:var(--ck-color-widget-hover-border);
-}
+    & > .ck-widget__type-around > .ck-widget__type-around__button {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
 
-:is(.ck .ck-widget.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after) > .ck-widget__type-around > .ck-widget__type-around__button{
-  opacity:0;
-  pointer-events:none;
-}
+  &.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before {
+    margin-left: 20px;
+  }
 
-:is(:is(.ck .ck-widget.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after).ck-widget_with-selection-handle.ck-widget_selected, :is(.ck .ck-widget.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after).ck-widget_with-selection-handle.ck-widget_selected:hover) > .ck-widget__selection-handle{
-  opacity:0;
-}
+  & .ck-widget__type-around__fake-caret {
+    pointer-events: none;
+    outline: var(--ck-outline-fake-caret);
+    background: var(--ck-color-base-text);
+    height: 1px;
+    animation: 1s linear infinite forwards ck-widget-type-around-fake-caret-pulse;
+  }
 
-:is(.ck .ck-widget.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after).ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer{
-  opacity:0;
-}
+  &.ck-widget_type-around_show-fake-caret_before, &.ck-widget_type-around_show-fake-caret_after {
+    &.ck-widget_selected:hover {
+      outline-color: var(--ck-color-widget-hover-border);
+    }
+
+    & > .ck-widget__type-around > .ck-widget__type-around__button {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &.ck-widget_with-selection-handle {
+      &.ck-widget_selected, &.ck-widget_selected:hover {
+        & > .ck-widget__selection-handle {
+          opacity: 0;
+        }
+      }
+    }
+
+    &.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer {
+      opacity: 0;
+    }
+  }
 
-.ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__fake-caret{
-  display:none;
-  position:absolute;
-  left:0;
-  right:0;
-}
+  & > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
 
-.ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__fake-caret{
-  left:calc(-1 * var(--ck-widget-outline-thickness));
-  right:calc(-1 * var(--ck-widget-outline-thickness));
-}
+  &:hover > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+    left: calc(-1 * var(--ck-widget-outline-thickness));
+    right: calc(-1 * var(--ck-widget-outline-thickness));
+  }
 
-.ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret{
-  top:calc(-1 * var(--ck-widget-outline-thickness) - 1px);
-  display:block;
-}
+  &.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+    top: calc(-1 * var(--ck-widget-outline-thickness) - 1px);
+    display: block;
+  }
 
-.ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret{
-  bottom:calc(-1 * var(--ck-widget-outline-thickness) - 1px);
-  display:block;
+  &.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+    bottom: calc(-1 * var(--ck-widget-outline-thickness) - 1px);
+    display: block;
+  }
 }
 
-.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__type-around > .ck-widget__type-around__button_before{
-  margin-left:0;
-  margin-right:20px;
+.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__type-around > .ck-widget__type-around__button_before {
+  margin-left: 0;
+  margin-right: 20px;
 }
 
-:is(.ck-editor__nested-editable.ck-editor__editable_selected .ck-widget.ck-widget_selected, .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget:hover) > .ck-widget__type-around > .ck-widget__type-around__button{
-  opacity:0;
-  pointer-events:none;
+.ck-editor__nested-editable.ck-editor__editable_selected {
+  & .ck-widget {
+    &.ck-widget_selected, &:hover {
+      & > .ck-widget__type-around > .ck-widget__type-around__button {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+  }
 }
 
-.ck .ck-widget:has(.ck-widget.table:hover) > .ck-widget__type-around > .ck-widget__type-around__button{
-  opacity:0;
-  pointer-events:none;
+.ck .ck-widget:has(.ck-widget.table:hover) {
+  & > .ck-widget__type-around > .ck-widget__type-around__button {
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
-.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover){
-  background:var(--ck-color-widget-type-around-button-blurred-editable);
-}
+.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) {
+  background: var(--ck-color-widget-type-around-button-blurred-editable);
 
-.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) svg *{
-  stroke:#999;
+  & svg * {
+    stroke: var(--ck-color-widget-blurred-border);
+  }
 }
 
-@keyframes ck-widget-type-around-arrow-dash{
-  0%{
-    stroke-dashoffset:10px;
+@keyframes ck-widget-type-around-arrow-dash {
+  0% {
+    stroke-dashoffset: 10px;
   }
 
-  20%, 100%{
-    stroke-dashoffset:0;
+  20%, 100% {
+    stroke-dashoffset: 0;
   }
 }
 
-@keyframes ck-widget-type-around-arrow-tip-dash{
-  0%, 20%{
-    stroke-dashoffset:7px;
+@keyframes ck-widget-type-around-arrow-tip-dash {
+  0%, 20% {
+    stroke-dashoffset: 7px;
   }
 
-  40%, 100%{
-    stroke-dashoffset:0;
+  40%, 100% {
+    stroke-dashoffset: 0;
   }
 }
 
-@keyframes ck-widget-type-around-button-sonar{
-  0%{
-    box-shadow:0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
+@keyframes ck-widget-type-around-button-sonar {
+  0% {
+    box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
   }
 
-  50%{
-    box-shadow:0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha));
+  50% {
+    box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha));
   }
 
-  100%{
-    box-shadow:0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
+  100% {
+    box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
   }
 }
 
-@keyframes ck-widget-type-around-fake-caret-pulse{
-  0%{
-    opacity:1;
+@keyframes ck-widget-type-around-fake-caret-pulse {
+  0% {
+    opacity: 1;
   }
 
-  49%{
-    opacity:1;
+  49% {
+    opacity: 1;
   }
 
-  50%{
-    opacity:0;
+  50% {
+    opacity: 0;
   }
 
-  99%{
-    opacity:0;
+  99% {
+    opacity: 0;
   }
 
-  100%{
-    opacity:1;
+  100% {
+    opacity: 1;
   }
 }
 
-.ck.ck-editor__editable.ck-read-only .ck-widget__type-around, .ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around{
-  display:none;
+.ck.ck-editor__editable.ck-read-only .ck-widget__type-around, .ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around {
+  display: none;
 }
 
-.ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around{
-  display:none;
+.ck.ck-editor__editable.ck-restricted-editing_mode_restricted {
+  & .ck-widget__type-around {
+    display: none;
+  }
+
+  & div.restricted-editing-exception .ck-widget__type-around {
+    display: initial;
+  }
 }
 
-.ck.ck-editor__editable.ck-restricted-editing_mode_restricted div.restricted-editing-exception .ck-widget__type-around{
-  display:initial;
-}
+/*# sourceMappingURL=index-editor.css.map */