/*-----------------------------------------------------------------------------
# Buttons and Links
-----------------------------------------------------------------------------*/
/*
 * Link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */
a,
.wp-block-navigation a,
.wp-block-navigation-submenu__toggle {
	cursor: pointer;
	text-decoration-style: var(--wp--custom--link--style, solid);
}

/* Set link hover styles */
:where(.has-background :not(.wp-block-site-title) > a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor)) {
	text-decoration: underline;

	&:hover,
	&:active {
		opacity: var(--wp--custom--color--link--hover-opacity, 0.8);
	}
}

/* 
 * Style basic buttons to match block buttons. 
 */
input[type=button]:not(.wp-element-button),
input[type=submit][class*="button"]:not(.wp-element-button),
input[type=submit][class*="submit"]:not(.wp-element-button),
input[type=reset][class*="button"]:not(.wp-element-button),
input[type=file]::file-selector-button {
	background-color: var(--wp--custom--color--button--background, var(--wp--custom--color--highlight, var(--wp--preset--color--highlight)));
	color: var(--wp--custom--color--button--text, var(--wp--preset--color--foreground-alt));
	border: none;
	border-width: 0;
	border-radius: var(--wp--custom--button--radius, 0);
	padding: var(--wp--preset--spacing--30, 9px) var(--wp--preset--spacing--40, 18px);
	font-size: var(--wp--preset--font-size--normal, 18px);
	font-weight: var(--wp--custom--typography--font-weight--medium, 400);
	line-height: 1.5;
	text-shadow: none;
}

input[type=file] {
	font-size: var(--wp--preset--font-size--small, 16px);
	width: 100%;
}

/* 
 * But override basic buttons to look like outlines on primary-colored backgrounds 
 */
.has-primary-background-color input[type=button],
.has-primary-background-color input[type=submit][class*="button"],
.has-primary-background-color input[type=reset][class*="button"],
.has-primary-background-color input[type=file]::file-selector-button {
	border: 3px solid var(--wp--custom--color--button--text, var(--wp--preset--color--foreground-alt));
}

/* FIX for WordPress v6.7 when older Button not within a Buttons container */
.wp-site-blocks .wp-block-button__link {
	width: auto;
	height: auto;
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */
button:not(.wp-block-navigation-submenu__toggle):hover,
input[type=submit][class*="button"]:hover,
input[type=submit][class*="submit"]:hover,
input[type=reset][class*="button"]:hover,
input[type=file]::file-selector-button:hover,
.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	cursor: pointer;
	opacity: var(--wp--custom--color--button--hover-opacity, 0.8);
}

input[type=button]:not(.wp-element-button):hover,
input[type=submit][class*="button"]:not(.wp-element-button):hover,
input[type=reset][class*="button"]:not(.wp-element-button):hover,
input[type=file]::file-selector-button:hover {
	background-color: var(--wp--custom--color--button--hover-background, var(--wp--custom--color--button--background, var(--wp--custom--color--highlight, var(--wp--preset--color--highlight))));
	color: var(--wp--custom--color--button--hover-text, var(--wp--custom--color--button--text, var(--wp--preset--color--foreground-alt)));
}

/*-----------------------------------------------------------------------------
# Link Underlines
-----------------------------------------------------------------------------*/

/* Underline links */
.is-style-link-underline a:not(.wp-block-navigation-item__content) {
	text-decoration: underline;
}
.is-style-link-underline a:hover, 
.is-style-link-underline a:active {
	opacity: var(--wp--custom--color--link--hover-opacity, 0.8);
}

/* No Underline links */
.is-style-link-no-underline a {
  	text-decoration: none;
}

/* Underline links on hover */
.is-style-link-underline-hover a {
	text-decoration: none !important;
	
	&:hover,
	&:active {
		text-decoration: underline !important;
		opacity: 1;
	}
}
