/*
 * 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-table-layout-widget-type-around-button-size: 16px;
	--ck-table-layout-widget-type-around-icon-width: 10px;
	--ck-table-layout-widget-type-around-icon-height: 8px;
	--ck-table-layout-widget-handler-icon-size: 10px;
	--ck-table-layout-default-border-color: hsl(0, 0%, 83%);

}

.ck-content {
	& table.table.layout-table,
	& figure.table.layout-table {
		/* Do not reserve space above and below the layout table. */
		margin-top: 0;
		margin-bottom: 0;
	}

	& table.table.layout-table {
		border-spacing: 0;
	}

	/* stylelint-disable-next-line no-descending-specificity */
	& figure.table.layout-table > table {
		border-spacing: 0;
	}
}

.ck-editor__editable {
	& .table.layout-table {
		/* stylelint-disable-next-line no-descending-specificity */
		& > table {
			width: 100%;
			height: 100%;

			/* Resetting `border-collapse` property to the user agent styles. */
			border-collapse: revert;

			/* The default table layout style in the editing view when the border is unset. */
			&:not(
			[style*="border:"],
			[style*="border-top"],
			[style*="border-bottom"],
			[style*="border-left"],
			[style*="border-right"],
			[style*="border-width"],
			[style*="border-style"],
			[style*="border-color"]) {
				border-color: transparent;
				border-width: 0;
				outline: none;
			}
		}

		& > table > tbody > tr > td {
			box-shadow: revert;
			padding: revert;
			min-width: 2em;
			/* To make the caret visible. */
			text-indent: 1px;

			/* The default table layout cell style in the editing view when the border is unset. */
			border-color: var(--ck-table-layout-default-border-color);
			border-style: dashed;

			/* Resets the `min-width` style attribute that was added by the content table style. */
			&[style^="width:"],
			&[style*=" width:"],
			&[style*=";width:"] {
				min-width: auto;
			}

			/* Remove the default background color from the focused table cell. */
			&:focus {
				background-color: transparent;
			}

			/* The default table layout cell style in the editing view when the border is unset.
			But it need to be more strict cause of style attributes like `border-image`, `border-radius`, etc. */
			&:not(
			[style*="border:"],
			[style*="border-top"],
			[style*="border-bottom"],
			[style*="border-left"],
			[style*="border-right"],
			[style*="border-width"],
			[style*="border-style"],
			[style*="border-color"]) {
				border-color: transparent;
				/* Resetting `border-width` property to the user agent styles. */
				border-width: 0;
				outline: var(--ck-table-layout-default-border-color) 1px dashed;
				outline-offset: -1px;

				&:focus {
					outline: var(--ck-color-focus-border) 1px solid;
				}
			}

			/* Reset the `width` and `text-indent` of the bogus paragraph because <td> has 1px text indent. */
			& > .ck-table-bogus-paragraph {
				width: calc(100% - 1px);
				text-indent: 0;
			}
		}

		/* Widget type around overrides. */
		&.ck-widget {
			& > .ck-widget__type-around {
				--ck-widget-type-around-button-size: var(--ck-table-layout-widget-type-around-button-size);

				& > .ck-widget__type-around__button {
					&.ck-widget__type-around__button_before,
					&.ck-widget__type-around__button_after {
						transform: translateY(0);
						/* Same value as inline-image widget because it is after the inline-image in HTML structure */
						z-index: 2;
					}

					&.ck-widget__type-around__button_before {
						margin-left: var(--ck-table-layout-widget-type-around-button-size);
						left: min(10%, 30px);
						border-radius: 0 0 100px 100px;

						&::after {
							border-radius: 0 0 100px 100px;
						}
					}

					&.ck-widget__type-around__button_after {
						border-radius: 100px 100px 0 0;

						&::after {
							border-radius: 100px 100px 0 0;
						}
					}

					& svg {
						width: var(--ck-table-layout-widget-type-around-icon-width);
						height: var(--ck-table-layout-widget-type-around-icon-height);
					}
				}
			}

			&.ck-widget_with-selection-handle {
				& > .ck-widget__selection-handle {
					--ck-widget-handler-icon-size: var(--ck-table-layout-widget-handler-icon-size);

					transform: translateY(calc(0px - var(--ck-widget-outline-thickness)));
					/* Value increased by 1 as in selected inline-image widget
					because it is before the inline-image in HTML structure. */
					z-index: 3;
				}
			}

			/* Show fake caret on border not above. */
			&.ck-widget_type-around_show-fake-caret_before {
				& > .ck-widget__type-around {
					& > .ck-widget__type-around__fake-caret {
						top: 0;
					}
				}
			}

			/* Show fake caret on border not below. */
			&.ck-widget_type-around_show-fake-caret_after {
				& > .ck-widget__type-around {
					& > .ck-widget__type-around__fake-caret {
						bottom: 0;
					}
				}
			}
			&:hover {
				/* To prevent the widget outline from being cut off at the bottom
				when the next cell or table has a background color, for example. */
				z-index: var(--ck-z-default);
			}

			&:hover > .ck-widget__selection-handle {
				opacity: 0.75;
				visibility: visible;

				&:hover {
					opacity: 1;
				}
			}

			/* Because of setting the opacity to 0.75 to the selection handle for the layout table,
			it overrides the similar selector in widget (specificity is higher),
			thats why we must override it here also. */
			&:has( .ck-widget.table:hover ) > .ck-widget__selection-handle {
				opacity: 0;
				visibility: hidden;
			}

			&.ck-widget_selected {
				/* To prevent the widget outline from being cut off at the bottom
				when the next cell or table has a background color, for example. */
				z-index: var(--ck-z-default);
			}
		}
		display: table;
		margin: 0

		/* Widget type around overrides. */
	}
	&.ck-editor__editable_inline {
		& > .ck-widget.ck-widget_with-selection-handle.layout-table {
			&:first-child {
				margin-top: var(--ck-spacing-large);
			}
			/*
			* This value should match with the default margins of the block elements (like .media, .image or .table)
			* to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825).
			*/
			&:last-child,
			/* Fallback for hidden fake selection div */
			&:nth-last-child(2):has( + .ck-fake-selection-container) {
				margin-bottom: var(--ck-spacing-large);
			}
		}
	}
}
