.wp-block-button {
	.wp-block-button__link {
		display: inline-block;
	}

	& + .wp-block-button {
		margin-block-start: 0;
	}

	&.is-style-call {
		.wp-block-button__link {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: var(--wp--preset--color--primary);
			line-height: 1;
			background-color: transparent;
			padding-block: 0;
			padding-inline: 0;
			gap: var(--wp--preset--spacing--20);
			font-family: var(--wp--preset--font-family--google-sans);
		}
	}

	&.is-style-form {
		.wp-block-button__link {
			position: relative;
			z-index: 0;
			display: flex;
			align-items: center;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--30);
			color: var(--wp--preset--color--light-01);
			line-height: 1;
			background-color: var(--wp--preset--color--primary);
			transition-property: color;
			transition-duration: 0.3s;
			transition-timing-function: ease;
			gap: var(--wp--preset--spacing--20);

			&.has-text-align-center {
				justify-content: center;
			}
		}

		svg.pxlm-icon {
			font-size: 1.1em;
			transition-property: transform;
			transition-duration: 0.3s;
			transition-timing-function: ease;
		}
	}

	&.is-style-fill {
		> .wp-block-button__link {
		position: relative;
		z-index: 0;
		display: flex;
		justify-content: space-between;
		padding-block: var(--wp--preset--spacing--20);
		padding-inline: var(--wp--preset--spacing--30);
		border-radius: var(--wp--preset--border-radius--small);
		color: var(--wp--preset--color--light-01);
		line-height: 1;
		text-align: center;
		background-color: var(--wp--preset--color--primary);
		transition-property: color;
		transition-duration: 0.3s;
		transition-timing-function: ease;

		svg.pxlm-icon {
			margin-inline-start: 0.5rem;
			font-size: 1.2em;
			transition-property: transform;
			transition-duration: 0.3s;
			transition-timing-function: ease;
		}

		@media (hover: hover) {
			&:hover {
				color: var(--wp--preset--color--light-01);

				svg.pxlm-icon {
					transform: translateX(5px);
				}
			}
		}

		&:active {
			color: var(--wp--preset--color--light-01);

			svg.pxlm-icon {
				transform: translateX(5px);
			}
		}
		}
	}

	&.is-style-outline {
		> .wp-block-button__link {
		position: relative;
		z-index: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 1rem;
		padding-inline: 1.5rem;
		color: var(--wp--preset--color--primary);
		line-height: 1;
		background-color: var(--wp--preset--color--light-01);
		border-block-width: 1px;
		border-block-style: solid;
		border-block-color: var(--wp--preset--color--primary);
		border-inline-width: 1px;
		border-inline-style: solid;
		border-inline-color: var(--wp--preset--color--primary);
		border-radius: var(--wp--preset--border-radius--small);
		transition-property: opacity;
		transition-duration: 0.3s;
		transition-timing-function: ease;

		@media (width <= 781px) {
			inline-size: 100%;
			padding-block: 1rem;
			padding-inline: 0.5rem;
		}

		svg.pxlm-icon {
			margin-inline-start: 0.5rem;
			font-size: var(--wp--preset--font-size--large);
			transition-property: transform;
			transition-duration: 0.3s;
			transition-timing-function: ease;
		}

		@media (hover: hover) {
			&:hover {
				opacity: 0.7;

				svg.pxlm-icon {
					transform: translateX(5px);
				}

				&::before {
					inline-size: 100%;
				}
			}
		}

		&:active {
			opacity: 0.7;

			svg.pxlm-icon {
				transform: translateX(5px);
			}

			&::before {
				inline-size: 100%;
			}
		}
		}
	}

	&.is-style-none {
		> .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--xxx-large);
		line-height: 1;
		transition-property: opacity;
		transition-duration: 0.3s;
		transition-timing-function: ease;

		@media (width <= 781px) {
			inline-size: 100%;
			padding-block: 1rem;
			padding-inline: 2rem;
		}

		svg.pxlm-icon {
			margin-inline-end: 0.5rem;
		}

		@media (hover: hover) {
			&:hover {
				opacity: 0.7;
			}
		}

		&:active {
			opacity: 0.7;
		}
		}
	}

	&.is-style-tab {
		.wp-element-button {
			border-block-width: 1px;
			border-block-style: solid;
			border-block-color: var(--wp--preset--color--primary);
			border-inline-width: 1px;
			border-inline-style: solid;
			border-inline-color: var(--wp--preset--color--primary);
			border-block-end-width: 0;
			border-block-end-style: none;
			border-start-start-radius: var(--wp--preset--border-radius--medium);
			border-start-end-radius: var(--wp--preset--border-radius--medium);
			border-end-end-radius: var(--wp--preset--border-radius--none);
			border-end-start-radius: var(--wp--preset--border-radius--none);
			padding-block: 0.2rem;
		}

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

		&:not(.is-active) .wp-element-button {
			color: var(--wp--preset--color--primary);
			background-color: transparent;
			cursor: pointer;
			transition-property: color, background-color;
			transition-duration: 0.3s, 0.3s;
			transition-timing-function: ease, ease;

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

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

	&.is-style-contact-call,
	&.is-style-contact-form {
		display: flex;
		flex: 1;
		align-self: stretch;
		padding-block: 1rem;
		padding-inline: 1rem;

		> .wp-block-button__link {
			justify-content: center;
			inline-size: 100%;
		}

		@media (width <= 781px) {
			padding-block: 0;
			padding-inline: 0;
		}
	}

	&.is-style-contact-call {
		> .wp-block-button__link {
		padding-block: 1rem;
		padding-inline: 1rem;
		font-family: var(--wp--preset--font-family--google-sans);
		background-color: var(--wp--preset--color--primary);

		svg.pxlm-icon {
			font-size: var(--wp--preset--font-size--xx-large);
		}
		}
	}

	&.is-style-contact-form {
		> .wp-block-button__link {
			padding-block: 1rem;
			padding-inline: 1rem;
			color: var(--wp--preset--color--light-01);
			font-size: var(--wp--preset--font-size--large);
			background-color: var(--wp--preset--color--primary);

			svg.pxlm-icon {
				font-size: var(--wp--preset--font-size--xx-large);
			}
		}

		&::before {
			position: absolute;
			inset-block-start: 0;
			inset-block-end: 0;
			inset-inline-start: 0;
			inset-inline-end: 0;
			inline-size: 1px;
			block-size: 100%;
			margin-inline: auto;
			background-color: var(--wp--preset--color--primary-medium);
			content: "";
		}

		@media (width <= 781px) {
			&::before {
				display: none;
			}
		}
	}

	&.is-style-page-link {
		> .wp-block-button__link {
		padding-block: 0.5rem;
		padding-inline: 1rem;
		font-size: var(--wp--preset--font-size--small);
		}
	}

	&.is-style-flow {
		> .wp-block-button__link {
		text-align: center;
		}
	}
}