@charset "utf-8";

/* LISTS DESIGN */
.lists-design {
	display: grid;
	gap: 0.625rem;
	font-size: var(--text-body);
	line-height: var(--line-height-normal);
	margin-block: var(--margin-gap);
	text-align: start;
	}
.lists-design-link {
	color: var(--color-link);
	font-size: 0.75em;
	padding-left: 0.125rem;
	position: relative;
	top: -0.125rem;
	}

/* LISTS DOTTED */
.lists-dotted-item {
	align-items: flex-end;
	display: grid;
	gap: 0.3125rem;
	grid-template-columns: auto minmax(2.5rem, 1fr) auto;
	}
.lists-dotted-item span {
	overflow-wrap: normal;
	word-break: normal;
	}
.lists-dotted-header {
	font-weight: var(--lists-header-weight);
	}
.lists-dotted-dots {
	border-bottom: 2px dotted var(--background-divider);
	}
.lists-dotted-value {
	text-align: end;
	}

/* LISTS POINTS */
.lists-points-item {
	background-color: var(--background-trim);
	border-radius: var(--radius);
	display: grid;
	gap: 0.625rem;
	grid-template-columns: 2rem 1fr;
	padding: var(--text-body);
	}
.lists-points-number {
	color: var(--color-stress);
	font-weight: var(--font-weight-heavy);
	text-transform: none;
	}
.lists-points-info {
	display: grid;
	}
.lists-points-info > strong {
	font-weight: var(--lists-header-weight);
	}
.lists-points-value {
	color: var(--color-dimmed);
	font-size: 0.9em;
	}

/* LISTS VALUES */
.lists-values-header {
	color: var(--color-important);
	font-size: 1.75em;
	font-weight: var(--lists-header-weight);
	padding-inline-end: 0.1em;
	}

/* LISTS BULLETED / INLINE */
.lists-bulleted,
.lists-inline {
	display: grid;
	gap: 0.625rem;
	}
.lists-bulleted-item,
.lists-inline-item {
	padding-inline-start: 1.875rem;
	position: relative;
	}
.lists-bulleted-item::before,
.lists-inline-item::before {
	color: var(--color-accent);
	content: var(--fa);
	font-family: var(--font-awesome);
	font-style: normal;
	font-variant: normal;
	font-weight: var(--font-awesome-weight);
	inset-inline-start: 0;
	position: absolute;
	}
.lists-bulleted-header,
.lists-inline-header {
	font-weight: var(--lists-header-weight);
	}
.lists-has-value .lists-inline-header::after {
	content: ':';
	}
.lists-bulleted-value,
.lists-inline-value {
	color: var(--color-dimmed);
	font-style: normal;
	}
.lists-bulleted-value {
	display: block;
	}