@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

// Framework colors

@each $name, $color-set in tokens.$colors {
	$base: nth($color-set, tokens.$color-index-base);
	$background: nth($color-set, tokens.$color-index-background);
	$dark: nth($color-set, tokens.$color-index-dark);
	$hover: nth($color-set, tokens.$color-index-hover);
	$active: nth($color-set, tokens.$color-index-active);
	$invert: nth($color-set, tokens.$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 mixins.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 mixins.tablet {
	@each $name, $color-set in tokens.$colors {
		$base: nth($color-set, tokens.$color-index-base);
		$invert: nth($color-set, tokens.$color-index-invert);

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

// Text color

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

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

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

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

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

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

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

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

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

// Background color

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// Static colors - do not change with theme

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

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

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

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