/**
 * core/button
 */

.wp-block-button .wp-block-button__link {
	--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;
	justify-content: center;
	gap: var(--icon--spacing--block-gap);
	inline-size: 100%;
	background-color: var(--button--color--background) !important;
	border-color: var(--button--border--color);
	color: var(--button--color--text);

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

.has-accent-2-background-color .wp-block-button .wp-block-button__link {
	--button--color--background-hover: var(--wp--preset--color--base) !important;
	--button--color--text-hover: var(--wp--preset--color--accent-2) !important;
}

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

.wp-block-button.has-icon:not(.has-icon-start) .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-icon:not(.has-icon-start) {
	--icon--spacing--block-gap: var(--wp--preset--spacing--20);
}

/* Icon: Offset positioning */
.wp-block-button.has-icon .wp-block-button__link::after,
.wp-block-button .wp-block-button__link.has-icon 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-button.has-icon-start .wp-block-button__link::after,
.wp-block-button .wp-block-button__link.has-icon-start svg {
	margin-inline: 0;
}


/* Color: White / Base  */
.wp-block-button .wp-block-button__link.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-button .wp-block-button__link.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-button .wp-block-button__link.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-button .wp-block-button__link.has-accent-4-background-color {
	--button--color--background-hover: var(--wp--preset--color--accent-3);
}

/* Size: Small button */
.wp-block-buttons.is-small .wp-block-button .wp-block-button__link {
	padding-block: calc(var(--wp--preset--spacing--20) - 2px);
}

/* Editor */
.wp-block-button.has-icon .wp-block-button__link span {
	flex: 1;
}

/* State: Active / Hover */
.wp-block-button .wp-block-button__link.wp-block-button__link: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-button .wp-block-button__link) {
		padding-block: calc(var(--wp--preset--spacing--30) - 2px);
	}
}