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

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

	&.is-style-fill {
		.wp-element-button {
			position: relative;
			z-index: 0;
			padding-block: 1rem;
			padding-inline-start: 1.5rem;
			padding-inline-end: 2rem;
			overflow: hidden;
			color: var(--wp--preset--color--light-01);
			line-height: 1.5;
			border-radius: 5px;
			transition: 0.3s ease;
			text-decoration: none;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 150%;
				height: 100%;
				background-image: linear-gradient(45deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-medium));
				transition: 0.3s ease;
				content: "";
			}

			ion-icon {
				position: absolute;
				right: 1rem;
				transition: 0.3s ease;
				margin-inline-start: 0.5rem;
				inset: 50% 1rem auto auto;
				translate: 0 -50%;
			}

			&:hover {
				color: var(--wp--preset--color--white);

				&::before {
					width: 100%;
				}

				ion-icon {
					transform: translateX(5px);
				}
			}

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

	&.is-style-outline {
		.wp-element-button {
			position: relative;
			z-index: 0;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem 1.5rem;
			color: var(--wp--preset--color--primary);
			line-height: 1;
			background-color: var(--wp--preset--color--white);
			border: 1px solid var(--wp--preset--color--primary);
			border-radius: 5px;
			transition: 0.3s ease;

			@media (width <= 767px) {
				width: 100%;
				padding: 1rem;
			}

			ion-icon {
				margin-inline-start: 0.5rem;
				font-size: var(--wp--preset--font-size--lg);
				transition: 0.3s ease;
			}

			&:hover {
				opacity: 0.7;

				ion-icon {
					transform: translateX(5px);
				}

				&::before {
					width: 100%;
				}
			}
		}
	}

	.wp-element-button[href$=".pdf"] {
		padding-inline-end: 2rem;
		&::after {
			content: "[pdf]";
		}
	}
}