.list {
	display: flex;
	flex-direction: column;
	gap: $space-1;
	list-style-type: none;
	padding-left: 0;

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: $space-sm;
		margin-left: 0;
	}

	&.list-ordered {
		list-style-type: decimal;
		display: list-item;
		margin-left: 30px;

		.list-item {
			display: list-item;
		}
	}

	&.list-definition {
		gap: $space-md;

		.list-row {
			border-left: 2px solid $color-primary;

			.list-term::before,
			.list-desc::before {
				content: "";
				height: 2px;
				width: $space-3;
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -1px;
				display: block;
				background: $color-primary;
			}

			.list-term,
			.list-desc {
				position: relative;
			}

			.list-term {
				padding-left: $space-5;
				font-size: $font-size-xl;
			}

			.list-desc {
				padding-left: $space-5;
			}
		}
	}

	&.with-icons {
		.ph {
			// icon styles if needed
		}
	}

	&.list-nav {
		max-width: 420px;
		width: 100%;
		gap: 0;

		.list-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			height: 50px;
			margin: 0;

			.list-action {
				display: flex;
				justify-content: space-between;
				align-items: center;

				width: 100%;
				height: 100%;
				padding: $space-2 $space-3;
				border: 0;

				font-size: $font-size-lg;
				background: $color-dark;
				color: inherit;

				transition-duration: .2s;
				transition-property: background;

				&:hover {
					background: $color-electric-blue;
				}

				.list-label {
					display: flex;
					flex-direction: row;
					gap: $space-2;
					align-items: center;
					letter-spacing: -0.05em;
					font-weight: 400;
				}

				.list-meta {
					padding: $space-2;
					background: $color-neon-green;
					color: $color-black;
					display: flex;
				}
			}

			&.list-item-active {
				.list-action {
					background: $color-electric-blue;
				}
			}
		}
	}

	&.list-actions {
		width: 100%;
		max-width: 420px;
		gap: $space-lg;

		.list-item {
			justify-content: space-between;
			align-items: flex-start;

			.list-content {
				display: flex;
				flex-direction: column;
				gap: $space-2;

				.list-title {
					font-size: $font-size-xl;
					line-height: $line-height-base;
				}

				.list-subtitle {
					// subtitle styles
				}
			}

			.list-controls {
				// controls styles
			}
		}
	}
}