@use 'sass:map';
@use 'sass:string';
@use '../base/maps/tokens' as *;
@use '../base/functions' as *;

[class*='txt-line-clamp-'] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Define the keys (this should match the keys in design token) */
$text-keys: (
	'hero-title-large',
	'hero-title-small',
	'page-title-large',
	'page-title',
	'section-title',
	'headline-large',
	'headline-small',
	'subhead',
	'subhead-small',
	'mini-header',
	'mini-header-small',
	'body-lead',
	'body-lead-bold',
	'body',
	'body-bold',
	'body-small',
	'body-small-medium',
	'code'
);

@each $key in $text-keys {
	.txt-#{$key} {
		// These values automatically change on mobile thanks to the :root overrides!
		font-family: var(--txt-#{$key}-family);
		font-size: var(--txt-#{$key}-size);
		font-weight: var(--txt-#{$key}-weight);
		line-height: var(--txt-#{$key}-lh);
		letter-spacing: var(--txt-#{$key}-ls, 0);
		text-transform: var(--txt-#{$key}-tt, none);
		padding: 0;
		margin: 0;

		// Specific nested logic for bolding within body text
		@if $key == 'body' or $key == 'body-bold' {
			strong,
			b {
				font-weight: 700;
			}
		}

		@if $key == 'body-small' {
			strong,
			b {
				font-weight: 500;
			}
		}
	}
}

.code-wrap {
	background: var(--color-space);
	border: 0.0625rem solid with-opacity(var(--neutral-1), 10);
	border-radius: 0.375rem;
	box-sizing: border-box;
	color: var(--color-white);
	display: inline-block;
	font-family: var(--txt-code-family), monospace;
	font-size: var(--txt-code-size);
	line-height: var(--txt-code-lh);
	padding: 0.1875rem 0.375rem;
	position: relative;

	&.code-block {
		display: block;
		padding: 0.375rem 0.75rem;
		width: 100%;
	}
}

// Convert this to new breakpoint system later
@each $device-key, $device-map in $brandui-device-breakpoints-new {
	$device-value: map.get($device-map, 'value');
	$device-prefix: map.get($device-map, 'prefix');

	@media (max-width: string.unquote('#{$device-value}px')) {
		// Device Breakpoints Start
		@for $i from 1 through 10 {
			.#{$device-prefix}txt-line-clamp-#{$i} {
				-webkit-line-clamp: #{$i};
				line-clamp: #{$i};
			}
		}

		.#{$device-prefix}txt-left {
			text-align: left;
		}

		.#{$device-prefix}hover\:txt-left {
			&:hover {
				text-align: left;
			}
		}

		.#{$device-prefix}txt-center {
			text-align: center;
		}

		.#{$device-prefix}hover\:txt-center {
			&:hover {
				text-align: center;
			}
		}

		.#{$device-prefix}txt-right {
			text-align: right;
		}

		.#{$device-prefix}hover\:txt-right {
			&:hover {
				text-align: right;
			}
		}

		.#{$device-prefix}white-space-nowrap {
			white-space: nowrap;
		}

		.#{$device-prefix}hover\:white-space-nowrap {
			&:hover {
				white-space: nowrap;
			}
		}

		.#{$device-prefix}white-space-initial {
			white-space: initial;
		}

		.#{$device-prefix}hover\:white-space-initial {
			&:hover {
				white-space: initial;
			}
		}

		.#{$device-prefix}txt-break-all {
			word-break: break-all;
		}

		.#{$device-prefix}txt-keep-all {
			word-break: keep-all;
		}

		.#{$device-prefix}txt-normal {
			word-break: normal;
		}

		.#{$device-prefix}txt-overflow-wrap-normal {
			overflow-wrap: normal;
		}

		.#{$device-prefix}txt-overflow-wrap-break-word {
			overflow-wrap: break-word;
		}

		.#{$device-prefix}txt-overflow-wrap-anywhere {
			overflow-wrap: anywhere;
		}

		.#{$device-prefix}txt-overflow-ellipsis {
			text-overflow: ellipsis;
		}

		.#{$device-prefix}hover\:txt-overflow-ellipsis {
			&:hover {
				text-overflow: ellipsis;
			}
		}

		.#{$device-prefix}txt-uppercase {
			text-transform: uppercase;
		}

		.#{$device-prefix}hover\:txt-uppercase {
			&:hover {
				text-transform: uppercase;
			}
		}

		.#{$device-prefix}txt-lowercase {
			text-transform: lowercase;
		}

		.#{$device-prefix}hover\:txt-lowercase {
			&:hover {
				text-transform: lowercase;
			}
		}

		.#{$device-prefix}txt-capitalize {
			text-transform: capitalize;
		}

		.#{$device-prefix}hover\:txt-capitalize {
			&:hover {
				text-transform: capitalize;
			}
		}

		.#{$device-prefix}txt-transform-none {
			text-transform: none;
		}

		.#{$device-prefix}hover\:txt-transform-none {
			&:hover {
				text-transform: none;
			}
		}

		.#{$device-prefix}txt-transform-initial {
			text-transform: initial;
		}

		.#{$device-prefix}hover\:txt-transform-initial {
			&:hover {
				text-transform: initial;
			}
		}

		// Device Breakpoints End
	}
}

.txt-decoration-style-dashed {
	text-decoration-style: dashed;
}

.txt-decoration-style-dotted {
	text-decoration-style: dotted;
}

.txt-decoration-style-double {
	text-decoration-style: double;
}

.txt-decoration-style-wavy {
	text-decoration-style: wavy;
}

.txt-decoration-style-solid {
	text-decoration-style: solid;
}

.txt-decoration-style-none {
	text-decoration-style: none;
}

.txt-decoration-none {
	text-decoration: none;
}

.group:hover .group-hover\:txt-decoration-none {
	text-decoration: none;
}

.hover\:txt-decoration-none {
	&:hover {
		text-decoration: none;
	}
}

%txt-underline-style {
	text-decoration: underline;
	text-underline-offset: var(--padding-slim);
	text-decoration-thickness: var(--padding-hairline);
}

.txt-decoration-underline {
	@extend %txt-underline-style;
}

.group:hover .group-hover\:txt-decoration-underline {
	@extend %txt-underline-style;
}

.hover\:txt-decoration-underline {
	&:hover {
		@extend %txt-underline-style;
	}
}

.link-decoration-underline a {
	@extend %txt-underline-style;
}

.group:hover .group-hover\:link-decoration-underline a {
	@extend %txt-underline-style;
}

.hover\:link-decoration-underline a {
	&:hover {
		@extend %txt-underline-style;
	}
}