@use '../variables' as *;

@mixin overlay() {
	// & > .#{$prefix}overlay {
	// 	position: absolute;
	// 	inset: 0px;
	// 	border-radius: inherit;
	// 	overflow: hidden;
	// 	color: var(--#{$prefix}overlay-color);
	// 	opacity: var(--#{$prefix}overlay-opacity);
	// 	z-index: -1;
	// 	pointer-events: none;
	// 	background-color: currentColor;
	// 	transition:
	// 		background-color,
	// 		opacity,
	// 		0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
	// }

	// &:hover > .#{$prefix}overlay {
	// 	color: var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color));
	// 	opacity: var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity));
	// }

	// &:active > .#{$prefix}overlay {
	// 	color: var(
	// 		--#{$prefix}_active-overlay-color,
	// 		var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
	// 	);
	// 	opacity: var(
	// 		--#{$prefix}_active-overlay-opacity,
	// 		var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
	// 	);
	// }

	// &--focus > .#{$prefix}overlay,
	// &:focus > .#{$prefix}overlay {
	// 	color: var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color));
	// 	opacity: var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity));
	// }

	// &--focus:hover > .#{$prefix}overlay,
	// &:focus:hover > .#{$prefix}overlay {
	// 	color: var(
	// 		--#{$prefix}_focus-hover-overlay-color,
	// 		var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color))
	// 	);
	// 	opacity: var(
	// 		--#{$prefix}_focus-hover-overlay-opacity,
	// 		var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity))
	// 	);
	// }

	// &--focus:active > .#{$prefix}overlay,
	// &:focus:active > .#{$prefix}overlay {
	// 	color: var(
	// 		--#{$prefix}_focus-active-overlay-color,
	// 		var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color))
	// 	);
	// 	opacity: var(
	// 		--#{$prefix}_focus-active-overlay-opacity,
	// 		var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity))
	// 	);
	// }
}

@mixin outline-styles(
	$color: null,
	$opacity: null,
	$hover-color: initial,
	$hover-opacity: initial,
	$active-color: initial,
	$active-opacity: initial
) {
	& > .#{$prefix}overlay {
		--#{$prefix}overlay-color: #{$color};
		--#{$prefix}overlay-opacity: #{$opacity};
		--#{$prefix}_hover-overlay-color: #{$hover-color};
		--#{$prefix}_hover-overlay-opacity: #{$hover-opacity};
		--#{$prefix}_active-overlay-color: #{$active-color};
		--#{$prefix}_active-overlay-opacity: #{$active-opacity};
	}
}