@use "../kit-deps" as *;
@use "typography" as *;

.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: $border-width-base solid $color-primary;
			padding: $space-2 0;

			.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: $border-width-base solid transparent;

				font-size: $font-size-base;
				background: $surface-panel;
				color: inherit;
				cursor: pointer;

				transition-duration: $motion-base;
				transition-timing-function: $motion-ease;
				transition-property: background, border-color, color;

				&:focus-visible {
					@include focus_ring;
				}

				@include hover_touch {
					background: $color-electric-blue;
					color: $color-black;
				}

				.list-label {
					display: flex;
					flex-direction: row;
					gap: $space-2;
					align-items: center;
					letter-spacing: $letter-spacing-normal;
					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;
					color: $color-black;
					border-color: $color-electric-blue;
				}
			}
		}
	}

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

		.list-item {
			justify-content: space-between;
			align-items: flex-start;
			padding: $space-3 0;
			border-bottom: $border-width-base solid rgba($color-text-light, 0.08);

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

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

				.list-subtitle {
					color: $color-text-dark;
				}
			}

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