.loadingSkeleton {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.switchRow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.fieldsRow {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	flex-wrap: wrap;
}

.field {
	flex: 1;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.label,
.input,
.helper,
.button,
.link,
.description,
.descriptionShort,
.toggle,
.toggleLabel {
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
	border-radius: 6px;
}

.label {
	width: 40%;
	height: 12px;
}

.input {
	width: 100%;
	height: 40px;
}

.select {
	width: 80%;
}

.helper {
	width: 70%;
	height: 10px;
	border-radius: 4px;
}

.description {
	width: 60%;
	height: 12px;
}

.descriptionShort {
	width: 45%;
	height: 12px;
}

.toggle {
	width: 42px;
	height: 24px;
	border-radius: 12px;
}

.toggleLabel {
	width: 120px;
	height: 12px;
}

.actionsRow {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

.button {
	width: 80px;
	height: 32px;
}

.link {
	width: 100px;
	height: 12px;
	border-radius: 4px;
}

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