@use "../010-settings/" as *;

// The offset should only be used if the contrast between the focus outline and the component is insufficient.
$il-focus-outline-inner-width: 3px;
$il-focus-outline-outer-width: 2px;

// KEYBOARD FOCUS DEFAULT
// This is the mixin you should be using if possible
@mixin il-focus($il-focus-outline-inner-width: $il-focus-outline-inner-width, $il-focus-outline-outer-width: $il-focus-outline-outer-width, $apply-to-child: "") {
	&:focus #{$apply-to-child}, &:focus-visible #{$apply-to-child} {
		$il-focus-outline-inner: $il-focus-outline-inner-width solid $il-focus-color;
		$il-focus-outline-outer: $il-focus-outline-outer-width solid $il-focus-protection-color;
		position: relative;
		// outermost protection color line
		outline: $il-focus-outline-outer;
		outline-offset: $il-focus-outline-outer-width + $il-focus-outline-inner-width;

		&::after {
			content: " ";
			position: absolute;
			top: -$il-focus-outline-outer-width;
			left: -$il-focus-outline-outer-width;
			right: -$il-focus-outline-outer-width;
			bottom: -$il-focus-outline-outer-width;
			// innermost protection color line
			border: $il-focus-outline-outer;
			// middle focus line
			outline: $il-focus-outline-inner;
		}
	}
}

// KEYBOARD FOCUS FOR BUTTONS, INPUTS AND ELEMENTS WITH :AFTER
// some elements like buttons and input field cannot display the il-focus mixin because of the :after element
// in this case use this mixin instead
@mixin il-focus-outline-only($clearAfter: false, $il-focus-outline-inner-width: $il-focus-outline-inner-width, $il-focus-outline-outer-width: $il-focus-outline-outer-width) {
	$il-focus-outline-inner: $il-focus-outline-inner-width solid $il-focus-color;
	$il-focus-outline-outer: $il-focus-outline-outer-width solid $il-focus-protection-color;
	&:focus-visible{
		outline: $il-focus-outline-inner;
		box-shadow: inset 0px 0px 0px $il-focus-outline-outer-width $il-focus-protection-color, 0px 0px 0px ($il-focus-outline-outer-width + $il-focus-outline-inner-width) $il-focus-protection-color;
		@if $clearAfter {
			&::after {
				content: none;
			}
		}
	}
}

// KEYBOARD FOCUS FOR Elements, that contain Elements that get Focus
// some elements like file buttons and input field cannot display the il-focus mixin because they do not get focus directly
// in this case use this mixin instead
@mixin il-focus-within-outline-only($clearAfter: false, $il-focus-outline-inner-width: $il-focus-outline-inner-width, $il-focus-outline-outer-width: $il-focus-outline-outer-width) {
	$il-focus-outline-inner: $il-focus-outline-inner-width solid $il-focus-color;
	$il-focus-outline-outer: $il-focus-outline-outer-width solid $il-focus-protection-color;
	&:focus-within{
		outline: $il-focus-outline-inner;
		box-shadow: inset 0px 0px 0px $il-focus-outline-outer-width $il-focus-protection-color, 0px 0px 0px ($il-focus-outline-outer-width + $il-focus-outline-inner-width) $il-focus-protection-color;
		@if $clearAfter {
			&::after {
				content: none;
			}
		}
	}
}

// KEYBOARD FOCUS FOR ELEMENTS AT THE EDGE AND MULTI-LINE TEXT
// some elements at the edge do not show the focus outline because it's already offscreen
// or for inline elements that break into multiple lines
// in these cases use this mixin instead
@mixin il-focus-border-only($clearAfter: false, $il-focus-outline-inner-width: $il-focus-outline-inner-width, $il-focus-outline-outer-width: $il-focus-outline-outer-width) {
	$il-focus-outline-inner: $il-focus-outline-inner-width solid $il-focus-color;
	$il-focus-outline-outer: $il-focus-outline-outer-width solid $il-focus-protection-color;
	&:focus-visible {
		outline: none;
		border: $il-focus-outline-inner;
		box-shadow: inset 0px 0px 0px $il-focus-outline-outer-width $il-focus-protection-color, 0px 0px 0px $il-focus-outline-outer-width $il-focus-protection-color;
		@if $clearAfter {
			&::after {
				content: none;
			}
		}
	}
}

@mixin clear-focus-for-override($clearAfter: false) {
	&:focus {
		border: inherit;
		box-shadow: inherit;
		outline: none;
    	outline-offset: 0px;
		@if $clearAfter {
			&::after {
				content: none;
			}
		}
	}
	&:focus-visible {
		border: inherit;
		box-shadow: inherit;
		outline: none;
    	outline-offset: 0px;
		@if $clearAfter {
			&::after {
				content: none;
			}
		}
	}
}