.wp-block-button {
	&:not([class*="is-style-"]),
	&.is-style-fill,
	&.is-style-outline {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--70) var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
			transition: 0.3s ease color, 0.3s ease background-color;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--50);

			ion-icon {
				transition: 0.3s ease translate, 0.3s ease color;
			}

			&:hover {
				ion-icon {
					translate: 5px 0;
				}
			}
		}
	}

	&.is-style-fill,
	&:not([class*="is-style-"]) {
		.wp-element-button {
			&:not(.has-background) {
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--accent);
				border: 1px solid var(--wp--preset--color--accent);

				&:hover {
					color: var(--wp--preset--color--accent);
					background-color: var(--wp--preset--color--white);
				}
			}
		}
	}

	&.is-style-outline {
		.wp-element-button {
			&:not(.has-background) {
				color: var(--wp--preset--color--accent);
				background-color: var(--wp--preset--color--white);
				border: 1px solid var(--wp--preset--color--accent);

				&:hover {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--accent);
				}
			}
		}
	}

	&.is-style-fill-reserve,
	&.is-style-fill-access {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			background-color: var(--wp--preset--color--accent);
			border: 1px solid var(--wp--preset--color--accent);
			transition: 0.3s ease;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--50);

			&:not(.has-background),
			&.has-primary-background-color {
				color: var(--wp--preset--color--light-01);
				background-color: var(--wp--preset--color--accent);
				border: 1px solid var(--wp--preset--color--accent);

				&:hover {
					color: var(--wp--preset--color--accent);
					background-color: var(--wp--preset--color--white);
				}
			}

			&.has-background {
				&.has-secondary-background-color {
					background-color: var(--wp--preset--color--secondary);
					border: 1px solid var(--wp--preset--color--secondary);

					&:hover {
						color: var(--wp--preset--color--secondary) !important;
						background-color: var(--wp--preset--color--white) !important;
					}
				}
			}
		}
	}

	&.is-style-call {
		transition: 0.3s ease;

		.wp-element-button {
			position: relative;
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: 0;
			font-family: var(--wp--preset--font-family--neuseit-grotesk);
			background-color: transparent;
		}

		&:has(a) {
			&:hover {
				opacity: 0.5;
			}
		}

		ion-icon {
			font-size: 0.9em;
		}
	}

	&.is-style-anchor-link {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			font-size: var(--wp--preset--font-size--small);
			line-height: 1.2;
			transition: 0.3s ease color, 0.3s ease background-color;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--40);

			ion-icon {
				color: inherit;
				transition: 0.3s ease translate, 0.3s ease color;
			}

			&:not(.has-background) {
				color: var(--wp--preset--color--accent);
				background-color: var(--wp--preset--color--white);
				border: 1px solid var(--wp--preset--color--accent);

				&:hover {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--accent);

					ion-icon {
						color: var(--wp--preset--color--light-01);
					}
				}
			}

			&:hover {
				ion-icon {
					translate: 0 2px;
				}
			}

			@media (width <= 768px) {
				padding-inline: var(--wp--preset--spacing--30);
			}
		}
	}
}