.wp-block-button {
	&.is-style-fill {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding-block: var(--wp--preset--spacing--20);
			transition: 0.3s var(--transition-easeout-quint);
			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-outline {
		.wp-element-button {
			position: relative;
			padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--70) var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
			transition: 0.3s var(--transition-easeout-quint);

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

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

			ion-icon {
				position: absolute;
				top: 50%;
				right: 1rem;
				font-size: var(--wp--preset--font-size--large);
				translate: 0 -50%;
			}
		}

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

				&:hover {
					opacity: 0.5;
				}
			}
		}

		&.has-custom-font-size {
			ion-icon {
				font-size: var(--wp--preset--font-size--medium);
			}
		}
	}

	&.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);
			padding-block: var(--wp--preset--spacing--20);
			transition: 0.3s var(--transition-easeout-quint);
			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-fill-recruit {
		--button-base-color: #f29d38;
		--button-shadow-color: color-mix(in srgb, var(--button-base-color) 80%, black);
		.wp-element-button {
			background-color: var(--button-base-color);
			color: var(--wp--preset--color--light-01);
			display: flex;
			gap: var(--wp--preset--spacing--20);
			align-items: center;
			border: var(--button-base-color);
			font-size: var(--wp--preset--font-size--large);
			box-shadow: 0px 4px 0 0 var(--button-shadow-color);
			font-weight: 550;
			border-radius: 0.5rem;
			&:hover {
				translate: 0 3px;
				box-shadow: 0px 1px 0 0 var(--button-shadow-color);
			}
		}
	}

	&.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 var(--transition-easeout-quint);
			font-family: var(--wp--preset--font-family--roboto-condensed);
			font-weight: 550;
			&:hover {
				opacity: 0.5;
			}
		}

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