.loader {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2, 8px);
	position: relative;

	// Display modes
	&.display--inline {
		display: inline-flex;
	}

	&.display--block {
		display: flex;
		width: 100%;
		padding: var(--spacing-4, 16px);
	}

	&.display--overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: var(--z-index-overlay, 9999);
		background: var(--overlay-light, rgba(255, 255, 255, 0.8));

		@media (prefers-color-scheme: dark) {
			background: var(--overlay-dark, rgba(0, 0, 0, 0.8));
		}

		&.withBackdrop {
			background: var(--overlay, rgba(0, 0, 0, 0.5));
		}
	}
}

.spinner {
	display: inline-block;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	border-style: solid;
	border-top-color: transparent;
	border-right-color: transparent;
	flex-shrink: 0;

	// Size variations
	.size--xs & {
		width: 16px;
		height: 16px;
		border-width: 2px;
	}

	.size--sm & {
		width: 20px;
		height: 20px;
		border-width: 2px;
	}

	.size--md & {
		width: 24px;
		height: 24px;
		border-width: 3px;
	}

	.size--lg & {
		width: 32px;
		height: 32px;
		border-width: 3px;
	}

	.size--xl & {
		width: 48px;
		height: 48px;
		border-width: 4px;
	}

	// Tone variations
	.tone--neutral & {
		border-bottom-color: var(--text-secondary, rgba(0, 0, 0, 0.56));
		border-left-color: var(--text-secondary, rgba(0, 0, 0, 0.56));
	}

	.tone--accent & {
		border-bottom-color: var(--accent, #007aff);
		border-left-color: var(--accent, #007aff);
	}

	.tone--positive & {
		border-bottom-color: var(--tone-positive, #34c759);
		border-left-color: var(--tone-positive, #34c759);
	}

	.tone--critical & {
		border-bottom-color: var(--tone-critical, #ff3b30);
		border-left-color: var(--tone-critical, #ff3b30);
	}

	// Emphasis variations
	.emphasis--subtle & {
		opacity: 0.6;
	}

	.emphasis--normal & {
		opacity: 1;
	}

	.emphasis--strong & {
		opacity: 1;
		filter: drop-shadow(0 0 8px currentColor);
	}

	// Speed variations
	.speed--slow & {
		animation-duration: 1.5s;
	}

	.speed--normal & {
		animation-duration: 1s;
	}

	.speed--fast & {
		animation-duration: 0.75s;
	}
}

.label {
	font-size: var(--font-size-sm, 14px);
	color: var(--text-secondary, rgba(0, 0, 0, 0.56));
	font-weight: 500;
	white-space: nowrap;

	@media (prefers-color-scheme: dark) {
		color: var(--text-secondary-dark, rgba(255, 255, 255, 0.7));
	}

	// Size adjustments for label
	.size--xs & {
		font-size: var(--font-size-xs, 12px);
	}

	.size--sm & {
		font-size: var(--font-size-sm, 14px);
	}

	.size--md & {
		font-size: var(--font-size-base, 16px);
	}

	.size--lg & {
		font-size: var(--font-size-lg, 18px);
	}

	.size--xl & {
		font-size: var(--font-size-xl, 20px);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

// Responsive utilities
@media (min-width: 640px) {
	.loader[data-tablet] {
		// Tablet styles will be applied via data attributes
	}
}

@media (min-width: 1024px) {
	.loader[data-desktop] {
		// Desktop styles will be applied via data attributes
	}
}