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

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: $space-3;
	width: 100%;
	padding: $space-3;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;

	.toolbar-group {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: $space-2;
		min-width: 0;
	}

	.toolbar-title {
		margin: 0;
		font-size: $font-size-lg;
		font-weight: $font-weight-bold;
		line-height: $line-height-base;
		text-transform: uppercase;
	}

	.toolbar-meta {
		color: $color-text-dark;
		font-size: $font-size-sm;
	}
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: $space-2;

	.pagination-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: $control-height-sm;
		height: $control-height-sm;
		padding: 0 $space-3;
		border: $border-width-base solid $border-color-muted;
		color: $color-text-medium;
		background: $surface-panel-muted;
		font-family: $font-family-base;
		font-size: $font-size-sm;
		font-weight: $font-weight-semibold;
		line-height: $line-height-base;
		cursor: pointer;
		transition-duration: $motion-base;
		transition-timing-function: $motion-ease;
		transition-property: color, background, border-color, opacity;

		&:focus-visible {
			@include focus_ring;
		}

		@include hover_touch {
			color: $color-black;
			background: $color-secondary;
			border-color: $color-secondary;
		}

		&.pagination-item-active,
		&[aria-current="page"] {
			color: $color-black;
			background: $color-primary;
			border-color: $color-primary;
		}

		&:disabled,
		&.pagination-item-disabled {
			color: $color-text-dark;
			background: $surface-panel;
			border-color: $border-color-muted;
			cursor: not-allowed;
			opacity: 0.72;
		}
	}

	.pagination-ellipsis {
		color: $color-text-dark;
		padding: 0 $space-1;
	}
}

.empty-state {
	max-width: 560px;
	padding: $space-6;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;

	.empty-state-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: $control-height-lg;
		height: $control-height-lg;
		margin-bottom: $space-4;
		color: $color-black;
		background: $color-primary;
		font-size: $icon-size-lg;
	}

	.empty-state-title {
		margin: 0 0 $space-2;
		font-size: $font-size-xl;
		font-weight: $font-weight-bold;
		text-transform: uppercase;
	}

	.empty-state-text {
		max-width: 440px;
		margin: 0 0 $space-5;
		color: $color-text-medium;
		line-height: $line-height-relaxed;
	}

	.empty-state-actions {
		display: flex;
		flex-wrap: wrap;
		gap: $space-2;
	}

	&.empty-state-error {
		border-color: $color-error;

		.empty-state-icon {
			background: $color-error;
		}
	}
}

.skeleton {
	display: block;
	position: relative;
	overflow: hidden;
	background: $surface-panel-strong;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		transform: translateX(-100%);
		background: linear-gradient(
			90deg,
			transparent,
			rgba($color-text-light, 0.12),
			transparent
		);
		animation: skeleton_shimmer 1.6s infinite;
	}

	&.skeleton-line {
		width: 100%;
		height: 14px;
	}

	&.skeleton-title {
		width: 60%;
		height: 22px;
	}

	&.skeleton-block {
		width: 100%;
		height: 120px;
	}

	&.skeleton-square {
		width: $control-height-lg;
		height: $control-height-lg;
	}
}

.skeleton-stack {
	display: flex;
	flex-direction: column;
	gap: $space-3;
	max-width: 520px;
	padding: $space-4;
	border: $border-width-base solid $border-color-muted;
	background: $surface-panel-muted;
}

@keyframes skeleton_shimmer {
	100% {
		transform: translateX(100%);
	}
}