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

.timeline {
	display: grid;
	gap: 0;
	width: 100%;
	max-width: 760px;
	margin: 0;
	padding: 0;
	list-style: none;

	.timeline-item {
		position: relative;
		display: grid;
		grid-template-columns: $control-height-md minmax(0, 1fr);
		gap: $space-3;
		min-height: 88px;
	}

	.timeline-item::before {
		content: "";
		position: absolute;
		top: $control-height-md;
		bottom: 0;
		left: calc($control-height-md / 2 - 1px);
		width: $border-width-base;
		background: $border-color-muted;
	}

	.timeline-item:last-child::before {
		display: none;
	}

	.timeline-marker {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: $control-height-md;
		height: $control-height-md;
		border: $border-width-base solid $border-color-muted;
		color: $color-text-medium;
		background: $surface-page;
		font-size: $icon-size-sm;
		transition-duration: $motion-base;
		transition-timing-function: $motion-ease;
		transition-property: border-color, background, color, box-shadow, transform;
	}

	.timeline-content {
		min-width: 0;
		padding: 0 0 $space-5;
	}

	.timeline-card {
		padding: $space-4;
		border: $border-width-base solid $border-color-muted;
		border-left-width: $border-width-accent;
		background: $surface-panel-muted;
		transition-duration: $motion-base;
		transition-timing-function: $motion-ease;
		transition-property: border-color, background, transform;
	}

	.timeline-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: $space-2;
		margin-bottom: $space-2;
	}

	.timeline-title {
		margin: 0;
		font-size: $font-size-md;
		font-weight: $font-weight-bold;
		line-height: $line-height-snug;
		text-transform: uppercase;
	}

	.timeline-time {
		color: $color-text-dark;
		font-size: $font-size-xs;
		font-family: $font-family-code;
		line-height: $line-height-normal;
	}

	.timeline-text {
		margin: 0;
		color: $color-text-medium;
		font-size: $font-size-sm;
		line-height: $line-height-normal;
	}

	.timeline-meta {
		display: flex;
		flex-wrap: wrap;
		gap: $space-2;
		margin-top: $space-3;
	}

	.timeline-item-success {
		.timeline-marker,
		.timeline-card {
			border-color: $color-success;
		}

		.timeline-marker {
			color: $color-black;
			background: $color-success;
		}
	}

	.timeline-item-warning {
		.timeline-marker,
		.timeline-card {
			border-color: $color-warning;
		}

		.timeline-marker {
			color: $color-black;
			background: $color-warning;
		}
	}

	.timeline-item-danger,
	.timeline-item-error {
		.timeline-marker,
		.timeline-card {
			border-color: $color-error;
		}

		.timeline-marker {
			color: $color-black;
			background: $color-error;
		}
	}

	.timeline-item {
		@include hover_touch {
			.timeline-marker {
				box-shadow: 0 0 0 4px rgba($color-secondary, 0.14);
				transform: scale(1.04);
			}

			.timeline-card {
				background: $surface-panel-strong;
				transform: translateX($space-1);
			}
		}
	}
}

.activity-log {
	display: grid;
	width: 100%;
	max-width: 720px;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;

	.activity-log-row {
		display: grid;
		grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr) auto;
		gap: $space-3;
		align-items: center;
		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;

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

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

	.activity-log-time {
		color: $color-text-dark;
		font-family: $font-family-code;
		font-size: $font-size-xs;
	}

	.activity-log-title {
		color: $color-text-light;
		font-size: $font-size-sm;
		font-weight: $font-weight-semibold;
		line-height: $line-height-normal;
	}
}

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