/**
 * BookPress admin app styles.
 */

$radius: 8px;
$border: #e0e0e0;
$muted: #6b6b6b;
$surface: #ffffff;
$canvas: #f6f7f7;
$brand: var(--wp-admin-theme-color, #3858e9);

.toplevel_page_bookpress #wpcontent {
	padding-left: 0;
}

.toplevel_page_bookpress #wpbody-content {
	padding-bottom: 0;
}

.wpbook-root {
	background: $canvas;
	min-height: calc(100vh - 32px);
}

.wpbook-app {
	box-sizing: border-box;
	color: #1e1e1e;

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}
}

.wpbook-loading {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 40px;
}

.wpbook-muted {
	color: $muted;
}

.wpbook-error {
	color: #cc1818;
	margin: 6px 0;
}

.wpbook-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 20px;
	background: #e7f5ea;
	color: #1e6b35;
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;

	&.is-subtle {
		background: #f0f0f0;
		color: $muted;
		margin-left: 0;
	}
}

/* Books screen */

.wpbook-books {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 32px 64px;
}

.wpbook-header {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;

	&__actions {
		display: flex;
		gap: 12px;
		align-items: center;

		.components-search-control {
			min-width: 240px;
		}
	}
}

.wpbook-title {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 4px;
	padding: 0;
}

.wpbook-subtitle {
	margin: 0;
	color: $muted;
	font-size: 14px;
}

.wpbook-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.wpbook-card {
	display: flex;
	flex-direction: column;
	background: $surface;
	border: 1px solid $border;
	border-radius: $radius;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;

	&:hover {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		transform: translateY(-2px);
	}

	&__cover {
		display: flex;
		justify-content: center;
		padding: 28px 0 22px;
		background: linear-gradient(180deg, #eef0f3, #e3e6ea);
		border: 0;
		cursor: pointer;
		width: 100%;

		&:focus-visible {
			outline: 2px solid $brand;
			outline-offset: -2px;
		}
	}

	&__body {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 16px;
		flex: 1;
	}

	&__title {
		margin: 0;
		font-size: 16px;
		line-height: 1.3;

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				color: $brand;
			}
		}
	}

	&__meta,
	&__file {
		margin: 0;
		color: $muted;
		font-size: 12px;
	}

	&__actions {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-top: auto;
		padding-top: 10px;

		.components-dropdown-menu {
			margin-left: auto;
		}
	}
}

/* CSS cover thumbnails */

.wpbook-cover-thumb {
	--wpbook-primary: #1f2a44;
	--wpbook-accent: #f2b84b;
	--wpbook-text: #ffffff;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 132px;
	aspect-ratio: 2 / 3;
	padding: 14px 12px;
	border-radius: 2px 6px 6px 2px;
	background: linear-gradient(160deg, var(--wpbook-primary), var(--wpbook-accent));
	color: var(--wpbook-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 10px 22px rgba(0, 0, 0, 0.22), inset 3px 0 0 rgba(0, 0, 0, 0.18);
	overflow: hidden;
	text-align: center;

	&.is-small {
		width: 64px;
		padding: 6px;

		.wpbook-cover-thumb__title {
			font-size: 8px;
		}

		.wpbook-cover-thumb__author {
			display: none;
		}
	}

	&__title {
		position: relative;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.15;
		overflow-wrap: anywhere;
		z-index: 1;
	}

	&__author {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10px;
		font-size: 8px;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		opacity: 0.85;
		z-index: 1;
	}

	&.is-minimal {
		background: var(--wpbook-primary);
		color: var(--wpbook-text);
		text-align: left;
		justify-content: flex-start;
		padding-top: 30%;
		font-family: -apple-system, sans-serif;

		&::before {
			content: "";
			position: absolute;
			left: 12px;
			top: 22%;
			width: 26px;
			height: 3px;
			background: var(--wpbook-accent);
		}

		.wpbook-cover-thumb__title {
			font-family: inherit;
		}
	}

	&.is-classic-novel {
		background: var(--wpbook-primary);

		&::before {
			content: "";
			position: absolute;
			inset: 8px;
			border: 1px solid var(--wpbook-accent);
			outline: 1px solid var(--wpbook-accent);
			outline-offset: -4px;
		}

		.wpbook-cover-thumb__title {
			font-style: italic;
			font-weight: 400;
		}
	}

	&.is-bold-type {
		background: var(--wpbook-primary);
		justify-content: flex-end;
		text-align: left;

		.wpbook-cover-thumb__title {
			font-family: Impact, "Arial Narrow", sans-serif;
			font-size: 21px;
			overflow-wrap: normal;
			word-break: normal;
			line-height: 0.95;
			text-transform: uppercase;
			margin-bottom: 18px;
		}
	}

	&.is-geometric {
		background: var(--wpbook-primary);

		&::before,
		&::after {
			content: "";
			position: absolute;
			border-radius: 50%;
			background: var(--wpbook-accent);
			opacity: 0.85;
		}

		&::before {
			width: 120%;
			aspect-ratio: 1;
			right: -60%;
			top: -30%;
		}

		&::after {
			width: 60%;
			aspect-ratio: 1;
			left: -20%;
			bottom: -15%;
			opacity: 0.5;
		}
	}

	&.is-photo,
	&.is-photo-frame,
	&.is-split,
	&.is-magazine {
		background: linear-gradient(180deg, #8ba3b8 0%, #5a7187 55%, var(--wpbook-primary) 100%);
	}

	&.is-split {
		background: linear-gradient(180deg, #8ba3b8 0%, #6d8aa3 55%, var(--wpbook-primary) 55%);
		justify-content: flex-end;
		padding-bottom: 28px;
	}

	&.is-photo-frame {
		background: var(--wpbook-primary);
		justify-content: flex-end;
		padding-bottom: 26px;

		&::before {
			content: "";
			position: absolute;
			left: 14%;
			right: 14%;
			top: 10%;
			height: 46%;
			background: linear-gradient(160deg, #a7bcc9, #6d8aa3);
			border: 3px solid #ffffff;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
		}
	}

	&.is-magazine {
		justify-content: flex-start;

		.wpbook-cover-thumb__title {
			font-family: Impact, "Arial Narrow", sans-serif;
			font-size: 20px;
			overflow-wrap: normal;
			word-break: normal;
			text-transform: uppercase;
			color: var(--wpbook-text);
		}

		&::after {
			content: "";
			position: absolute;
			right: 10px;
			bottom: 34px;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: var(--wpbook-accent);
		}
	}

	&.is-tech {
		background:
			linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 10px 10px,
			linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 10px 10px,
			var(--wpbook-primary);
		text-align: left;

		.wpbook-cover-thumb__title {
			font-family: Menlo, Consolas, monospace;
			font-size: 13px;

			&::before {
				content: "> ";
				color: var(--wpbook-accent);
			}
		}
	}

	&.is-botanical {
		background: var(--wpbook-primary);

		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 60px;
			height: 60px;
			border-radius: 0 60px;
			background: var(--wpbook-accent);
			opacity: 0.55;
		}

		&::before {
			left: -18px;
			top: -14px;
			transform: rotate(18deg);
		}

		&::after {
			right: -18px;
			bottom: -10px;
			transform: rotate(198deg);
		}
	}

	&.is-playful {
		background:
			radial-gradient(circle at 18% 22%, var(--wpbook-accent) 0 6px, transparent 7px),
			radial-gradient(circle at 80% 15%, #ffbe0b 0 5px, transparent 6px),
			radial-gradient(circle at 75% 80%, #fb5607 0 7px, transparent 8px),
			radial-gradient(circle at 25% 85%, #8338ec 0 5px, transparent 6px),
			var(--wpbook-primary);

		.wpbook-cover-thumb__title {
			font-family: "Trebuchet MS", sans-serif;
			font-size: 17px;
		}
	}
}

/* Empty state */

.wpbook-empty {
	max-width: 520px;
	margin: 40px auto;
	padding: 40px;
	text-align: center;
	background: $surface;
	border: 1px dashed #c3c4c7;
	border-radius: $radius;

	h2 {
		font-size: 20px;
		margin: 16px 0 8px;
	}

	&__art {
		display: flex;
		justify-content: center;
		gap: 6px;
		height: 90px;

		span {
			width: 54px;
			border-radius: 2px 6px 6px 2px;
			box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);

			&:nth-child(1) {
				background: linear-gradient(160deg, #3b1f6e, #ff7a59);
				transform: rotate(-6deg) translateY(6px);
			}

			&:nth-child(2) {
				background: #14342b;
				z-index: 1;
			}

			&:nth-child(3) {
				background: #ffde59;
				transform: rotate(6deg) translateY(6px);
			}
		}
	}
}

/* New book modal and galleries */

.wpbook-new-modal {
	.components-modal__content {
		padding-bottom: 0;
	}
}

.wpbook-steps {
	display: flex;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	counter-reset: step;

	li {
		counter-increment: step;
		padding: 4px 12px;
		border-radius: 20px;
		background: #f0f0f0;
		color: $muted;
		font-size: 12px;

		&::before {
			content: counter(step) ". ";
		}

		&.is-active {
			background: $brand;
			color: #ffffff;
		}
	}
}

.wpbook-section-title {
	margin: 24px 0 12px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: $muted;
}

.wpbook-modal-actions {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 20px -32px 0;
	padding: 16px 32px;
	background: $surface;
	border-top: 1px solid $border;
}

.wpbook-gallery {
	display: grid;
	gap: 16px;

	&.is-covers {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	&.is-templates {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	&__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 14px 10px 12px;
		background: $surface;
		border: 2px solid transparent;
		border-radius: $radius;
		box-shadow: 0 0 0 1px $border;
		cursor: pointer;
		text-align: center;
		transition: box-shadow 0.15s ease, border-color 0.15s ease;

		&:hover {
			box-shadow: 0 0 0 1px #949494, 0 6px 16px rgba(0, 0, 0, 0.08);
		}

		&:focus-visible {
			outline: 2px solid $brand;
			outline-offset: 2px;
		}

		&.is-selected,
		&.is-selected:hover {
			border-color: $brand;
			box-shadow: 0 0 0 1px $brand, 0 6px 16px rgba(0, 0, 0, 0.08);
		}

		.wpbook-cover-thumb {
			width: 100px;
			margin-bottom: 8px;
		}
	}

	&__thumb {
		width: 100px;
		aspect-ratio: 2 / 3;
		object-fit: cover;
		border-radius: 2px 5px 5px 2px;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
		margin-bottom: 8px;

		&.is-spread {
			width: 100%;
			aspect-ratio: 3 / 2;
			border-radius: 3px;
			object-fit: contain;
			background: #f0f0f0;
		}
	}

	&__name {
		font-weight: 600;
		font-size: 13px;
	}

	&__desc {
		color: $muted;
		font-size: 11px;
		line-height: 1.35;
	}
}

.wpbook-spread {
	display: flex;
	gap: 2px;
	width: 100%;
	aspect-ratio: 3 / 2;
	padding: 10px;
	margin-bottom: 8px;
	background: #e9eaec;
	border-radius: 4px;

	&__page {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 5px;
		padding: 12% 10%;
		background: #ffffff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

		i {
			display: block;
			height: 4px;
			background: #c9cbcf;
			border-radius: 2px;

			&.is-heading {
				height: 8px;
				width: 70%;
				margin: 0 auto 6px;
				background: #45474b;
			}

			&.is-short {
				width: 60%;
			}
		}
	}

	&.is-modern .is-heading {
		margin-left: 0;
		background: $brand;
	}

	&.is-magazine .wpbook-spread__page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 4px;

		.is-heading {
			grid-column: 1 / -1;
			height: 12px;
			width: 100%;
		}
	}

	&.is-manual .is-heading {
		width: 50%;
		margin-left: 0;

		&::before {
			content: "";
		}
	}

	&.is-minimal .wpbook-spread__page {
		padding: 20% 18%;
	}

	&.is-dark .wpbook-spread__page {
		background: #1b1d22;

		i {
			background: #50545c;
		}

		.is-heading {
			background: #d9dbe0;
		}
	}
}

/* Progress */

.wpbook-progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 6px 0;

	&__bar {
		height: 6px;
		background: #ececec;
		border-radius: 3px;
		overflow: hidden;

		span {
			display: block;
			height: 100%;
			background: $brand;
			border-radius: 3px;
			transition: width 0.4s ease;

			&.is-indeterminate {
				animation: wpbook-indeterminate 1.2s ease-in-out infinite;
			}
		}
	}

	&__label {
		font-size: 12px;
		color: $muted;
	}
}

@keyframes wpbook-indeterminate {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(300%);
	}
}

/* Editor */

.wpbook-editor {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"bar bar"
		"messages messages"
		"steps panel";
	min-height: calc(100vh - 32px);

	&.has-preview {
		grid-template-columns: 220px minmax(0, 1fr) minmax(320px, 34%);
		grid-template-areas:
			"bar bar bar"
			"messages messages messages"
			"steps panel preview";
	}

	&__bar {
		grid-area: bar;
		position: sticky;
		top: 32px;
		z-index: 10;
		display: flex;
		gap: 8px;
		align-items: center;
		padding: 10px 16px;
		background: $surface;
		border-bottom: 1px solid $border;
	}

	&__title {
		flex: 1;
		min-width: 120px;
		padding: 6px 8px;
		font-size: 18px;
		font-weight: 600;
		border: 1px solid transparent;
		border-radius: 4px;
		background: transparent;

		&:hover,
		&:focus {
			border-color: #949494;
			background: $surface;
		}
	}

	&__status {
		color: $muted;
		font-size: 12px;
		white-space: nowrap;
	}

	&__messages {
		grid-area: messages;
		padding: 8px 16px 0;
	}

	&__done {
		grid-area: messages;
		margin: 8px 16px 0;
	}

	&__steps {
		grid-area: steps;
		position: sticky;
		top: 90px;
		align-self: start;
		min-height: calc(100vh - 122px);
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 16px 12px;
		border-right: 1px solid $border;
		background: $surface;

		button {
			display: flex;
			gap: 10px;
			align-items: center;
			padding: 10px;
			border: 0;
			border-radius: 6px;
			background: transparent;
			cursor: pointer;
			text-align: left;

			strong,
			small {
				display: block;
			}

			small {
				color: $muted;
				font-size: 11px;
			}

			&:hover {
				background: #f0f0f0;
			}

			&.is-active {
				background: #f0f4ff;
				box-shadow: inset 3px 0 0 $brand;

				.wpbook-step-number {
					background: $brand;
					color: #ffffff;
				}
			}
		}
	}

	&__panel {
		grid-area: panel;
		min-width: 0;
		padding: 24px 28px 64px;
	}
}

.wpbook-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	background: #e7e7e7;
	font-size: 12px;
	font-weight: 600;
}

.wpbook-panel {
	max-width: 900px;

	h2 {
		margin: 0 0 12px;
		font-size: 18px;
	}

	&__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 8px;

		h2 {
			margin: 0;
		}
	}

	&__subhead {
		margin-top: 36px !important;
		padding-top: 24px;
		border-top: 1px solid $border;
	}

	.components-toggle-control {
		margin: 10px 0;
	}

	.wpbook-gallery {
		margin: 16px 0 8px;
	}
}

.wpbook-fields {
	display: grid;
	gap: 16px;
	margin: 12px 0;

	&.is-2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	&.is-3col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	&.is-4col {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wpbook-color-field {
	&__toggle {
		gap: 8px;
		width: 100%;
		height: 40px;
		border: 1px solid #949494 !important;
		border-radius: 2px;

		code {
			background: none;
			font-size: 12px;
		}
	}

	&__popover {
		padding: 12px;
	}
}

.wpbook-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;

	button {
		width: 24px;
		height: 24px;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		cursor: pointer;
	}
}

.wpbook-media-field {
	display: flex;
	gap: 8px;
}

/* Content step */

.wpbook-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	max-width: none;
}

.wpbook-chapters {
	&__empty {
		padding: 24px;
		margin-bottom: 12px;
		color: $muted;
		text-align: center;
		border: 1px dashed #c3c4c7;
		border-radius: $radius;
	}

	&__list {
		margin: 0 0 12px;
		padding: 0;
		list-style: none;
	}
}

.wpbook-chapter {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 6px;
	padding: 8px 8px 8px 4px;
	background: $surface;
	border: 1px solid $border;
	border-radius: 6px;

	&.is-dragging {
		position: relative;
		z-index: 2;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
	}

	&.is-part {
		background: #f6f7ff;
		border-color: #c7cff9;
	}

	&.is-missing {
		border-color: #f0b849;
		background: #fff8e5;
	}

	&__handle {
		display: inline-flex;
		cursor: grab;
		color: #949494;
		touch-action: none;

		svg {
			fill: currentColor;
		}
	}

	&__number {
		flex: 0 0 26px;
		height: 26px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #f0f0f0;
		font-size: 12px;
		font-weight: 600;
	}

	&__main {
		display: flex;
		flex: 1;
		flex-direction: column;
		min-width: 0;
	}

	&__title {
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__meta {
		color: $muted;
		font-size: 12px;
	}

	&__part-fields {
		display: grid;
		flex: 1;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	&__options {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 260px;
		padding: 12px;
	}
}

.wpbook-picker {
	padding: 16px;
	background: $surface;
	border: 1px solid $border;
	border-radius: $radius;

	&__filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-bottom: 10px;
	}

	&__toolbar {
		display: flex;
		gap: 8px;
		align-items: center;
		margin: 10px 0 6px;

		.wpbook-muted {
			margin-right: auto;
		}
	}

	&__list {
		max-height: 460px;
		margin: 0;
		padding: 0;
		overflow: auto;
		list-style: none;

		li {
			display: flex;
			gap: 8px;
			align-items: center;
			padding: 6px 4px;
			border-bottom: 1px solid #f0f0f0;

			&.is-added {
				opacity: 0.55;
			}

			.components-checkbox-control {
				flex: 1;
				min-width: 0;
			}
		}
	}

	&__meta {
		color: $muted;
		font-size: 11px;
		white-space: nowrap;
	}

	&__pages {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}
}

/* Preview */

.wpbook-preview {
	grid-area: preview;
	position: sticky;
	top: 90px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 110px);
	margin: 16px 16px 16px 0;
	background: #2c2f33;
	border-radius: $radius;
	overflow: hidden;

	&__bar {
		display: flex;
		gap: 8px;
		align-items: center;
		padding: 8px;
		background: #1f2124;

		.components-spinner {
			margin: 0;
		}

		.components-button {
			margin-left: auto;
			color: #ffffff;
		}
	}

	&__frame {
		flex: 1;

		iframe {
			width: 100%;
			height: 100%;
			border: 0;
			background: #525659;
		}
	}

	&__placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.wpbook-error {
		padding: 0 10px;
		color: #ffb3b3;
	}
}

.wpbook-segmented {
	display: inline-flex;
	padding: 2px;
	background: #3a3d42;
	border-radius: 6px;

	button {
		padding: 4px 10px;
		border: 0;
		border-radius: 4px;
		background: transparent;
		color: #d0d3d8;
		font-size: 12px;
		cursor: pointer;

		&.is-active {
			background: #ffffff;
			color: #1e1e1e;
		}

		&:disabled {
			opacity: 0.4;
			cursor: not-allowed;
		}
	}
}

.wpbook-files {
	margin-top: 12px;

	&__actions {
		text-align: right;
		white-space: nowrap;

		.components-button {
			margin-left: 4px;
		}
	}
}

@media (max-width: 1280px) {
	.wpbook-editor.has-preview {
		grid-template-columns: 200px minmax(0, 1fr);
		grid-template-areas:
			"bar bar"
			"messages messages"
			"steps panel"
			"preview preview";
	}

	.wpbook-preview {
		position: static;
		height: 70vh;
		margin: 0 16px 16px;
	}

	.wpbook-content {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	.wpbook-editor,
	.wpbook-editor.has-preview {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"bar"
			"messages"
			"steps"
			"panel"
			"preview";
	}

	.wpbook-editor__bar {
		top: 46px;
		flex-wrap: wrap;
	}

	.wpbook-editor__steps {
		flex-direction: row;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid $border;

		small {
			display: none !important;
		}
	}

	.wpbook-fields.is-2col,
	.wpbook-fields.is-3col,
	.wpbook-fields.is-4col {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Font packs */
.wpbook-font-packs {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wpbook-font-pack {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;

	&__text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	&__desc {
		color: $muted;
		font-size: 12px;
	}

	&__action {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: 4px;
	}
}