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

.interface-complementary-area {
	background: $white;
	color: $gray-900;
	height: 100%;
	overflow: auto;

	@include break-medium() {
		width: $sidebar-width;
	}

	.components-panel {
		border: none;
		// Make a stacking context that keeps all descendents behind the sticky header
		position: relative;
		z-index: 0;
	}

	.components-panel__header {
		position: sticky;
		top: 0;
		// Sit above the panel's scrolling content within the stacking context above.
		z-index: 1;

		&.editor-sidebar__panel-tabs {
			top: 0;
		}
	}

	p:not(.components-base-control__help, .components-form-token-field__help) {
		margin-top: 0;
	}

	h2 {
		font-size: $default-font-size;
		font-weight: $font-weight-medium;
		color: $gray-900;
		margin-bottom: 1.5em;
	}

	// Subheading style.
	h3 {
		font-size: 11px;
		text-transform: uppercase;
		font-weight: $font-weight-medium;
		color: $gray-900;
		margin-bottom: 1.5em;
	}

	hr {
		border-top: none;
		border-bottom: 1px solid $gray-100;
		margin: 1.5em 0;
	}

	div.components-toolbar-group,
	div.components-toolbar {
		box-shadow: none;
		margin-bottom: 1.5em;
		&:last-child {
			margin-bottom: 0;
		}
	}

	.block-editor-skip-to-selected-block:focus {
		top: auto;
		right: 10px;
		bottom: 10px;
		left: auto;
	}
}

.interface-complementary-area__fill {
	height: 100%;
}