/*
 * What the plugin's own block settings need on the page, on both sites.
 * The webfront's rules for its content are in webfront.css.
 */

/* A linked group (includes/BlockLink.php): one anchor stretched over it. */

.mattrs-linked {
	position: relative;
}

.mattrs-linked__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.mattrs-linked__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The group's own links and controls stay above the stretched one. */
.mattrs-linked :is(a, button, input, select, textarea, summary, label):not(.mattrs-linked__link) {
	position: relative;
	z-index: 2;
}

/*
 * Buttons: the hover every button has, whatever its colours. A filled one is
 * tinted with its own text colour, border included; an outline one has its
 * text and outline shaded a little over an unchanged background. Nothing
 * goes see-through: the shade is a filter, not an opacity, so what is behind
 * the button never shows through it. No zoom and no shadow.
 * The search block's icon button is left alone.
 */

.wp-element-button:not(.wp-block-search__button) {
	position: relative;
	transition: filter 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.25s ease-out;
}

.wp-element-button:not(.wp-block-search__button)::after {
	content: '';
	position: absolute;
	/* Out to the border's edge, which is 2px on our buttons. */
	inset: -2px;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}

.wp-element-button:not(.wp-block-search__button):hover::after {
	opacity: 0.12;
}

.wp-block-button.is-style-outline .wp-block-button__link::after {
	content: none;
}

/* Towards mid-grey: black lightens, white darkens, a colour softens. */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	filter: contrast(0.7);
}

/* WP Kit zooms whatever opens a modal; a button does not zoom unless it is set to. */
.wp-element-button.wdm_wpkm-modal-trigger:hover {
	transform: none;
}

/* The theme tints an outline button's background on hover. */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover {
	background-color: transparent;
}

/*
 * Hover settings (includes/Hover.php). One class for each setting, which
 * carries its value in a custom property. They beat a preset colour's class,
 * which is `!important` in core.
 */

.wp-block-group[class*='mattrs-hover-'] {
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.25s ease-out;
}

.wp-block-group.mattrs-hover-bg:hover,
.wp-block-button.mattrs-hover-bg .wp-block-button__link:hover {
	background-color: var(--mattrs-hover-bg) !important;
}

.wp-block-group.mattrs-hover-text:hover,
.wp-block-button.mattrs-hover-text .wp-block-button__link:hover {
	color: var(--mattrs-hover-text) !important;
}

.wp-block-group.mattrs-hover-border:hover,
.wp-block-button.mattrs-hover-border .wp-block-button__link:hover {
	border-color: var(--mattrs-hover-border) !important;
}

.wp-block-group.mattrs-hover-zoom:hover,
.wp-block-button.mattrs-hover-zoom .wp-block-button__link:hover {
	transform: scale(var(--mattrs-hover-zoom));
}

/* A button with colours of its own has no default hover. */
.wp-block-button:is(.mattrs-hover-bg, .mattrs-hover-text, .mattrs-hover-border) .wp-block-button__link::after {
	content: none;
}

.wp-block-button:is(.mattrs-hover-bg, .mattrs-hover-text, .mattrs-hover-border) .wp-block-button__link:hover {
	filter: none;
}

.mattrs-hover-link a:hover {
	color: var(--mattrs-hover-link) !important;
}

.mattrs-hover-underline a:hover {
	text-decoration: underline !important;
}

.mattrs-hover-no-underline a:hover {
	text-decoration: none !important;
}

/*
 * Inside a linked group the whole card is the link, so a paragraph or
 * heading with these settings takes them itself while the card is hovered
 * or focused: the line that says where the card goes.
 */

.mattrs-linked :is(.mattrs-hover-link, .mattrs-hover-underline) {
	text-underline-offset: 0.2em;
	transition: color 0.2s;
}

.mattrs-linked:is(:hover, :has(> .mattrs-linked__link:focus-visible)) .mattrs-hover-link {
	color: var(--mattrs-hover-link) !important;
}

.mattrs-linked:is(:hover, :has(> .mattrs-linked__link:focus-visible)) .mattrs-hover-underline {
	text-decoration: underline;
}

.mattrs-no-link-underline a {
	text-decoration: none;
}

/*
 * The theme outlines whatever holds the focus, so a click leaves a black
 * ring on a link, a button or an accordion until the next one. The ring is
 * for the keyboard: it stays where the browser would show it by itself.
 */

.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none;
}