/* Painike: Ensisijainen (oletus) */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	background-color: var(--froggy-btn-primary-bg);
	color: var(--froggy-btn-primary-text);
	align-items: center;
	gap: 9px;
	transition: 0.3s ease;
	transition-property: background-color;
}

.wp-block-button:hover .wp-block-button__link {
	background-color: color-mix(in srgb, var(--froggy-btn-primary-bg) 90%, transparent);
}

.wp-block-button .wp-block-button__link:focus-visible {
	outline-offset: -2px;
	outline-color: var(--wp--preset--color--accent);
	outline-width: 2px;
	outline-style: solid;
}

/* Ensisijaisen painikkeen nuoli */
.wp-block-button .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.05em;
	aspect-ratio: 18 / 16;
	background-color: var(--wp--preset--color--accent);
	mask-image: url("images/arrow.svg");
	mask-repeat: no-repeat;
	mask-size: contain;
	transition: 0.3s ease;
	transition-property: transform;
}

.wp-block-button .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Painike: Toissijainen */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--text-on-light);
	color: var(--froggy-btn-secondary-text);
	transition-property: background-color, border-color;
}

.wp-block-button.is-style-secondary .wp-block-button__link::after,
.wp-block-button.is-style-simple .wp-block-button__link::after
{
	content: none;
}

.wp-block-button.is-style-secondary:hover .wp-block-button__link {
	background-color: var(--froggy-btn-secondary-bg-hover);
	border-color: var(--wp--preset--color--accent);
}

/* Painike: Yksinkertainen */
.wp-block-button.is-style-simple .wp-block-button__link {
	background: none;
	color: var(--wp--preset--color--text-on-light);
	text-decoration: underline dotted;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	padding: 0;
	border-radius: 0;
	transition-property: color, text-decoration-color;
}

.wp-block-button.is-style-simple:hover .wp-block-button__link {
	color: var(--wp--preset--color--accent);
	text-decoration-color: var(--wp--preset--color--accent);
}