.wp-block-button {
	&.is-style-contact-mail,
	&.is-style-contact-phone {
		flex: 1 1 0;
		margin-block-start: var(--wp--preset--spacing--l);
		margin-block-end: 0;

		> .wp-block-button__link {
			display: block;
			inline-size: 100%;
			padding-block: 10px;
			padding-inline: 0;
			border-radius: 0;
			color: var(--wp--preset--color--navy);
			background-image: linear-gradient(var(--wp--preset--color--gold-bg), var(--wp--preset--color--gold));
			font-size: var(--wp--preset--font-size--x-small);

			&:is(:hover, :focus-visible) {
				text-decoration: underline;
			}
		}
	}

	&.is-style-contact-phone > .wp-block-button__link {
		color: var(--wp--preset--color--white);
		background-image: linear-gradient(var(--wp--preset--color--accent-2), var(--wp--preset--color--accent));
	}

	&.is-style-header-tel {
		margin-block-start: var(--wp--preset--spacing--l);
		margin-block-end: 0;

		> .wp-block-button__link {
			display: block;
			padding: 10px;
			border-block-width: 1px;
			border-inline-width: 1px;
			border-block-style: solid;
			border-inline-style: solid;
			border-block-color: var(--wp--preset--color--yellow);
			border-inline-color: var(--wp--preset--color--yellow);
			border-radius: var(--wp--preset--border-radius--small);
			color: var(--wp--preset--color--accent-7);
			background-color: var(--wp--preset--color--highlight);
			font-size: var(--wp--preset--font-size--x-large);
			font-weight: 600;
			text-decoration: none;

			&:is(:hover, :focus-visible) {
				text-decoration: underline;
			}
		}
	}

	&.is-style-fee {
		inline-size: 100%;
		margin-block-start: var(--wp--preset--spacing--l);
		margin-block-end: 0;

		> .wp-block-button__link {
			display: flex;
			inline-size: 100%;
			min-block-size: 2.75rem;
			align-items: center;
			justify-content: center;
			gap: var(--wp--preset--spacing--xs);
			padding-block: var(--wp--preset--spacing--xs);
			padding-inline: var(--wp--preset--spacing--l);
			border-block-start-width: 1px;
			border-block-end-width: 1px;
			border-inline-start-width: 1px;
			border-inline-end-width: 1px;
			border-block-start-style: solid;
			border-block-end-style: solid;
			border-inline-start-style: solid;
			border-inline-end-style: solid;
			border-block-start-color: var(--wp--preset--color--accent-5);
			border-block-end-color: var(--wp--preset--color--accent-5);
			border-inline-start-color: var(--wp--preset--color--accent-5);
			border-inline-end-color: var(--wp--preset--color--accent-5);
			border-radius: var(--wp--preset--border-radius--small);
			color: var(--wp--preset--color--white);
			background-color: var(--wp--preset--color--accent-1);
			font-size: var(--wp--preset--font-size--medium);
			font-weight: 500;
			line-height: var(--wp--custom--line-height--compact);
			text-align: center;
			text-decoration: none;

			&:is(:hover, :focus-visible) {
				text-decoration: underline;
				text-underline-offset: 0.2em;
			}
			cursor: pointer;
			transition-property: background-color, border-color, opacity;
			transition-duration: 0.3s;
			transition-timing-function: ease;

			.icon {
				flex-shrink: 0;
				font-size: 0.75em;
				line-height: 1;
			}

			&:hover:not(:disabled),
			&:focus-visible {
				opacity: 1;
				background-color: var(--wp--preset--color--accent-3);
				border-block-start-color: var(--wp--preset--color--accent-4);
				border-block-end-color: var(--wp--preset--color--accent-4);
				border-inline-start-color: var(--wp--preset--color--accent-4);
				border-inline-end-color: var(--wp--preset--color--accent-4);
			}

			&:focus-visible {
				outline-width: 2px;
				outline-style: solid;
				outline-color: var(--wp--preset--color--primary);
				outline-offset: 2px;
			}

			&:active:not(:disabled) {
				background-color: var(--wp--preset--color--accent-2);
				border-block-start-color: var(--wp--preset--color--accent);
				border-block-end-color: var(--wp--preset--color--accent);
				border-inline-start-color: var(--wp--preset--color--accent);
				border-inline-end-color: var(--wp--preset--color--accent);
			}
		}
	}

	&.is-style-tel {
		display: block;
		inline-size: 250px;
		margin-block-start: var(--wp--preset--spacing--s);
		margin-block-end: 0;

		margin-inline-start: auto;
		margin-inline-end: auto;

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

		> .wp-block-button__link {
			display: block;
			padding-block: var(--wp--preset--spacing--s);
			padding-inline: var(--wp--preset--spacing--s);
			border-block-end-width: 3px;
			border-block-end-style: solid;
			border-block-end-color: var(--wp--preset--color--accent-6);
			border-radius: var(--wp--preset--border-radius--small);
			color: var(--wp--preset--color--white);
			background-color: var(--wp--preset--color--accent);
			font-size: var(--wp--preset--font-size--large-plus);
			text-align: center;
			text-decoration: none;

			&:is(:hover, :focus-visible) {
				text-decoration: underline;
				text-underline-offset: 0.2em;
			}
		}
	}

	&.is-style-call > .wp-block-button__link {
		display: block;
		inline-size: 300px;
		padding-block: 5px;
		padding-inline: 5px;
		border-radius: var(--wp--preset--border-radius--small);
		color: var(--wp--preset--color--white);
		background-color: var(--wp--preset--color--accent-1);
		font-size: var(--wp--preset--font-size--large-plus);
		text-align: center;

		&:not(:hover):not(:focus-visible) {
			text-decoration: none;
		}
	}

	&:first-child {
		margin-block-start: 0;
	}
}

a.is-style-call {
	display: block;
	inline-size: 300px;
	padding-block: 5px;
	padding-inline: 5px;
	border-radius: var(--wp--preset--border-radius--small);
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--accent-1);
	font-size: var(--wp--preset--font-size--large-plus);
	text-align: center;

	&:not(:hover):not(:focus-visible) {
		text-decoration: none;
	}
}

.wp-block-button:is(.is-style-primary, .is-style-secondary) > .wp-block-button__link {
	display: inline-flex;
	min-block-size: 2.75rem;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	border-block-width: 1px;
	border-inline-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--compact);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;

	align-items: center;
	justify-content: center;

	&:hover:not(:disabled) {
		opacity: 0.9;
	}

	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-primary > .wp-block-button__link {
	background-image: linear-gradient(var(--wp--preset--color--blue) 0, var(--wp--preset--color--blue-deep) 45%, var(--wp--preset--color--navy-mid) 50%, var(--wp--preset--color--navy-deep) 100%);

	&:hover:not(:disabled),
	&:focus-visible {
		background-image: linear-gradient(var(--wp--preset--color--blue-light) 0, var(--wp--preset--color--blue-mid) 45%, var(--wp--preset--color--steel-light) 50%, var(--wp--preset--color--navy-mid) 100%);
	}
}

.wp-block-button.is-style-secondary > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-1);

	&:hover:not(:disabled),
	&:focus-visible {
		background-color: var(--wp--preset--color--accent-2);
		border-color: var(--wp--preset--color--accent-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button:is(.is-style-primary, .is-style-secondary) > .wp-block-button__link {
		transition-duration: 0s;
	}
}