/**
 * core/button/plain
 */

.wp-block-button.is-style-plain .wp-block-button__link {
	--button--color--background: transparent;
	--button--color--background-hover: transparent;
	--button--color--text: var(--wp--preset--color--accent-1);
	--button--color--text-hover: var(--wp--preset--color--accent-2);
	--button--color--icon: var(--wp--preset--color--accent-4);

	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: none;
}

.wp-block-button.is-style-plain.has-icon .wp-block-button__link::after,
.wp-block-button.is-style-plain .wp-block-button__link.has-icon svg {
	--icon--width: 16px;
	--icon--height: 16px;
}

/* Alt colors */
.wp-block-button.is-style-plain .wp-block-button__link:not(:active, :hover),
.wp-block-button.is-style-plain .wp-block-button__link:is(:active, :hover) {
	background-color: var(--button--color--background) !important;
}

/* Icon */
.wp-block-button.is-style-plain.has-icon .wp-block-button__link,
.wp-block-button.is-style-plain .wp-block-button__link.has-icon {
	--icon--color: var(--wp--preset--color--accent-4);
	--icon--spacing--block-gap: var(--wp--preset--spacing--10);

	justify-content: flex-start;
	margin-inline: 0;
}

/* White text */
.wp-block-button.is-style-plain .wp-block-button__link.has-white-background-color {
	--button--color--text: var(--wp--preset--color--white);
}

/* Accent 2  */
.wp-block-button.is-style-plain .wp-block-button__link.has-accent-2-background-color {
	--button--color--text: var(--wp--preset--color--accent-2);
}

/* Accent 4 */
.wp-block-button.is-style-plain .wp-block-button__link.has-accent-4-background-color {
	--button--color--text: var(--wp--preset--color--accent-4);
}

/* Accent 1 icon */
.wp-block-button.is-style-plain.has-accent-1-icon-color .wp-block-button__link {
	--button--color--icon: var(--wp--preset--color--accent-1);
}

/* Active / Hover */
.wp-block-button.is-style-plain .wp-block-button__link:is(:active, :hover) {
	--button--color--text: var(--button--color--background-hover);
}

.wp-block-button.is-style-plain.has-accent-1-icon-color .wp-block-button__link:is(:active, :hover) {
	--button--color--icon: currentColor;
}

/* When on dark background */
.has-background[class*='has-accent-'] .wp-block-button.is-style-plain .wp-block-button__link:is(:active, :hover) {
	--button--color--text-hover: color-mix(in sRGB, currentColor, transparent 20%) !important;
}