/*
 * 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-table-focused-cell-background: hsla(212, 90%, 80%, .3);
	--ck-table-content-default-border-color: hsl(0, 0%, 83%);
	--ck-table-border-none-helper-line-color: hsl(0, 0%, 83%);
	--ck-table-border-none-helper-line-style: dashed;
	--ck-table-border-none-helper-line-width: 1px;
}

.ck-widget.table {
	/* Dashed outline for table without any border. */
	& table[style*="border:none"],
	& table[style*="border-style:none"],
	& table[style*="border:0"],
	& table[style*="border-width:0"] {
		outline: var(--ck-table-content-default-border-color) 1px dashed;
	}

	& td,
	& th {
		/**
		 * While setting outline is fine, the border should not be modified here
		 * because it overrides the default table cell border color which is not expected.
		 * So do not use focus-ring border styling here, or any other border styles.
		 * See more: https://github.com/ckeditor/ckeditor5/issues/16979
		 */
		&.ck-editor__nested-editable {
			outline: unset;

			&:not(.ck-editor__editable_selected) {
				&.ck-editor__nested-editable_focused,
				&:focus {
					/* A very slight background to highlight the focused cell */
					background: var(--ck-color-table-focused-cell-background);
					outline: 1px solid var(--ck-color-focus-border);
					outline-offset: -1px; /* progressive enhancement - no IE support */
				}
			}
		}
	}
}

/*
By using `:where` we set the specificity to 0, but we need to override the inline styles that's why we must use `!important`.
This way it will be easier to override it in custom themes if needed.
*/
:where(.ck.ck-editor__editable.ck-table-show-hidden-borders .ck-widget.table) {
	--ck-table-border-none-helper-line:
		var(--ck-table-border-none-helper-line-width)
		var(--ck-table-border-none-helper-line-style)
		var(--ck-table-border-none-helper-line-color);

	/* Any fully removed border */
	& :where(td, th):where([style*="border:none"], [style*="border:0"], [style*="border-style:none"], [style*="border-width:0"]) {
		border: var(--ck-table-border-none-helper-line) !important;
	}

	/* Side-specific removed borders */
	& :where(table, td, th) {
		&:where([style*="border-top-style:none"], [style*="border-top-width:0"]) {
			border-top: var(--ck-table-border-none-helper-line) !important;
		}

		&:where([style*="border-right-style:none"], [style*="border-right-width:0"]) {
			border-right: var(--ck-table-border-none-helper-line) !important;
		}

		&:where([style*="border-bottom-style:none"], [style*="border-bottom-width:0"]) {
			border-bottom: var(--ck-table-border-none-helper-line) !important;
		}

		&:where([style*="border-left-style:none"], [style*="border-left-width:0"]) {
			border-left: var(--ck-table-border-none-helper-line) !important;
		}
	}
}
