.view {
	animation: view-in 0.16s ease;
}

@keyframes view-in {
	from {
		opacity: 0;
	}
}

.skeleton {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.skeleton span {
	display: block;
	height: 14px;
	border-radius: 3px;
	background: linear-gradient(
		90deg,
		var(--bg) 25%,
		var(--sunken) 50%,
		var(--bg) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.4s linear infinite;
}

.skeleton span:nth-child(1) {
	width: 38%;
	height: 22px;
}

.skeleton span:nth-child(2) {
	width: 72%;
}

.skeleton span:nth-child(3) {
	width: 56%;
}

.skeleton span:nth-child(4) {
	width: 64%;
}

@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}

.alert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 10px 14px;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-left: 4px solid var(--bad-fill);
	box-shadow: var(--card-shadow);
}

.alert .grow {
	flex: 1 1 260px;
	min-width: 0;
}

.rows.is-stale {
	opacity: 0.6;
	transition: opacity 0.15s 0.1s;
}

.btn.is-busy {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.btn.is-busy::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--line-strong);
	border-top-color: var(--accent);
	animation: spin 0.7s linear infinite;
}

.btn-primary.is-busy::after {
	border-color: rgba(255, 255, 255, 0.4);
	border-top-color: var(--on-accent);
}

.list-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pager {
	display: flex;
	align-items: center;
	gap: 4px;
}