.wp-block-button__link {
	box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.1);
	transition: filter 0.2s;

	&:hover,
	&:focus {
		filter: brightness(110%);
	}

	&.has-mark-background-color {
		&:hover,
		&:focus {
			filter: brightness(95%);
		}
	}
}

/**
 * Block style: Compact
 */
.wp-block-button.is-style-compact .wp-block-button__link {
	background-color: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 35px;
	padding-left: 16px;
	padding-right: 16px;
}

/**
 * Block style: Download
 */
.wp-block-button.is-style-download .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.wp-block-button.is-style-download .wp-block-button__link::before,
.wp-block-button.is-style-download.has-white-icon .wp-block-button__link::before {
	background-image: url("data:image/svg+xml,%3csvg enable-background='new 0 0 32 32' height='20' viewBox='0 0 32 32' width='20' xmlns='http://www.w3.org/2000/svg' style='fill: white;'%3e%3cpath d='m24.972 12.288c-.364-4.631-4.249-8.288-8.972-8.288-4.04 0-7.508 2.624-8.627 6.451-3.192 1.108-5.373 4.132-5.373 7.549 0 4.411 3.589 8 8 8h13c3.86 0 7-3.14 7-7 0-3.149-2.07-5.852-5.028-6.712zm-4.265 5.419-4 4c-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-4-4c-.286-.286-.372-.716-.217-1.09.155-.373.52-.617.924-.617h2v-4c0-1.104.896-2 2-2s2 .896 2 2v4h2c.404 0 .769.244.924.617.155.374.069.804-.217 1.09z'%3e%3c/path%3e%3c/svg%3e");
	content: "";
	height: 20px;
	width: 20px;
}

.wp-block-button.is-style-download:not(.has-white-icon) .wp-block-button__link.has-mark-background-color::before,
.wp-block-button.is-style-download:not(.has-white-icon) .wp-block-button__link.has-white-background-color::before,
.wp-block-button.is-style-download.has-dark-icon .wp-block-button__link::before {
	background-image: url("data:image/svg+xml,%3csvg enable-background='new 0 0 32 32' height='20' viewBox='0 0 32 32' width='20' xmlns='http://www.w3.org/2000/svg' style='fill: %23262626;'%3e%3cpath d='m24.972 12.288c-.364-4.631-4.249-8.288-8.972-8.288-4.04 0-7.508 2.624-8.627 6.451-3.192 1.108-5.373 4.132-5.373 7.549 0 4.411 3.589 8 8 8h13c3.86 0 7-3.14 7-7 0-3.149-2.07-5.852-5.028-6.712zm-4.265 5.419-4 4c-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-4-4c-.286-.286-.372-.716-.217-1.09.155-.373.52-.617.924-.617h2v-4c0-1.104.896-2 2-2s2 .896 2 2v4h2c.404 0 .769.244.924.617.155.374.069.804-.217 1.09z'%3e%3c/path%3e%3c/svg%3e");
}

/**
 * Block variant: Outline
 */
.wp-block-button.is-style-outline .wp-block-button__link {
	box-shadow: none;

	&:hover,
	&:focus {
		filter: brightness(95%);
	}
}

/**
 * Block style: With Arrow Right
 */
.wp-block-button.is-style-arrow-right .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.wp-block-button.is-style-arrow-right .wp-block-button__link::after,
.wp-block-button.is-style-arrow-right.has-white-icon .wp-block-button__link::after {
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='fi_545682' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve' fill='white'%3E%3Cg%3E%3Cg%3E%3Cpath d='M506.134,241.843c-0.006-0.006-0.011-0.013-0.018-0.019l-104.504-104c-7.829-7.791-20.492-7.762-28.285,0.068 c-7.792,7.829-7.762,20.492,0.067,28.284L443.558,236H20c-11.046,0-20,8.954-20,20c0,11.046,8.954,20,20,20h423.557 l-70.162,69.824c-7.829,7.792-7.859,20.455-0.067,28.284c7.793,7.831,20.457,7.858,28.285,0.068l104.504-104 c0.006-0.006,0.011-0.013,0.018-0.019C513.968,262.339,513.943,249.635,506.134,241.843z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
	content: "";
	height: 20px;
	width: 20px;
}

.wp-block-button.is-style-arrow-right:not(.has-white-icon) .wp-block-button__link.has-mark-background-color::after,
.wp-block-button.is-style-arrow-right:not(.has-white-icon) .wp-block-button__link.has-white-background-color::after,
.wp-block-button.is-style-arrow-right.has-dark-icon .wp-block-button__link::after {
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='fi_545682' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve' fill='%23262626'%3E%3Cg%3E%3Cg%3E%3Cpath d='M506.134,241.843c-0.006-0.006-0.011-0.013-0.018-0.019l-104.504-104c-7.829-7.791-20.492-7.762-28.285,0.068 c-7.792,7.829-7.762,20.492,0.067,28.284L443.558,236H20c-11.046,0-20,8.954-20,20c0,11.046,8.954,20,20,20h423.557 l-70.162,69.824c-7.829,7.792-7.859,20.455-0.067,28.284c7.793,7.831,20.457,7.858,28.285,0.068l104.504-104 c0.006-0.006,0.011-0.013,0.018-0.019C513.968,262.339,513.943,249.635,506.134,241.843z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}