/**
 * Core – Button Block
 */

/* Default Fill Button */
.wp-block-button:not(.is-style-button-arrow):not(.is-style-button-text-arrow) {
	.wp-block-button__link {
		transition: background-color 0.25s ease-in-out;

		&::after {
			background-image: url(../images/chevron-right-white.svg);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 14px;
			border-radius: 50%;
			content: '';
			display: inline-block;
			height: 18px;
			margin-block-start: -4px;
			margin-inline-start: 15px;
			vertical-align: middle;
			width: 14px;
		}

		&:hover {
			background-color: var(--wp--preset--color--green);
		}
	}
}

/* Custom Arrow Button */
.wp-block-button.is-style-button-arrow {
	.wp-block-button__link {
		transition: color 0.25s ease-in-out;

		&::before {
			background-color: var(--wp--preset--color--green);
			background-image: url(../images/chevron-down-white.svg);
			background-position: top 27px center;
			background-repeat: no-repeat;
			background-size: 30px;
			border-radius: 50%;
			content: '';
			display: inline-block;
			height: 70px;
			margin-inline-end: var(--wp--preset--spacing--40);
			vertical-align: middle;
			width: 70px;
		}
		&:hover {
			color: var(--wp--preset--color--green);
		}
	}
}

/* Custom Text Arrow Button */
.wp-block-button.is-style-button-text-arrow {
	.wp-block-button__link {
		position: relative;
		transition: color 0.25s ease-in-out;
		@media screen and (min-width: 782px) {
			padding-inline-end: var(--wp--preset--spacing--50);
		}

		&::after {
			background-image: url(../images/chevron-right-green-dark.svg);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 14px;
			border-radius: 50%;
			content: '';
			display: block;
			height: 18px;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			transition: background-image 0.25s ease-in-out;
			width: 14px;

			@media screen and (min-width: 782px) {
				right: 15px;
			}
		}

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

			&::after {
				background-image: url(../images/chevron-right-green.svg);
			}
		}
	}

	&.is-style-button-back {
		.wp-block-button__link {
			align-items: center;
			display: flex;
			flex-direction: row-reverse;
			padding-inline-start: 0;

			&::after {
				margin: 0 25px 0 0;
				transform: rotate(180deg);
			}
		}
	}
}