.wp-block-button {
	.wp-element-button {
		&:not([href]) {
			pointer-events: none;
		}
	}

	&: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);
			transition: 0.3s ease color, 0.3s ease background-color, 0.3s ease translate;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--40);

			ion-icon {
				transition: inherit;
			}

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

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

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

			&.has-background {
				&.has-accent-2-background-color {
					border: 1px solid var(--wp--preset--color--accent-2);
					&:hover {
						color: var(--wp--preset--color--accent-2);
						background-color: var(--wp--preset--color--white) !important;
					}
				}

				&.has-pale-pink-background-color {
					border: 1px solid var(--wp--preset--color--pale-pink);
					&:hover {
						color: var(--wp--preset--color--pale-pink);
						background-color: var(--wp--preset--color--white) !important;
					}
				}
			}
		}
	}
	&.is-style-outline {
		.wp-element-button {
			&[href]:not(.has-background) {
				color: var(--wp--preset--color--accent-1);
				background-color: var(--wp--preset--color--white);
				border: 1px solid var(--wp--preset--color--accent-1);

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

			&:not([href]) {
				background-color: var(--wp--preset--color--base);
				border: 1px solid var(--wp--preset--color--base-1);
			}
		}
	}
	&.is-style-fill-reserve,
	&.is-style-fill-call,
	&.is-style-fill-access {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			background-color: var(--wp--preset--color--accent-1);
			border: 1px solid var(--wp--preset--color--accent-1);
			transition: 0.3s ease;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--50);
			height: auto;
			&:not(.has-background),
			&.has-primary-background-color {
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--accent-1);
				border: 1px solid var(--wp--preset--color--accent-1);

				&:hover {
					color: var(--wp--preset--color--accent-1);
					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 {
		transition: 0.3s ease;
		.wp-element-button {
			position: relative;
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: 0;
			font-family: var(--wp--preset--font-family--neuseit-grotesk);
			background-color: transparent;
		}

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

		ion-icon {
			font-size: 0.9em;
			color: var(--wp--preset--color--accent-1);
		}
	}

	&.is-style-anchor-link {
		.wp-element-button {
			background-color: #cdb896;
			border-radius: 5px;
			width: fit-content;
			border: 1px solid #cdb896;
			font-size: 18px;
			transition: 0.1s ease-in-out;
			padding-inline: 2rem;
			padding-block: 0.5rem;
			text-align: center;
			&:hover {
				background-color: #fff;
				color: #cdb896;
			}

			&:not([href]) {
				text-align: center;
				background-color: oklch(0.60 0.04 80.87 / 1);
			}
		}

		i {
			display: block;
		}

		@media (width < 600px) {
			width: 100%;
			.wp-element-button {
				font-size: 4.5vw;
				letter-spacing: 0;
				padding: 12px 7px 15px;
				width: 100%;
			}
		}
	}

	&.is-style-stitch {
		.wp-element-button {
			position: relative;
			background: #f5d9c5;
			box-shadow: 0px 0px 0px 5px #f5d9c5;
			border: dashed 2px white;

			color: #a55653;

			letter-spacing: 0.15em;
			display: inline-block;
			border-radius: 8px;
			&:hover {
				opacity: 0.8;
			}

			@media (600px <= width) {
				padding: 0.5em 2.5em;
				font-size: 19.5px;
			}

			@media (width < 600px) {
				padding: 0.5rem;
				font-size: 17px;
			}
		}
		span {
			position: relative;
			display: block;
			border: 1px solid var(--border-color);
			z-index: 3;
			font-size: 16px;
		}
	}

	&.is-style-rich {
		.wp-element-button {
			display: inline-block;
			position: relative;
			color: var(--text-color);
			font-size: 16px;
			transition: ease-in-out 0.2s;
			padding: 0;
			background: transparent !important;
			line-height: 1.85;

			&::before {
				position: absolute;
				top: 5px;
				left: 5px;
				width: 100%;
				height: 100%;
				background-color: var(--background-color);
				content: "";
				z-index: 1;
				transition: ease-in-out 0.2s;
			}

			&::after {
				position: absolute;
				top: 0;
				right: -25px;
				bottom: 0;
				margin: auto;
				width: 50px;
				height: 1px;
				background-color: var(--border-color);
				content: "";
				z-index: 2;
			}

			&[href] {
				--border-color: #ddbb90;
				--background-color: #f4e8d9;
				--text-color: #8b613b;
			}

			&:not([href]) {
				--border-color: #ccc;
				--background-color: #eee;
				--text-color: #7f7a7a;
				pointer-events: none;
			}

			&:hover {
				&::before {
					left: 0;
					top: 0;
				}
			}

			&.has-warm-chestnut-background-color {
				--background-color: var(--wp--preset--color--warm-chestnut);
				--text-color: #ffffff;
				--border-color: #80530c;
			}
		}
		span {
			position: relative;
			display: block;
			padding: 8px 58px 8px 56px;
			border: 1px solid var(--border-color);
			z-index: 3;
			font-size: 16px;
		}

		@media (width < 600px) {
			span {
				padding: 8px 20px 8px 20px;
				font-size: 14.5px;
			}
		}
	}
}