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

.editor-style-book {
	// Ensure the style book fills the available vertical space.
	// This is useful when the style book is used to fill a frame.
	height: 100%;
	&.is-button {
		border-radius: $radius-large;
	}
}

.editor-style-book__iframe {
	display: block;
	height: 100%;
	width: 100%;

	&.is-button {
		border-radius: $radius-large;
	}
	&.is-focused {
		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
	}
}

.editor-style-book__tabs {
	// `Tabs.Root` renders a wrapping element, so it establishes the flex column
	// that keeps the tab list at the top and lets the tab panel fill the height.
	height: 100%;

	display: flex;
	flex-direction: column;
}

.editor-style-book__tablist-container {
	flex: none;

	display: flex;
	width: 100%;
	padding-right: 56px;
	background: $white;
}

.editor-style-book__tabpanel {
	flex: 1 0 auto;

	overflow: auto;
}