@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 {
		width: 100%;
		max-width: 620px;
		gap: 0;
		border: $border-width-base solid $border-color-muted;
		border-left-width: $border-width-accent;
		background: $surface-panel-muted;

		.list-row {
			display: grid;
			grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
			gap: $space-4;
			align-items: start;
			padding: $space-3 $space-4;
			border-bottom: $border-width-base solid rgba($color-text-light, 0.08);
			transition-duration: $motion-base;
			transition-timing-function: $motion-ease;
			transition-property: background, border-color;

			.list-term {
				display: inline-flex;
				width: max-content;
				max-width: 100%;
				margin: 0;
				padding: $space-1 $space-2;
				color: $color-black;
				background: $color-primary;
				font-size: $font-size-sm;
				font-weight: $font-weight-bold;
				line-height: $line-height-base;
				text-transform: uppercase;
			}

			.list-desc {
				margin: 0;
				color: $color-text-medium;
				font-size: $font-size-sm;
				line-height: $line-height-relaxed;
			}

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

			@include hover_touch {
				background: $surface-panel-strong;

				.list-term {
					background: $color-secondary;
				}
			}
		}
	}

	&.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
			}
		}
	}
}

@include media_down("sm") {
	.list {
		&.list-definition {
			.list-row {
				grid-template-columns: 1fr;
				gap: $space-2;
			}
		}
	}
}