@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;

.edit-post-meta-boxes-area {
	position: relative;

	/**
	 * The wordpress default for most meta-box elements is content-box. Some
	 * elements such as textarea and input are set to border-box in forms.css.
	 * These elements therefore specifically set back to border-box here, while
	 * other elements (such as .button) are unaffected by Gutenberg's style
	 * because of their higher specificity.
	 */
	&__container,
	.inside {
		box-sizing: content-box;
	}

	textarea,
	input {
		box-sizing: border-box;
	}

	.postbox-header {
		border-top: $border-width solid $gray-300;
		border-bottom: 0;
	}

	/* Match width and positioning of the meta boxes. Override default styles. */
	#poststuff {
		margin: 0 auto;
		padding-top: 0;
		min-width: auto;
	}

	/* Override Default meta box stylings */
	#poststuff h3.hndle,
	#poststuff .stuffbox > h3,
	#poststuff h2.hndle { /* WordPress selectors yolo */
		box-sizing: border-box;
		color: inherit;
		font-weight: 600;
		outline: none;
		padding: 0 $grid-unit-30;
		position: relative;
		width: 100%;
	}

	.postbox {
		border: 0;
		color: inherit;
		margin-bottom: 0;
	}

	.postbox > .inside {
		color: inherit;
		padding: 0 $grid-unit-30 $grid-unit-30;
		margin: 0;
	}

	.postbox .handlediv {
		height: 44px;
		width: 44px;
	}

	&.is-loading::before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: "";
		background: transparent;
		z-index: z-index(".edit-post-meta-boxes-area.is-loading::before");
	}

	.components-spinner {
		position: absolute;
		top: 10px;
		right: 20px;
		z-index: z-index(".edit-post-meta-boxes-area .spinner");
	}

	// Hide disabled meta boxes using CSS so that we don't interfere with plugins
	// that modify `element.style.display` on the meta box.
	.is-hidden {
		display: none;
	}
}

.edit-post-meta-boxes-area__clear {
	clear: both;
}