// special effects

// used to mark focused fields
@mixin glowExterior() {
	box-shadow: 0 0 var(--ironsworn-glow-exterior-spread, 6px)
		var(--ironsworn-glow-exterior-color, var(--ironsworn-color-cool));
}

// used inside block/tab like elements. it's inset so that both the focus effect and the hover effect can be visible at once.
@mixin glowInterior() {
	box-shadow: inset 0 0 var(--ironsworn-glow-interior-spread, 5px)
		var(--ironsworn-glow-interior-blur, 0)
		var(--ironsworn-glow-interior-color, var(--ironsworn-color-cool));
}

@mixin textGlow() {
	text-shadow: 0 0 var(--ironsworn-text-glow-spread, 10px)
		var(--ironsworn-color-text-glow, var(--ironsworn-color-fg-highlight));
}

// used on draggables, highlighted table rows in chat. set opacity in increments of 10 (because otherwise the CSS variable won't exist).
// since gradients are *images*, they're overlaid on top of background-colour. great for a lazy tint on a highlighted element.
// we *could* just make it a single-color 'gradient', but i think the subtle colour movement is kinda fun. :)
// only problem is they're not currently animatable... at least, not without getting some sorcery w/ pseudo-elements involved.
@mixin accentGradient($opacity: 20, $direction: to bottom) {
	background-image: linear-gradient(
		$direction,
		var(--ironsworn-color-warm-#{$opacity}),
		var(--ironsworn-color-cool-#{$opacity})
	);
	background-blend-mode: overlay;
}

@mixin overlay() {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--ironsworn-z-index-overlay, var(--ironsworn-z-index-highest));
	content: '';
	pointer-events: none;
}

@mixin tint($background, $opacity: 0.5) {
	opacity: $opacity;
	background: $background;
}
