.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);
			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;
				}
			}
		}
	}

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

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

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

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

	&.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--primary);
					border: 1px solid var(--wp--preset--color--primary);

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

	&.is-style-call {
		.wp-element-button {
			position: relative;
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: 0;
			color: var(--wp--preset--color--dark-01);
			transition: 0.3s ease;

			&: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--dark-02);
			}
		}

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

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