/* Block Button
 * Only style which cannot be handled by the theme.json file.
--------------------------------------------- */

.wp-block-button__link {
	align-items: center;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	position: relative;
}

.wp-block-button__link::before,
.wp-block-button__link::after {
	font-weight: 700;
	transition: transform 0.3s ease-in-out;
}

.wp-block-button__link::before {
	content: '[';
	transform: translateX(calc(100% - 40px));
}

.wp-block-button__link::after {
	content: ']';
	transform: translateX(calc(100% + 40px));
}

.wp-block-button__link:hover::before,
.wp-block-button__link:focus::before {
	transform: translateX(-6px);
}

.wp-block-button__link:hover::after,
.wp-block-button__link:focus::after {
	transform: translateX(6px);
}

/* Arrow */
.wp-block-button.is-style-arrow .wp-block-button__link {
	gap: var(--wp--preset--spacing--small);
}

.wp-block-button.is-style-arrow .wp-block-button__link::before {
	content: none;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: '→';
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	transform: none;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-arrow .wp-block-button__link:focus::after {
	transform: translateX(4px);
}


/* Search */
.wp-block-button.is-style-search .wp-block-button__link {
	align-items: center;
	font-size: 0px;
	gap: 0;
	height: var(--wp--preset--spacing--xx-large);
	justify-content: center;
	width: var(--wp--preset--spacing--xx-large);
}

.wp-block-button.is-style-search .wp-block-button__link::before {
	content: none;
}

.wp-block-button.is-style-search .wp-block-button__link::after {
	-webkit-mask-image: url('../icons/search.svg');
	background-color: var(--wp--preset--color--base);
	content: '';
	height: 24px;
	mask-image: url('../icons/search.svg');
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 18px;
	transform: none;
	width: 24px;
}