/**
 * Main file to define styles for buttons.
 *
 * Default styles for buttons are defined via theme.json file. This file defines the rest of the styles
 * for buttons that can not be defined via theme.json.
 *
 * author Vladimir
 * version 1.0
 */

 /* Base secondary style */
.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--teal);
	border: 1px solid currentColor;
	border-radius: var(--wp--preset--border-radius--pill);
	text-decoration: none;
}

/* Hover */
.is-style-secondary .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	text-decoration: none;
}

/* Focus */
.is-style-secondary .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
	outline: none;
}

/* Active */
.is-style-secondary .wp-block-button__link:active,
.is-style-secondary .wp-block-button__link.is-active {
	background: color-mix(in srgb, var(--wp--preset--color--teal) 10%, transparent);
	color: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--teal);
}

/* Disabled */
.is-style-secondary .wp-block-button__link:disabled,
.is-style-secondary .wp-block-button__link[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	background: transparent;
	color: var(--wp--preset--color--light-gray);
	border-color: var(--wp--preset--color--light-gray);
}

/* Base text & arrow style */
.is-style-text-arrow .wp-block-button__link {
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--teal);
	border: 0;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	line-height: 18px;
	text-decoration: none;
}

.is-style-text-arrow .wp-block-button__link::after {
	content: "";
	display: block;
	width: 9px;
	height: 16px;
	flex-shrink: 0;
	align-self: center;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='9' height='16' viewBox='0 0 9 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.759277 14.6508L6.75928 7.65082L0.759277 0.650818' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: url("data:image/svg+xml,%3Csvg width='9' height='16' viewBox='0 0 9 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.759277 14.6508L6.75928 7.65082L0.759277 0.650818' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.is-style-text-arrow .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--black);
	text-decoration: underline;
}

.is-style-text-arrow .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--black);
	outline: none;
	text-decoration: underline;
}

.is-style-text-arrow .wp-block-button__link:active {
	background: transparent;
	color: var(--wp--preset--color--black);
}
