.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 var(--transition-easeout-quint) color, 0.3s var(--transition-easeout-quint) background-color, 0.3s var(--transition-easeout-quint) 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;
					}
				}
			}
		}
	}
	&.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 {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			background-color: var(--wp--preset--color--accent-2);
			border: 1px solid var(--wp--preset--color--accent-2);
			transition: 0.3s var(--transition-easeout-quint);
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--50);
			height: auto;

			/* 背景がない時　と　指定した色と同じ色を指定したとき */
			&:not(.has-background),
			&.has-accent-2-background-color {
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--accent-2);
				border: 1px solid var(--wp--preset--color--accent-2);

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

			/* 背景があるとき */
			&.has-background {
				&.has-accent-1-background-color {
					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) !important;
						background-color: var(--wp--preset--color--white) !important;
					}
				}
			}
		}
	}
	&.is-style-call {
		transition: 0.3s var(--transition-easeout-quint);
		.wp-element-button {
			position: relative;
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: 0;
			font-family: var(--wp--preset--font-family--roboto-condensed);
			background-color: transparent;
		}

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

		ion-icon {
			font-size: 0.9em;
			color: var(--wp--preset--color--accent-2);
		}
	}
	&.is-style-anchor-link {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			font-size: var(--wp--preset--font-size--small);
			transition: 0.3s var(--transition-easeout-quint) color, 0.3s var(--transition-easeout-quint) background-color;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--40);

			ion-icon {
				color: inherit;
				transition: 0.3s var(--transition-easeout-quint) translate, 0.3s var(--transition-easeout-quint) color;
			}

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

					ion-icon {
						color: var(--wp--preset--color--white);
					}
				}
			}

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

			@media (width < 600px) {
				padding-inline: var(--wp--preset--spacing--30);
			}
		}
	}
}