@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;
	}

	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.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__tablist-container {
	flex: none;

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

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

	overflow: auto;
}