//------------------------------------------------------------------------------------------------
// COLORS
//------------------------------------------------------------------------------------------------

/*
A suite of utility classes to add $theme colours to elements.

There's 2 variants, both of which can be toggled on and off as usage
dictates:-

u-theme-primary - An example of a colour class which changes the
following:-

- Background colour of the element or SVG
- Border colour of the element to the 'dark' shade of the `$theme` colour
- The focus shadow if the element is focusable or has a `tabindex` attribute
- Depending on the background colour, sets the text colour to either `very-light` or `very-dark` so it remains legible.

u-text-primary - An example of a colour class which changes text colour.
*/


// CLASSES
//------------------------------------------------------------------------------------------------

@mixin utility-themes($name, $value) {
	.u-theme-#{$name} {
		background-color: $value !important;
		@if(color('#{$name}-dark', true)) {
			border-color: color('#{$name}-dark') !important;
			& hr {
				// If light text color on dark background, use light shade for <hr>
				@if(get-theme-text-color($name, true)) {
					background-color: color('#{$name}-dark') !important;
				}
				// Otherwise use dark shade for <hr>
				@else {
					background-color: color('#{$name}-light') !important;
				}
			}
		}
		color: get-theme-text-color($name) !important;
		&:focus {
			outline: none !important;
			box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba($value, 0.5) !important;
		}
	}

	svg.u-theme-#{$name} {
		fill: color('#{$name}') !important;
		background-color: transparent !important;
	}

	svg.u-theme-#{$name}-stroke {
		stroke: color('#{$name}') !important;
		background-color: transparent !important;
	}

	a.u-theme-#{$name},
	button.u-theme-#{$name} {
		border-color: color('#{$name}') !important;
		background-color: color('#{$name}') !important;
		@if(color('#{$name}-dark', true)) {
			&:hover {
				background-color: color('#{$name}-dark') !important;
				border-color: color('#{$name}-dark') !important;
			}
		}
	}
}

@mixin utility-text($name, $value) {
	.u-text-#{$name} {
		color: $value !important;
		&:focus {
			box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba($value, 0.5) !important;
		}
	}
	@if(color('#{$name}-dark', true)) {
		a.u-text-#{$name}:hover,
		button.u-text-#{$name}:hover {
			color: color('#{$name}-dark') !important;
		}
	}
}

[class*='u-theme']:focus,
[class*='u-text']:focus {
	outline: none !important;
}

@each $theme-name, $theme-value in $theme {
	@include utility-themes($theme-name, $theme-value);
	@include utility-text($theme-name, $theme-value);
}