@use 'sass:list';
@use '../common/mixins';
@use '../common/variables';

// —————————————————————————————————————————————————————————————————
// elements
// align
// weight
// transform
// italic
// underline
// strikeThrough
// code
// color
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

@mixin font-size($size, $weight, $leading, $transform: initial, $family: inherit) {
	font-size: $size;
	font-weight: $weight;
	line-height: $leading;
	text-transform: $transform;
	font-family: $family;
}

.body, %body {
	@include font-size(
		variables.$body-size,
		variables.$body-weight,
		variables.$body-leading,
	);
}

.subtitle, %subtitle {
	@include font-size(
		variables.$subtitle-size,
		variables.$subtitle-weight,
		variables.$subtitle-leading,
	);	
}	

.caption, %caption {
	@include font-size(
		variables.$caption-size,
		variables.$caption-weight,
		variables.$caption-leading,
	);
}

.overline, %overline {
	@include font-size(
		variables.$overline-size,
		variables.$overline-weight,
		variables.$overline-leading,
	);
}

.h1, %h1 {
	@include font-size(
		variables.$h1-size,
		variables.$h1-weight,
		variables.$h1-leading,
		variables.$h1-transform,
		variables.$h1-family
	);
}

.h2, %h2 {
	@include font-size(
		variables.$h2-size,
		variables.$h2-weight,
		variables.$h2-leading,
		variables.$h2-transform,
		variables.$h2-family
	);
}

.h3, %h3 {
	@include font-size(
		variables.$h3-size,
		variables.$h3-weight,
		variables.$h3-leading,
		variables.$h3-transform,
		variables.$h3-family
	);
}

.h4, %h4 {
	@include font-size(
		variables.$h4-size,
		variables.$h4-weight,
		variables.$h4-leading,
		variables.$h4-transform,
		variables.$h4-family
	);
}

.h5, %h5 {
	@include font-size(
		variables.$h5-size,
		variables.$h5-weight,
		variables.$h5-leading,
		variables.$h5-transform,
		variables.$h5-family
	);
}

.h6, %h6 {
	@include font-size(
		variables.$h6-size,
		variables.$h6-weight,
		variables.$h6-leading,
		variables.$h6-transform,
		variables.$h6-family
	);
}

@mixin gutter {

	& + & {
		margin-block-start: .75em;
	}
}

.h1, .h2, .h3, .h4, .h5, .h6, 
.subtitle, .body, .caption, .overline {
	@include gutter;
}

// —————————————————————————————————————————————————————————————————
// align
// —————————————————————————————————————————————————————————————————

.text-start, %text-start { text-align: left !important; }
.text-center, %text-center { text-align: center !important; }
.text-end, %text-end { text-align: right !important; }

// —————————————————————————————————————————————————————————————————
// weight
// —————————————————————————————————————————————————————————————————

.text-regular, %text-regular { font-weight: variables.$weight-regular !important; }
.text-bold, %text-bold { font-weight: variables.$weight-bold !important; }

// —————————————————————————————————————————————————————————————————
// transform
// —————————————————————————————————————————————————————————————————

.text-none, %text-none { text-transform: none; }
.text-capitalize, %text-capitalize { text-transform: capitalize; }
.text-uppercase, %text-uppercase { text-transform: uppercase; }
.text-lowercase, %text-lowercase { text-transform: lowercase; }
.text-initial, %text-initial { text-transform: initial; }
.text-inherit, %text-inherit { text-transform: inherit; }

// —————————————————————————————————————————————————————————————————
// italic
// —————————————————————————————————————————————————————————————————

.text-italic, %text-italic { font-style: italic !important; }

// —————————————————————————————————————————————————————————————————
// underline
// —————————————————————————————————————————————————————————————————

.text-underline, %text-underline { text-decoration: underline !important; }

// —————————————————————————————————————————————————————————————————
// strikeThrough
// —————————————————————————————————————————————————————————————————

.text-strikeThrough, %text-strikeThrough { text-decoration: line-through !important; }

// —————————————————————————————————————————————————————————————————
// code
// —————————————————————————————————————————————————————————————————

.text-code, %text-code { font-family: variables.$font-code !important; }

// —————————————————————————————————————————————————————————————————
// color
// —————————————————————————————————————————————————————————————————

@mixin text-color($prefix, $colors...) {
	@each $i in $colors {
		.#{$prefix}#{list.nth($i, 1)} {
			color: list.nth($i, 2) !important;

			.h1, .h2, .h3, .h4, .h5, .h6 {
				color: list.nth($i, 2) !important;
			}
		}
	}
}

@include text-color('text-',
	'default' variables.$text,
	'alt' variables.$text-alt,
	'disabled' variables.$text-disabled,
	'contrast' variables.$text-contrast,
	'contrastAlt' variables.$text-contrast-alt,
	'contrastDisabled' variables.$text-contrast-disabled,
	'primary' variables.$primary,
	'secondary' variables.$secondary,
	'primary' variables.$primary,
	'success' variables.$success,
	'info' variables.$info,
	'warning' variables.$warning,
	'error' variables.$error,
);