@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

.wp-block-table {
	.wp-block[data-align="left"] > &,
	.wp-block[data-align="right"] > &,
	.wp-block[data-align="center"] > & {
		// Stop table block from collapsing when tables are floated.
		height: auto;

		table {
			// Ensure the table element is not full-width when aligned.
			width: auto;
		}

		td,
		th {
			word-break: normal;
			overflow-wrap: anywhere;
		}
	}

	.wp-block[data-align="center"] > & {
		text-align: initial;

		table {
			margin: 0 auto;
		}
	}

	td,
	th {
		border: $border-width solid;
		padding: 0.5em;

		// The UA stylesheet sets `overflow-wrap: break-word` on editable
		// elements, which would otherwise win over the cell's value.
		[contenteditable="true"] {
			overflow-wrap: inherit;
		}
	}

	td.is-selected,
	th.is-selected {
		border-color: var(--wp-admin-theme-color);
		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
		border-style: double;
	}

	// This is only required in the editor to overcome the fact the editor
	// rewrites border width styles into shorthand.
	table.has-individual-borders {
		> *,
		tr,
		th,
		td {
			border-width: $border-width;
			border-style: solid;
			border-color: currentColor;
		}
	}
}

.blocks-table__placeholder-form.blocks-table__placeholder-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: $grid-unit-10;

	@include break-medium() {
		flex-direction: row;
		align-items: flex-end;
	}
}

.blocks-table__placeholder-input {
	width: $grid-unit-10 * 14;
}