// =================================================================
// Accessibility Tools
// Requires MathSass.
// =================================================================

@use "sass:math";

// Linear color channel
//
// Calculates linear color channel values, for use in
// accessibility contrast calculations.
// See <https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests>
// Based on Sérgio Gomes's accessibility work.
//
// Algorithm, for c in 0 to 255:
//
// ```
// f(c) {
//   c = c / 255;
//   return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
// }
// ```
//
// More info: <https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796>
//
// Author: Sérgio Gomes
//
// Styleguide Utilities.Accessibility.Linear color channel
//
// Access: Private
//
// Since: 3.2.0

@function linear-color-channel( $color ) {
	$color: math.div( $color, 255 );
	$channel-value: 0;

	@if( $color < 0.03928 ) {
		$channel-value: math.div( $color, 12.92 );
	} @else {
		$channel-value: pow( ($color + 0.055) / 1.055, 2.4 );
	}

	@return $channel-value;
}


// Luminance
//
// Calculates the luminance of a color, for use in
// accessibility contrast calculations.
// See <https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests>
// Based on Sérgio Gomes's accessibility work.
//
//
// More info: <https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796>
//
// Author: Sérgio Gomes
//
// Styleguide Utilities.Accessibility.Luminance
//
// Access: Private
//
// Since: 3.2.0

@function luminance( $color ) {
	$red: linear-color-channel( red( $color ) + 1 );
	$green: linear-color-channel( green( $color ) + 1 );
	$blue: linear-color-channel( blue( $color ) + 1 );

	@return .2126 * $red + .7152 * $green + .0722 * $blue;
}

// Contrast
//
// Calculates the contrast ratio between two colors, for use in
// accessibility contrast calculations.
// See <https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests>
// Based on Sérgio Gomes's accessibility work.
//
//
// More info: <https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796>
//
// Author: Sérgio Gomes
//
// Styleguide Utilities.Accessibility.Contrast
//
// Access: Private
//
// Since: 3.2.0

@function contrast( $back, $front ) {
	$backLum: luminance( $back ) + .05;
	$foreLum: luminance( $front ) + .05;

	@return math.div( max( $backLum, $foreLum ), min( $backLum, $foreLum ) );
}

// Accessible Text
//
// Returns WCAG-compliant text colors automatically, based on a
// desired background and foreground color, by lightening or
// darkening the text color until it meets compliance standards.
//
// By default, the compliance method is set to AA, but you can
// pass an optional compliance method argument to support AAA.
//
// #### Examples
//
// ##### Automatically fix a link text color to be AA compliant based on the background color of widgets.
// 			.widget a {
//				color: accessible-text( $widget-bg, $color-secondary );
//			}
//
// Author: Ashley Kolodziej
//
// Styleguide Utilities.Accessibility.Acccessible Text
//
// Access: Public
//
// Since: 3.2.0

@function accessible-text( $background, $preferred-text-color, $bold: false, $compliance-method: 'AA' ){
	$contrast: contrast( $background, $preferred-text-color );
	$final-text-color: $preferred-text-color;
	$lighten-text: lightness( $background ) < lightness( $preferred-text-color ); // Whether to lighten or darken the text color.
	$required-contrast: 4.5; // Assumes AA usage or AAA bold usage.
	$suggested-background: $background;
	$suggestion-contrast: $contrast;

	@if $bold == true {
		$required-contrast: 3; // Lower requirements for AA bold
	}

	@if $compliance-method == 'AAA' and $bold == false {
		$required-contrast: 7;
	}

	@if $lighten-text and contrast( $background, #FFF ) < $required-contrast {
		$lighten-text: false;

		@while $suggestion-contrast < $required-contrast {
			$suggested-background: darken( $suggested-background, 1% );
			$suggestion-contrast: contrast( $suggested-background, $preferred-text-color );
		}

		@warn 'Your background color is too light to use a light text color with. Switching to the closest dark color. \a You can avoid this warning and use a light text color by switching your background color to ' + $suggested-background + '.';

	} @else if $lighten-text == false and contrast( $background, #000 ) < $required-contrast  {
		$lighten-text: true;

		@while $suggestion-contrast < $required-contrast {
			$suggested-background: lighten( $suggested-background, 1% );
			$suggestion-contrast: contrast( $suggested-background, $preferred-text-color );
		}

		@warn 'Your background color is too dark to use a dark text color with. Switching to the closest light color. \a You can avoid this warning and use a dark text color by switching your background color to ' + $suggested-background + '.'

	}

	@while $contrast < $required-contrast {
		@if $lighten-text {
			$final-text-color: lighten( $final-text-color, 1% );
		} @else {
			$final-text-color: darken( $final-text-color, 1% );
		}

		$contrast: contrast( $background, $final-text-color );
	}

	@return $final-text-color;
}

// Skip Link
//
// Creates styles for a skip link.
//
// Author: Ashley Kolodziej
//
// Styleguide Utilities.Accessibility.Skip Link
//
// Access: Public
//
// Since: 3.2.3

%skip-link {
	background-color: #F1F1F1;
	box-shadow: 0 0 2px 2px transparentize( #000, 0.4 );
	color: #21759B;
	display: block;
	font-family: "Open Sans",sans-serif;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 50%;
	line-height: normal;
	margin: 0;
	padding: 15px 23px 14px;
	position: fixed;
	right: 50%;
	text-align: center;
	text-decoration: none;
	top: -130px;
	transform: translateX( -50% );
	-webkit-transition: top 0.3s ease-out;
	transition: top 0.3s ease-out;
	width: 190px;
	z-index: 100000;

	&:focus,
	&:active {
		color: #21759B;
		top: 0;
		-webkit-transition: top 0s;
		transition: top 0s;
	}
}