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

$regionOutlineRatio: 2;

@mixin region-selection-focus {
	@include selected-block-focus( $regionOutlineRatio );
	z-index: z-index(".is-focusing-regions {region} :focus::after");
}

[role="region"] {
	position: relative;

	// Handles the focus when we programmatically send focus to this region
	&.interface-interface-skeleton__content:focus-visible::after {
		@include region-selection-focus;
	}
}

.is-focusing-regions {
	[role="region"]:focus::after {
		@include region-selection-focus;
	}
	// Fixes for edge cases.
	// Some of the regions are currently used for layout purposes as 'interface skeleton'
	// items. When they're absolutely positioned or when they contain absolutely
	// positioned elements, they may have no size therefore the focus style is not
	// visible. For the future, it's important to take into consideration that
	// the navigable regions should always have a computed size. For now, we can
	// fix some edge cases but these CSS rules should be later removed in favor of
	// a more abstracted approach to make the navigable regions focus style work
	// regardless of the CSS used on other components.

	// Header top bar when Distraction free mode is on.
	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
	.interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
	.editor-post-publish-panel {
		@include selected-block-outline( $regionOutlineRatio );
	}
}