// Framework colors

@each $name, $color-set in $colors {
	$base: nth($color-set, $color-index-base);
	$background: nth($color-set, $color-index-background);
	$dark: nth($color-set, $color-index-dark);
	$hover: nth($color-set, $color-index-hover);
	$active: nth($color-set, $color-index-active);
	$invert: nth($color-set, $color-index-invert);

	.color-#{$name} {
		@if $name == 'warning' {
			color: $active !important;
		} @else {
			color: $base !important;
		}
	}

	a.color-#{$name} {
		&:hover {
			@if $name == 'warning' {
				color: $active !important;
			} @else {
				color: $hover !important;
			}
		}

		@include focus-visible {
			color: $hover !important;
		}

		&:active {
			color: $active !important;
		}
	}

	.color-#{$name}-invert {
		color: $invert !important;
	}

	.background-color-#{$name} {
		outline-color: $invert;
		background-color: $base !important;
	}

	.background-color-#{$name}-invert {
		outline-color: $base;
		background-color: $invert !important;
	}

	.background-color-#{$name}-light {
		outline-color: $dark;
		background-color: $background !important;
	}

	.background-color-#{$name}-dark {
		outline-color: $background;
		background-color: $dark !important;
	}
}

@include tablet {
	@each $name, $color-set in $colors {
		$base: nth($color-set, $color-index-base);
		$invert: nth($color-set, $color-index-invert);

		.background-color-#{$name}-tablet {
			outline-color: $invert;
			background-color: $base !important;
		}
	}
}

// Text color

.color-text {
	color: $text !important;
}

.color-text-invert {
	color: $text-invert !important;
}

.color-text-subtle {
	color: $text-subtle !important;
}

.color-text-overlay-invert {
	color: $overlay-invert;
}

.color-current-color {
	color: currentColor !important;
}

.color-hyperlink {
	color: $hyperlink !important;
}

.fill-current-color {
	@include fill-current-color();
}

.outline-color-text {
	outline-color: $text !important;
}

.stroke-current-color {
	stroke: currentColor !important;
}

// Background color

.background-color-body {
	outline-color: $text !important;
	background-color: $body-background !important;
}

.background-color-body-medium {
	outline-color: $text !important;
	background-color: $body-background-medium !important;
}

.background-color-alternate {
	outline-color: $text-invert !important;
	background-color: $alternate-background !important;
}

.background-color-alternate-medium {
	outline-color: $text-invert !important;
	background-color: $alternate-background-medium !important;
}

.background-color-overlay {
	outline-color: $overlay-invert;
	background-color: $overlay !important;
}

.background-color-alternating-grey {
	border-block-start: 1px solid $border-white-high-contrast;
	outline-color: $text !important;

	&:nth-of-type(even) {
		outline-color: $text;
		background-color: $body-background;
	}

	&:nth-of-type(odd) {
		outline-color: $text;
		background-color: $body-background-medium;
	}
}

.background-color-alternating-grey-reversed {
	border-block-start: 1px solid $border-white-high-contrast;
	outline-color: $text !important;

	&:nth-of-type(even) {
		outline-color: $text;
		background-color: $body-background-medium;
	}

	&:nth-of-type(odd) {
		outline-color: $text;
		background-color: $body-background;
	}
}

.background-color-body-accent {
	outline-color: $text !important;
	background-color: $body-background-accent !important;
}

.background-color-body-accent-onhover {
	&:hover,
	&:focus-within {
		outline-color: $text !important;
		background-color: $body-background-accent !important;
	}
}

.background-color-transparent {
	background-color: transparent !important;
}

// Static colors - do not change with theme

.color-white-static {
	color: $white-static !important;
}

.color-black-static {
	color: $black-static !important;
}

.background-color-white-static {
	outline-color: $black-static !important;
	background-color: $white-static !important;
}

.background-color-black-static {
	outline-color: $white-static !important;
	background-color: $black-static !important;
}