@ckeditor/ckeditor5-widget 47.6.1 → 48.0.0-alpha.0

package/dist/index.css

@@ -2,259 +2,551 @@
  * @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
  */
-/*
- * 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-resizer: var(--ck-color-focus-border);
-	--ck-color-resizer-tooltip-background: hsl(0, 0%, 15%);
-	--ck-color-resizer-tooltip-text: hsl(0, 0%, 95%);
+  --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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-widget {
+    transition: none;
+  }
+}
+
+.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);
+}
 
-	--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:hover {
+  outline-color: var(--ck-color-widget-hover-border);
 }
 
 .ck .ck-widget {
-	/* This is neccessary for type around UI to be positioned properly. */
-	position: relative;
+  position: relative;
 }
 
-.ck .ck-widget.ck-widget_with-selection-handle {
-	/* Make the widget wrapper a relative positioning container for the drag handle. */
-	position: relative;
+.ck .ck-editor__nested-editable {
+  border: 1px solid #0000;
+}
+
+.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) {
+  .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);
+  }
+}
+
+: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 {
-		position: absolute;
-	}
+  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 .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;
+  }
+}
 
 .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon {
-			/* Make sure the icon in not a subject to font-size or line-height to avoid
-			unnecessary spacing around it. */
-			display: block;
-		}
+  display: block;
+}
+
+.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover .ck-icon .ck-icon__selected-indicator {
+  opacity: 1;
+}
 
-/* Show the selection handle on mouse hover over the widget, but not for nested widgets. */
+.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 {
-		visibility: visible;
-	}
+  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;
+}
 
-/* Show the selection handle when the widget is selected, but not for nested widgets. */
+: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.ck-widget_selected > .ck-widget__selection-handle {
-		visibility: visible;
-	}
+.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);
-	display: block;
-	padding: 0 var(--ck-spacing-small);
-	height: var(--ck-resizer-tooltip-height);
-	line-height: var(--ck-resizer-tooltip-height);
-}
-
-.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;
-	}
+  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);
-	}
+  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);
-	}
+  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);
-	}
+  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);
-	}
-
-/* Class applied if the widget is too small to contain the size label */
+  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%);
-	}
-
-/*
- * 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
- */
+  top: calc(var(--ck-resizer-tooltip-height) * -1);
+  left: 50%;
+  transform: translate(-50%);
+}
 
-.ck .ck-widget_with-resizer {
-	/* Make the widget wrapper a relative positioning container for the drag handle. */
-	position: relative;
+:root {
+  --ck-resizer-size: 10px;
+  --ck-resizer-offset: calc(( var(--ck-resizer-size) / -2 ) - 2px);
+  --ck-resizer-border-width: 1px;
 }
 
 .ck .ck-widget__resizer {
-	display: none;
-	position: absolute;
+  outline: 1px solid var(--ck-color-resizer);
+  pointer-events: none;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 
-	/* The wrapper itself should not interfere with the pointer device, only the handles should. */
-	pointer-events: none;
+.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;
+}
 
-	left: 0;
-	top: 0;
+.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left {
+  top: var(--ck-resizer-offset);
+  left: var(--ck-resizer-offset);
 }
 
-.ck-focused .ck-widget_with-resizer.ck-widget_selected > .ck-widget__resizer {
-		display: block;
-	}
+.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right {
+  top: var(--ck-resizer-offset);
+  right: var(--ck-resizer-offset);
+}
 
-.ck .ck-widget__resizer__handle {
-	position: absolute;
+.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right {
+  bottom: var(--ck-resizer-offset);
+  right: var(--ck-resizer-offset);
+}
 
-	/* Resizers are the only UI elements that should interfere with a pointer device. */
-	pointer-events: all;
+.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left {
+  bottom: var(--ck-resizer-offset);
+  left: var(--ck-resizer-offset);
 }
 
-.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__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__resizer__handle.ck-widget__resizer__handle-top-right,
-	.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left {
-		cursor: nesw-resize;
-	}
+.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;
+}
 
-/*
- * 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
- */
+.ck .ck-widget_with-resizer {
+  position: relative;
+}
+
+.ck-focused .ck-widget_with-resizer.ck-widget_selected > .ck-widget__resizer {
+  display: block;
+}
 
-/*
-	 * Styles of the type around buttons
-	 */
+: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-widget .ck-widget__type-around__button {
-		display: block;
-		position: absolute;
-		overflow: hidden;
-		z-index: var(--ck-z-default);
-	}
+  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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-widget .ck-widget__type-around__button {
+    transition: none;
+  }
+}
 
 .ck .ck-widget .ck-widget__type-around__button svg {
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			z-index: calc(var(--ck-z-default) + 2);
-		}
+  width: 10px;
+  height: 8px;
+  margin-top: 1px;
+  transition: transform .5s;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
-.ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_before {
-			/* Place it in the middle of the outline */
-			top: calc(-0.5 * var(--ck-widget-outline-thickness));
-			left: min(10%, 30px);
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-widget .ck-widget__type-around__button svg {
+    transition: none;
+  }
+}
+
+.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 .ck-widget .ck-widget__type-around__button svg line {
+  stroke-dasharray: 7;
+}
+
+.ck .ck-widget .ck-widget__type-around__button svg {
+  z-index: calc(var(--ck-z-default) + 2);
+}
+
+.ck .ck-widget .ck-widget__type-around__button:hover {
+  animation: 1s infinite ck-widget-type-around-button-sonar;
+}
+
+.ck .ck-widget .ck-widget__type-around__button:hover svg polyline {
+  animation: 2s linear ck-widget-type-around-arrow-dash;
+}
+
+.ck .ck-widget .ck-widget__type-around__button:hover svg line {
+  animation: 2s linear ck-widget-type-around-arrow-tip-dash;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck .ck-widget .ck-widget__type-around__button:hover {
+    animation: none;
+  }
 
-			transform: translateY(-50%);
-		}
+  .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 .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 .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_after {
-			/* Place it in the middle of the outline */
-			bottom: calc(-0.5 * var(--ck-widget-outline-thickness));
-			right: min(10%, 30px);
-
-			transform: translateY(50%);
-		}
-
-/*
-	 * Styles for the buttons when:
-	 * - the widget is selected,
-	 * - or the button is being hovered (regardless of the widget state).
-	 */
-
-.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 1px;
-			left: 1px;
-			z-index: calc(var(--ck-z-default) + 1);
-		}
-
-/*
-	 * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
-	 */
+  bottom: calc(-.5 * var(--ck-widget-outline-thickness));
+  right: min(10%, 30px);
+  transform: translateY(50%);
+}
+
+.ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.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.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);
+}
+
+: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;
+}
+
+.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;
+}
+
+.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ck .ck-widget.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before {
+  margin-left: 20px;
+}
+
+.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;
+}
+
+: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);
+}
+
+: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;
+}
+
+: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;
+}
+
+: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 .ck-widget > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
-		display: none;
-		position: absolute;
-		left: 0;
-		right: 0;
-	}
-
-/*
-	 * When the widget is hovered the "fake caret" would normally be narrower than the
-	 * extra outline displayed around the widget. Let's extend the "fake caret" to match
-	 * the full width of the widget.
-	 */
+  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) );
-	}
-
-/*
-	 * Styles for the horizontal "fake caret" when it should be displayed before the widget (backward keyboard navigation).
-	 */
+  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;
-	}
-
-/*
-	 * Styles for the horizontal "fake caret" when it should be displayed after the widget (forward keyboard navigation).
-	 */
+  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;
-	}
+  bottom: calc(-1 * var(--ck-widget-outline-thickness) - 1px);
+  display: block;
+}
 
-/*
- * Integration with the read-only mode of the editor.
- */
-.ck.ck-editor__editable.ck-read-only .ck-widget__type-around {
-	display: none;
+.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;
 }
 
-/*
- * Integration with the #isEnabled property of the WidgetTypeAround plugin.
- */
-.ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around {
-	display: none;
+: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 .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) svg * {
+  stroke: #999;
+}
+
+@keyframes ck-widget-type-around-arrow-dash {
+  0% {
+    stroke-dashoffset: 10px;
+  }
+
+  20%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes ck-widget-type-around-arrow-tip-dash {
+  0%, 20% {
+    stroke-dashoffset: 7px;
+  }
+
+  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));
+  }
+
+  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));
+  }
+}
+
+@keyframes ck-widget-type-around-fake-caret-pulse {
+  0% {
+    opacity: 1;
+  }
+
+  49% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  99% {
+    opacity: 0;
+  }
+
+  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;
 }
 
-/*
- * Integration with the restricted editing mode (feature) of the editor.
- */
 .ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around {
-		display: none;
-	}
+  display: none;
+}
+
 .ck.ck-editor__editable.ck-restricted-editing_mode_restricted div.restricted-editing-exception .ck-widget__type-around {
-		display: initial;
-	}
+  display: initial;
+}
 
 /*# sourceMappingURL=index.css.map */