/* --- Button --- */
.wp-block-read-more.is-style-fill {
	--read-more--color--background: var(--wp--preset--color--contrast);
	--read-more--color--text: var(--wp--preset--color--base);
	--read-more--color--background-hover: var(--wp--preset--color--accent-3);
	--read-more--icon-filter: invert(1);
	--read-more--icon--translate-x: 0;
	--read-more--icon--scale: 1.5;

	padding: calc(1.25em - 1px) var(--wp--preset--spacing--30);
	background-color: var(--read-more--color--background);
	border: 1px solid var(--read-more--color--background);
	color: var(--read-more--color--text);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.075ch;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color var(--wp--custom--transition--hover), border-color var(--wp--custom--transition--hover), color var(--wp--custom--transition--hover);
}

/* If light color background, add contrast text */
.wp-block-read-more.is-style-fill.wp-block-read-more.is-style-fill:where(.has-accent-2-background-color, .has-base-background-color, .has-base-3-background-color) {
	--read-more--color--text: var(--wp--preset--color--contrast);
}

/* Button with icons */
.wp-block-read-more.is-style-fill :where(svg),
.wp-block-read-more.has-icon::after {
	--icon--width: 1em;
	--icon--height: 1em;

	flex-shrink: 0;
	scale: var(--read-more--icon--scale);
	translate: var(--read-more--icon--translate-x) 0.0625em;
	color: currentColor;
}

.wp-block-read-more.is-style-fill[class*='has-icon-'],
.wp-block-read-more .wp-block-read-more__link[class*='has-icon-'] {
	--icon--spacing--block-gap: 0.625em;
}

.wp-block-read-more.is-style-fill.has-icon img:first-child:not(:only-child) {
	margin-inline-end: var(--wp--preset--spacing--10);
}

.wp-block-read-more[style*='--icon--color'] {
	--icon--color: inherit;
}

/* Visually hide label */
.wp-block-read-more.is-style-fill[class*='has-icon-'].has-hidden-label .icon-label {
	position: absolute !important;
	block-size: 1px !important;
	inline-size: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

/* Button hover states */
.wp-block-read-more.is-style-fill:hover {
	--read-more--color--text: var(--wp--preset--color--base);

	background-color: var(--read-more--color--background-hover) !important;
	border-color: var(--read-more--color--background-hover);
}

/* If button has a dark background color, invert hover color */
.has-contrast-background-color .wp-block-read-more.is-style-fill:hover {
	--read-more--color--background-hover: var(--wp--preset--color--base);
	--read-more--color--text: var(--wp--preset--color--contrast);
}

.wp-block-read-more.has-icon:not(.has-hidden-label):hover {
	--read-more--icon--translate-x: 0.25em;
}

/* Icon on left */
.wp-block-read-more.has-icon.has-icon-start:not(.has-hidden-label):hover,
.wp-block-read-more.has-icon-start:not(.has-hidden-label):hover {
	--read-more--icon--translate-x: -0.25em;
}