@layer theme, base, components, utilities;

@layer components {
	.ml-rail {
		display: flex;
		flex-direction: column;
		gap: var(--ml-space-5);
		width: 100%;
	}

	/* Title (Eyebrow-style label above the list) */
	.ml-rail__header {
		display: flex;
		align-items: center;
		min-height: var(--ml-space-9);
	}

	.ml-rail__title {
		min-width: 0;
		overflow: hidden;
		color: var(--text-muted);
		font-family: var(--font-mono);
		font-size: var(--text-2xs);
		font-weight: 500;
		letter-spacing: var(--tracking-meta);
		line-height: 1;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* List */
	.ml-rail__list {
		display: flex;
		flex-direction: column;
		gap: var(--ml-space-0-5);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Item */
	.ml-rail__item {
		display: flex;
		align-items: center;
		gap: var(--ml-space-3);
		min-height: var(--ml-space-9);
		width: 100%;
		cursor: pointer;
		color: var(--text-secondary);
		transition: color var(--duration-micro) var(--ease-out);
	}

	.ml-rail__item:hover {
		color: var(--primary);
	}

	.ml-rail__item:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
		border-radius: var(--radius-sm);
	}

	.ml-rail__item[data-active="true"] {
		color: var(--primary);
	}

	/* Dot indicator */
	.ml-rail__dot {
		width: 0.3125rem;
		height: 0.3125rem;
		flex-shrink: 0;
		border-radius: var(--radius-pill);
		background: color-mix(in oklch, var(--text-muted) 50%, transparent);
		transition: background-color var(--duration-micro) var(--ease-out);
	}

	.ml-rail__item[data-active="true"] .ml-rail__dot {
		background: var(--accent);
	}

	/* Content wrapper */
	.ml-rail__content {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		gap: var(--ml-space-2);
		min-width: 0;
	}

	/* Label */
	.ml-rail__label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		font-size: var(--text-sm);
		font-weight: 400;
		line-height: var(--leading-tight);
		text-overflow: ellipsis;
		white-space: nowrap;
		transition: font-weight var(--duration-micro) var(--ease-out);
	}

	.ml-rail__item[data-active="true"] .ml-rail__label {
		font-weight: 600;
	}

	/* Count */
	.ml-rail__count {
		flex-shrink: 0;
		color: var(--text-muted);
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}
}