/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

// This selector should be revisited if/when we can leverage lightBlockWrapper.
.wp-block-a8c-book {
	position: relative;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
	box-sizing: content-box;

	.wp-block-a8c-book__cover {
		// Ensure the correct aspect ratio of the cover image, even when the source image is way too big.
		height: 100% !important; // Needs high specificity to override an inline style. Would be nice if this could be output by the component itself instead.

		transition: transform 0.8s;
		transform-style: preserve-3d;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden; /* Safari */

		// Make the placeholder look like a book.
		.components-placeholder {
			box-shadow: none;
			height: 100%;
		}
	}

	.wp-block-a8c-book__cover-placeholder {
		// Default to 33% width.
		min-width: 140px;
		min-height: 230px;
		width: 33% !important; // Needs to be important to override inline styles set on the placeholder component.
		padding-top: 50%;

		.wp-block-a8c-book-shelf & {
			width: 100% !important;
			padding-top: 150%;
		}

		.components-placeholder {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		// Hide the resize handles on the placeholder.
		.components-resizable-box__handle {
			display: none;
		}
	}
}
.wp-block-a8c-book__meta-popover {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgba( 0, 0, 0, 0.8 );
	color: #fff;
	padding: 1em;
}

.wp-block-a8c-book__close-button {
	position: absolute;
	top: 1em;
	right: 1em;
}

.wp-block[data-align='center'] > .wp-block-a8c-book {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wp-block[data-align='left'],
.wp-block[data-align='right'] {
	> .wp-block-a8c-book {
		margin-top: 0;
		margin-bottom: 0;
	}
}
.wp-block[data-align='left'] .wp-block-a8c-book {
	margin-right: 2rem;
}
.wp-block[data-align='right'] .wp-block-a8c-book {
	margin-left: 2rem;
}