/**
 * core/read-more/fill
 */

.wp-block-read-more.is-style-fill {
	--button--border--color: var(--wp--preset--color--accent-1);
	--button--border--color-hover: var(--button--color--background-hover);
	--button--color--background: var(--wp--preset--color--accent-1);
	--button--color--background-hover: var(--wp--preset--color--accent-2);
	--button--color--text: var(--wp--preset--color--base);
	--button--color--text-hover: var(--wp--preset--color--base);
	--button--color--icon: currentColor;

	display: flex;
	align-items: center;
	gap: var(--icon--spacing--block-gap);
	inline-size: 100%;
	padding: calc(var(--wp--preset--spacing--20) - 2px) var(--wp--preset--spacing--30);
	background-color: var(--button--color--background) !important;
	border: 2px solid var(--button--border--color);
	border-color: var(--button--border--color);
	border-radius: 100px;
	color: var(--button--color--text);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05ch;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;

	/* white-space: nowrap; */
	transition: all var(--wp--custom--transition--hover);
}

/* Icon */
.wp-block-read-more.has-icon {
	justify-content: space-between;
	word-break: unset;
	text-align: start;
}

.wp-block-read-more.is-style-fill:not(.has-icon-start) {
	--icon--spacing--block-gap: var(--wp--preset--spacing--20);
}

/* Icon: Offset positioning */
.wp-block-read-more.is-style-fill::after,
.wp-block-read-more.is-style-fill svg {
	flex: 0 0 auto;
	margin-inline: 0 var(--wp--preset--spacing--5);
	color: var(--button--color--icon);
	transition: translate var(--wp--custom--transition--hover);
}

.wp-block-read-more.is-style-fill.has-icon-start::after,
.wp-block-read-more.is-style-fill.has-icon-start svg {
	margin-inline: var(--wp--preset--spacing--5) 0;
}


/* Color: White / Base  */
.wp-block-read-more.is-style-fill.has-white-background-color {
	--button--border--color: var(--wp--preset--color--base);
	--button--color--background-hover: var(--wp--preset--color--accent-2);
	--button--color--text: var(--wp--preset--color--accent-1);
	--button--color--text-hover: var(--wp--preset--color--base);
}

/* Color: Accent 2 */
.wp-block-read-more.is-style-fill.has-accent-2-background-color {
	--button--border--color: var(--wp--preset--color--accent-2);
	--button--color--background-hover: var(--wp--preset--color--accent-1);
}

/* Color: Accent 4 */
.wp-block-read-more.is-style-fill.has-accent-4-background-color {
	--button--border--color: var(--wp--preset--color--accent-4);
	--button--color--background-hover: var(--wp--preset--color--accent-2);
	--button--color--text: var(--wp--preset--color--contrast);
	--button--color--text-hover: var(--wp--preset--color--base);
}

/* Color: Accent 4 on Accent 2 background */
[class*='has-accent-2-background-color'] .wp-block-read-more.is-style-fill.has-accent-4-background-color {
	--button--color--background-hover: var(--wp--preset--color--accent-3);
}


/* Editor */
.wp-block-read-more.is-style-fill span {
	flex: 1;
}

/* State: Active / Hover */
.wp-block-read-more.is-style-fill:is(:active, :hover) {
	background-color: var(--button--color--background-hover) !important;
	border-color: var(--button--border--color-hover) !important;
	color: var(--button--color--text-hover) !important;
}

/* Tablet screen width */
@media (width >= 768px) {
	:root :is(.wp-block-read-more.is-style-fill) {
		padding-block: calc(var(--wp--preset--spacing--30) - 2px);
	}
}