@use '../base/maps/tokens' as *;
@use '../base/mixins/typography' as font;
@use '../base/mixins/breakpoints' as break;

/*
The rich text class applies default styling to HTML when you cannot apply class names directly to the children of a parent
*/

// Only applies to default and long versions
// Used for content like description fields or basic editor fields
.txt-rich,
.txt-rich-long {
	// Separate each element via flex
	display: flex;
	flex-direction: column;
	gap: var(--padding-small);

	h1:not([class]) {
		@include font.get-typography(page-title);
	}

	h2:not([class]) {
		@include font.get-typography(headline-small);
	}

	h3:not([class]) {
		@include font.get-typography(subhead);
	}

	h4:not([class]) {
		@include font.get-typography(subhead-small);
	}

	h5:not([class]) {
		@include font.get-typography(body-bold);
	}

	h6:not([class]) {
		@include font.get-typography(body-bold);
	}

	p:not([class]) {
		line-height: var(--txt-body-lh);
	}

	a.jumplink {
		color: var(--ui-headline);
	}

	a:not([class]) {
		overflow-wrap: break-word;
		text-decoration: underline;
		font-weight: 700;
		color: var(--action);

		&:hover,
		&:focus {
			color: var(--action-tertiary);
		}
	}

	blockquote:not([class]) {
		margin-top: var(--padding-large);
		margin-bottom: var(--padding-large);
		border-left: 0.1875rem solid;
		padding-left: 2.5rem;
		margin-left: 0;

		@include font.get-typography(body-lead);
	}

	ul ul,
	ol ul,
	ol ol {
		margin-top: var(--padding-small);
	}
}

// Only applies to long version
// Used for long-form content like blogs and articles
.txt-rich-long {
	gap: var(--padding-medium);

	h1:not([class]),
	h2:not([class]),
	h3:not([class]),
	h4:not([class]),
	h5:not([class]),
	h6:not([class]) {
		margin-top: var(--padding-medium);
	}

	h2 {
		&:not([class]) {
			.jumplink {
				&:not(.button) {
					font-weight: 700;
				}
			}
		}
	}

	p:not([class]) {
		line-height: var(--txt-body-long-lh);
	}

	// Remove the longer line-height for these elements
	table,
	li,
	.txt-rich {
		p:not([class]) {
			line-height: var(--txt-body-lh);
		}
	}

	li {
		margin-bottom: var(--padding-small);
	}
}

.txt-rich-two-cols {
	display: block;
	column-count: 2;
	column-gap: var(--padding-extra-large);

	p {
		margin-bottom: var(--padding-small);
	}

	@include break.max-mobile {
		column-count: 1;
	}
}

.list-legal {
	font-size: var(--txt-body-lead-size);

	ol {
		font-weight: bold;
		counter-reset: ol;
		list-style-type: none;
		padding-left: 0;

		> li {
			margin: 0.625rem 0;
			padding: 0;
		}

		li::before {
			counter-increment: ol;
			content: counters(ol, '.') '. ';
			font-weight: bold;
		}

		ol {
			font-weight: 400;

			li {
				padding-left: 1.5rem;
			}

			li:not(:last-child) {
				margin-bottom: 1.5rem;
			}
		}
	}
}