@use 'sass:meta';
@use '../functions/numbers' as numb;

/// Styles for selected elements
/// @param {Color} $bg-color Background-color
/// @param {Color} $color Text-color
/// @param {String} $selector [*] Selector
/// @group Basic
/// @author Felix Scholze
/// @since v1.0.0
@mixin select-style($bg-color, $color, $selector: '*') {
	@if meta.type-of($bg-color) != color {
		@error '❌  ===> #{$bg-color} is not a color';
	}
	@if meta.type-of($color) != color {
		@error '❌  ===> #{$color} is not a color';
	}
	#{$selector} {
		&::selection {
			background: $bg-color;
			color: $color;
			@content;
		}
	}
}

/// Adds an offset for the targeted link(s)
/// @param {Number} $offset the offset in any value
/// @group Basic
/// @author Felix Scholze
/// @since v1.0.0
@mixin target-anchor-offset($offset) {
	:target {
		&::before {
			content: '';
			display: block;
			height: $offset;
			margin-top: numb.number-invert($offset);
			@content;
		}
	}
}