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

	&.is-style-default,
	&:not([class*="is-style"]) {
		.wp-block-button__link {
			padding-block-start: var(--wp--preset--spacing--20);
			padding-block-end: var(--wp--preset--spacing--20);
			padding-inline-start: var(--wp--preset--spacing--50);
			padding-inline-end: var(--wp--preset--spacing--50);
			font-size: var(--wp--preset--font-size--medium-large);
			border-radius: 50px;
			transition: 0.3s;

			.ion {
				margin-inline-end: var(--wp--preset--spacing--20);
				font-size: var(--wp--preset--font-size--huge);
			}

			&:hover {
				opacity: 0.8;
			}
		}
	}

	&.is-style-outline {
		.wp-block-button__link {
			display: inline-flex;
			align-items: center;
			padding-block-start: 0.5rem;
			padding-block-end: 0.5rem;
			padding-inline-start: var(--wp--preset--spacing--20);
			padding-inline-end: var(--wp--preset--spacing--20);
			color: var(--wp--preset--color--dark-01);
			border: 1px solid var(--wp--preset--color--dark-01);
			border-radius: 0;
			transition: 0.3s;

			.ion {
				margin-inline-end: var(--wp--preset--spacing--20);
				font-size: var(--wp--preset--font-size--huge);

				&.ion-logo-instagram {
					color: var(--wp--preset--color--secondary);
				}
			}

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

				.ion {
					color: inherit;
				}
			}
		}
	}

	&.is-style-text {
		.wp-block-button__link {
			display: inline-flex;
			align-items: center;
			padding-block-start: 0.5rem;
			padding-block-end: 0.5rem;
			padding-inline-start: 0.5rem;
			padding-inline-end: 0.5rem;
			border-radius: 0;
			opacity: 0.7;
			transition: 0.3s;

			&:hover {
				opacity: 1;
			}
		}
	}

	&.is-style-outline-arrow-01 {
		@media (width < 768px) {
			width: 100%;
		}

		.wp-block-button__link {
			position: relative;
			display: inline-block;
			padding-block-start: var(--wp--preset--spacing--20);
			padding-block-end: var(--wp--preset--spacing--20);
			padding-inline-start: var(--wp--preset--spacing--40);
			padding-inline-end: var(--wp--preset--spacing--40);
			color: var(--wp--preset--color--dark-01);
			text-align: center;
			line-height: 1.5;
			background-color: var(--wp--preset--color--white);
			border: 1px solid var(--wp--preset--color--dark-01);
			border-radius: 0;
			transition: 0.3s;

			.ion {
				margin-inline-end: var(--wp--preset--spacing--20);
				font-size: var(--wp--preset--font-size--huge);

				&.ion-logo-instagram {
					color: var(--wp--preset--color--secondary);
				}
			}

			&::after {
				position: absolute;
				right: 2px;
				bottom: 2px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 0 10px 10px;
				border-color: transparent transparent var(--wp--preset--color--dark-01) transparent;
				content: "";
			}

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

				.ion {
					color: inherit;
				}

				&::after {
					border-color: transparent transparent var(--wp--preset--color--light-01) transparent;
				}
			}

			&.has-secondary-background-color {
				color: var(--wp--preset--color--light-01);
				background-color: var(--wp--preset--color--secondary);
				border: 1px solid var(--wp--preset--color--secondary);

				&::after {
					border-color: transparent transparent var(--wp--preset--color--light-01) transparent;
				}

				&:hover {
					color: var(--wp--preset--color--secondary);
					background-color: var(--wp--preset--color--white);
					border: 1px solid var(--wp--preset--color--secondary);

					&::after {
						border-color: transparent transparent var(--wp--preset--color--secondary) transparent;
					}
				}
			}

			@media (width < 768px) {
				display: block;
				width: 100%;
			}
		}
	}

	&.is-style-outline-arrow-01-large {
		width: 80%;

		.wp-block-button__link {
			position: relative;
			align-items: center;
			width: 100%;
			margin-inline-end: 0;
			margin-block-end: 0;
			padding-block-start: var(--wp--preset--spacing--40);
			padding-block-end: var(--wp--preset--spacing--40);
			padding-inline-start: var(--wp--preset--spacing--40);
			padding-inline-end: var(--wp--preset--spacing--40);
			color: var(--wp--preset--color--dark-01);
			text-align: center;
			border: 1px solid var(--wp--preset--color--dark-01);
			border-radius: 0;
			transition: 0.3s;

			.ion {
				margin-inline-end: var(--wp--preset--spacing--20);
				font-size: var(--wp--preset--font-size--huge);
			}

			&.has-secondary-background-color {
				color: var(--wp--preset--color--light-01);
				border: 1px solid var(--wp--preset--color--secondary);

				&:hover {
					color: var(--wp--preset--color--secondary);
					background-color: var(--wp--preset--color--light-01);
					border: 1px solid var(--wp--preset--color--secondary);

					&::after {
						border-color: transparent transparent var(--wp--preset--color--secondary) transparent;
					}
				}

				&::after {
					border-color: transparent transparent var(--wp--preset--color--light-01) transparent;
				}
			}

			&::after {
				position: absolute;
				inset-inline-end: 2px;
				inset-block-end: 2px;
				width: 10px;
				height: 10px;
				border-color: transparent transparent var(--wp--preset--color--primary) transparent;
				border-style: solid;
				border-width: 0 0 10px 10px;
				content: "";
			}

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

				&::after {
					border-color: transparent transparent var(--wp--preset--color--light-01) transparent;
				}
			}

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

				.ion {
					color: inherit;
				}
			}

			@media (width < 768px) {
				width: 100%;
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: var(--wp--preset--spacing--40);
				padding-inline-end: var(--wp--preset--spacing--40);
			}
		}

		@media (width < 768px) {
			width: 100%;
		}
	}

	&.is-style-outline-arrow-02 {
		.wp-block-button__link {
			position: relative;
			display: inline-flex;
			align-items: center;
			padding-block-start: 0.5rem;
			padding-block-end: 0.5rem;
			padding-inline-start: var(--wp--preset--spacing--20);
			padding-inline-end: var(--wp--preset--spacing--20);
			color: var(--wp--preset--color--dark-01);
			border: 1px solid var(--wp--preset--color--dark-01);
			border-radius: 0;
			transition: 0.3s;

			&::after {
				margin-inline-start: 0.5rem;
				font-family: var(--wp--preset--font-family--ionicons);
				content: "";
			}

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

				&::after {
					border-color: transparent transparent var(--wp--preset--color--light-01) transparent;
				}
			}

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

				.ion {
					color: inherit;
				}
			}

			@media (width < 768px) {
				width: 100%;
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: var(--wp--preset--spacing--40);
				padding-inline-end: var(--wp--preset--spacing--40);
			}
		}
	}

	&.is-style-fill {
		.wp-block-button__link {
			display: inline-flex;
			align-items: center;
			padding-block-start: 0.5rem;
			padding-block-end: 0.5rem;
			padding-inline-start: var(--wp--preset--spacing--20);
			padding-inline-end: var(--wp--preset--spacing--20);
			border: 2px solid var(--wp--preset--color--dark-01);
			border-radius: 0;
			transition: 0.3s;

			.ion {
				margin-inline-end: var(--wp--preset--spacing--20);
				font-size: var(--wp--preset--font-size--huge);

				&.ion-logo-instagram {
					color: var(--wp--preset--color--secondary);
				}
			}

			&:hover {
				opacity: 0.8;
			}

			@media (width < 768px) {
				width: 100%;
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: var(--wp--preset--spacing--40);
				padding-inline-end: var(--wp--preset--spacing--40);
			}
		}
	}

	@media (width < 768px) {
		max-width: calc(100vw - var(--wp--preset--spacing--40));
	}
}