/**
 * CSS for the TablePress table block in the block editor.
 *
 * @package TablePress
 * @subpackage Blocks
 * @author Tobias Bäthge
 * @since 2.0.0
 */

.wp-block-tablepress-table {
	$parent: &;

	/* Limit the height of server-side render preview in the block editor. */
	> .render-wrapper {
		overflow: scroll;
		min-height: 64px;
		max-height: 400px;

		> .tablepress {
			/* Prevent interaction with elements like links inside tables, similar to the `Disabled` component from Gutenberg. */
			pointer-events: none;
			/* Remove the bottom margin in the block preview. */
			margin: 0 auto;
		}
	}

	/* Hide the server-side render wrapper while it's being refreshed. */
	> div > div > .render-wrapper {
		display: none;
	}

	/* Move the loading spinner inside the table overlay. */
	> div > div {
		margin-top: 8px !important; /* The !important flag is necessary to overwrite an inline style. */
	}

	/* Show an overlay on top of the table, to indicate that it's not fully shown. */
	@at-root .table-overlay {
		#{$parent} & {
			box-sizing: border-box;
			top: 0;
			width: 100%;
			height: 100%;
			box-shadow: inset 0 0 50px #cccccc;
			background-color: rgba(255, 255, 255, 0.5);
			padding: 2em;
			font-weight: bold;

			/* Hide the table overlay in the block preview. */
			.block-editor-block-preview__content-iframe & {
				display: none;
			}
		}

		/* Position the table overlay above the table preview once it's loaded. */
		#{$parent} .render-wrapper + & {
			position: absolute;
		}

		/* Hide the table overlay when it's hovered while a table preview is shown. */
		#{$parent}:hover .render-wrapper + & {
			display: none;
		}
	}

	/* Increase the placeholder label font size. */
	.components-placeholder__label {
		font-size: 18px;
	}

	/* Elements inside the InspectorControls PanelBodys. */
	&-inspector-panel {
		/* Make the indeterminate state of a checkbox lighter. */
		.components-checkbox-control__input[type="checkbox"] {
			&:indeterminate {
				opacity: 0.4;
			}
		}
	}
}