/* For button style */
.wp-block-read-more.is-style-button:focus,
.wp-block-read-more.is-style-button:hover,
.wp-block-read-more.is-style-button-outlined:focus,
.wp-block-read-more.is-style-button-outlined:hover {
	background-color: var(--wp--preset--color--theme-5);
	border-color: var(--wp--preset--color--theme-5);
	color: var(--wp--preset--color--theme-1);
	text-decoration: none;
}
.wp-block-read-more.is-style-button:focus,
.wp-block-read-more.is-style-button-outlined:focus {
	outline-offset: 4px;
}
/* For icon first and icon last styles */
.wp-block-read-more.is-style-icon-first,
.wp-block-read-more.is-style-icon-last,
.wp-block-read-more.is-style-large-icon-first,
.wp-block-read-more.is-style-large-icon-last {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}
.wp-block-read-more.is-style-icon-first::before,
.wp-block-read-more.is-style-icon-last::after,
.wp-block-read-more.is-style-large-icon-first::before,
.wp-block-read-more.is-style-large-icon-last::after {
	background-color: currentColor;
	content: "";
	display: block;
	height: 1.5rem;
	mask-image: url('../../images/play-icon.svg');
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 1.5rem 1.5rem;
	width: 1.5rem;
}
.wp-block-read-more.is-style-large-icon-first::before,
.wp-block-read-more.is-style-large-icon-last::after {
	height: 3.25rem;
	mask-size: 3.25rem 3.25rem;
	width: 3.25rem;
}
/* Editor only (the rich-text class never renders on the front end): the
   editable Read More in a query loop collapses to its text line and
   ignores its icon pseudo-element's height, dropping the icon below its
   preview siblings; holding each style's icon height keeps the canvas
   layout identical to the front end. The button styles need no guard —
   their height comes from padding on the element itself. */
.block-editor-rich-text__editable.wp-block-read-more.is-style-icon-first,
.block-editor-rich-text__editable.wp-block-read-more.is-style-icon-last {
	min-height: 1.5rem;
}
.block-editor-rich-text__editable.wp-block-read-more.is-style-large-icon-first,
.block-editor-rich-text__editable.wp-block-read-more.is-style-large-icon-last {
	min-height: 3.25rem;
}
.wp-block-read-more.is-style-icon-first:hover::before,
.wp-block-read-more.is-style-icon-last:hover::after,
.wp-block-read-more.is-style-large-icon-first:hover::before,
.wp-block-read-more.is-style-large-icon-last:hover::after,
.wp-block-read-more.is-style-icon-first:focus::before,
.wp-block-read-more.is-style-icon-last:focus::after,
.wp-block-read-more.is-style-large-icon-first:focus::before,
.wp-block-read-more.is-style-large-icon-last:focus::after {
	background-color: var(--wp--preset--color--theme-8);
}
@media not (prefers-reduced-motion) {
	.wp-block-read-more.is-style-icon-first::before,
	.wp-block-read-more.is-style-icon-last::after,
	.wp-block-read-more.is-style-large-icon-first::before,
	.wp-block-read-more.is-style-large-icon-last::after {
		transition: background-color 0.4s ease;
	}
	.wp-block-read-more.is-style-button,
	.wp-block-read-more.is-style-button-outlined {
		transition: background-color 0.4s, border-color 0.4s, color 0.4s ease;
	}
}