@import 'nouislider/dist/nouislider.css';

.range {
	@apply flex;
	@apply justify-between;
	@apply px-4;
	@apply gap-4;
	@apply text-sm;
	@apply label;

	.input {
		@apply input-sm;
		@apply border-0;
		@apply text-base-content/80;
	}

	input {
		@apply m-0;
	}
}

.nouislider {
	.noUi-target {
		@apply mx-3;
		@apply my-3;
		@apply h-3;
		@apply bg-base-200;
		@apply border-none;
		@apply shadow-none;
		@apply rounded-full;
	}

	.noUi-handle {
		@apply cursor-pointer;
		@apply rounded-full;
		@apply w-5.5;
		@apply h-5.5;
		@apply -top-1.25;
		@apply -right-4;
	}

	.noUi-connect {
		@apply bg-base-300;
	}

	.noUi-handle {
		@apply bg-base-100;
		@apply border-4;
		@apply border-base-content;
		@apply shadow-none;
	}

	&.primary {
		.noUi-target {
			@apply bg-base-300;
		}

		.noUi-connect {
			@apply bg-primary;
		}

		.noUi-handle {
			@apply border-primary;
		}
	}

	&.secondary {
		.noUi-target {
			@apply bg-base-300;
		}

		.noUi-connect {
			@apply bg-secondary;
		}

		.noUi-handle {
			@apply border-secondary;
		}
	}

	&.accent {
		.noUi-target {
			@apply bg-base-300;
		}

		.noUi-connect {
			@apply bg-accent;
		}

		.noUi-handle {
			@apply border-accent;
		}
	}

	&.info {
		.noUi-target {
			@apply bg-base-300;
		}

		.noUi-connect {
			@apply bg-info;
		}

		.noUi-handle {
			@apply border-info;
		}
	}

	&.success {
		.noUi-target {
			@apply bg-base-300;
		}

		.noUi-connect {
			@apply bg-success;
		}

		.noUi-handle {
			@apply border-success;
		}
	}

	&.warning {
		.noUi-target {
			@apply bg-base-300;
		}

		.noUi-connect {
			@apply bg-warning;
		}

		.noUi-handle {
			@apply border-warning;
		}
	}

	&.error {
		.noUi-target {
			@apply bg-base-300;
		}

		.noUi-connect {
			@apply bg-error;
		}

		.noUi-handle {
			@apply border-error;
		}
	}

	.noUi-handle:before, .noUi-handle:after {
		@apply hidden;
	}

	.noUi-handle:focus {
		@apply outline-none;
	}
}