@use 'typography' as *;

@layer base {
	.b-list {
		@extend .b-font-text;

		padding-left: var(--spacing-8);
		margin: var(--spacing-6) 0;

		&--unordered {
			list-style-type: disc;
		}

		&--ordered {
			list-style-type: decimal;
		}

		&__item {
			margin-bottom: var(--spacing-2);

			&:last-child {
				margin-bottom: 0;
			}

			&::marker {
				color: var(--color-primary);
			}

			& .b-list {
				margin: var(--spacing-2) 0;
			}
		}
	}

	.b-prose {
		ol {
			@extend .b-list, .b-list--ordered;

			li {
				@extend .b-list__item;
			}
		}

		ul {
			@extend .b-list, .b-list--unordered;

			li {
				@extend .b-list__item;
			}
		}
	}

	.b-reset-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}
