.wp-block-button {
	&.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);
			box-shadow: 1px 5px 6px 0 var(--wp--preset--color--alto-10);
			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--light-01);
				background-color: var(--wp--preset--color--primary);
				border: 1px solid var(--wp--preset--color--primary);

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

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

	&.is-style-fill-contact,
	&.is-style-fill-access {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			background-color: var(--wp--preset--color--primary);
			border: 1px solid var(--wp--preset--color--primary);
			box-shadow: 1px 5px 6px 0 var(--wp--preset--color--alto-10);
			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--primary);
				border: 1px solid var(--wp--preset--color--primary);

				&:hover {
					color: var(--wp--preset--color--primary);
					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,
	&.is-style-fax {
		.wp-element-button {
			position: relative;
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: 0;
			color: var(--wp--preset--color--dark-01);
			font-family: var(--wp--preset--font-family--alto-01);
			transition: 0.3s ease;

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

		ion-icon {
			font-size: var(--wp--preset--font-size--x-large);
		}
	}

	&.is-style-tab {
		+ .is-style-tab {
			.wp-element-button {
				border-left: 1px solid var(--wp--preset--color--alto-10);
			}
		}

		.wp-element-button {
			border-block: 1px solid var(--wp--preset--color--alto-10);
			border-radius: 0;
			transition: 0.3s ease color, 0.3s ease background-color;
		}

		&:not(.is-active) {
			.wp-element-button {
				color: var(--wp--preset--color--dark-01);
				background-color: #fff;
			}

			&:hover {
				.wp-element-button {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--primary);
				}
			}
		}

		&.is-active {
			.wp-element-button {
				background-color: var(--wp--preset--color--secondary);
			}
		}

		&:first-of-type {
			.wp-element-button {
				border-inline-start: 1px solid var(--wp--preset--color--alto-10);
			}
		}

		&:last-of-type {
			.wp-element-button {
				border-inline-end: 1px solid var(--wp--preset--color--alto-10);
			}
		}

		@media (600px < width) {
			&:first-of-type {
				.wp-element-button {
					border-radius: 5px 0 0 5px;
				}
			}

			&:last-of-type {
				.wp-element-button {
					border-radius: 0 5px 5px 0;
				}
			}
		}

		@media (width < 600px) {
			.wp-element-button {
				padding-block: var(--wp--preset--spacing--20);
				padding-inline: var(--wp--preset--spacing--20);
				line-height: 1.2;
				padding-inline: 0.5em;
			}
		}
	}

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

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

			&:not(.has-background) {
				color: var(--wp--preset--color--primary);
				border: 1px solid var(--wp--preset--color--primary);
				background-color: var(--wp--preset--color--white);
				&:hover {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--primary);
					ion-icon {
						color: var(--wp--preset--color--light-01);
					}
				}
			}

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

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