@use '@angular/material' as mat;
@use "sass:map";

/// Chrome shared by every full-area control: spa-clickable-area's button and spa-selectable-area's control. It is
/// theme-invariant, so each control includes it from its own stylesheet, where it is emitted once instead of once per
/// theme.
@mixin interactive-area-chrome {
	cursor: pointer;
	transition: background-color 150ms ease-in-out;

	&:hover {
		background-color: rgba(0, 0, 0, 0.04);
	}

	// aria-disabled, never the native attribute: the control stays focusable so the user can find out why it is unavailable.
	&[aria-disabled='true'] {
		cursor: default;
		opacity: 0.5;

		&:hover {
			background-color: transparent;
		}
	}
}

/// The part of the full-area controls' chrome that comes from the palette, and therefore has to be emitted once per
/// theme; the rest is theme-invariant and lives in each control's own stylesheet.
@mixin interactive-areas($lacuna-theme) {
	// The indicator stands in for a checkbox/radio, which Material tints with the accent once it is on. Its off color is
	// theme-invariant and therefore stays with the rest of the selectable area's chrome.
	spa-selectable-area .spa-selectable-control[aria-checked='true'] .spa-selectable-indicator,
	spa-selectable-area .spa-selectable-control[aria-checked='mixed'] .spa-selectable-indicator {
		color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent), 500);
	}
}