@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	body {
		@apply kl-text-front;
		@apply kl-bg-background;
	}

	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	textarea:-webkit-autofill,
	textarea:-webkit-autofill:hover,
	textarea:-webkit-autofill:focus,
	select:-webkit-autofill,
	select:-webkit-autofill:hover,
	select:-webkit-autofill:focus {
		border: 0px solid transparent;
		-webkit-text-fill-color: rgb(var(--kloktun-front)) !important;
		-webkit-box-shadow: 0 0 0px 1000px rgb(var(--kloktun-background)) inset !important;
		transition: background-color 5000s ease-in-out 0s;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}

	.icon svg {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}

	/* controls */
	.control-height-large {
		@apply kl-h-12;
	}

	.control-height-medium {
		@apply kl-h-11;
	}

	.control-height-default {
		@apply kl-h-10;
	}

	.control-height-small {
		@apply kl-h-9;
	}

	.control-height-mini {
		@apply kl-h-8;
	}

	/* rounded */
	.control-rounded {
		@apply kl-rounded-xl;
	}

	.control-border-color {
		@apply kl-border-stroke;
	}

	/* editable control */
	.editable-control-border {
		@apply kl-rounded-control;
		@apply kl-border kl-border-stroke focus:kl-border-primary focus-within:kl-border-primary;
		@apply kl-duration-300;
		@apply kl-outline-none;
		@apply kl-ring-0;
		transition-property: border-color;
	}

	.editable-control-border.success {
		@apply kl-border-success focus:kl-border-success focus-within:kl-border-success;
	}

	.editable-control-border.error {
		@apply kl-border-error focus:kl-border-error focus-within:kl-border-error;
	}

	.editable-control-border.warning {
		@apply kl-border-warning focus:kl-border-warning focus-within:kl-border-warning;
	}

	.editable-control-placeholder {
		@apply placeholder:kl-text-hint;
	}

	.editable-control-background {
		@apply kl-bg-background;
	}

	/* icon button */

	.icon-control-size-large {
		width: 48px;
		height: 48px;
		max-width: 48px;
		max-height: 48px;
	}

	.icon-control-size-medium {
		width: 44px;
		height: 44px;
		max-width: 44px;
		max-height: 44px;
	}

	.icon-control-size-default {
		width: 40px;
		height: 40px;
		max-width: 40px;
		max-height: 40px;
	}

	.icon-control-size-small {
		width: 36px;
		height: 36px;
		max-width: 36px;
		max-height: 36px;
	}

	.icon-control-size-mini {
		width: 32px;
		height: 32px;
		max-width: 32px;
		max-height: 32px;
	}

	.control-inject > * {
		@apply kl-max-h-full;
	}
}

@layer components {
	.kl-slider-hoverable .kl-slider-thumb {
		@apply kl-scale-0 kl-pointer-events-none kl-transition-transform kl-duration-150;
	}

	.kl-slider-hoverable:hover .kl-slider-thumb,
	.kl-slider-hoverable:focus-within .kl-slider-thumb {
		@apply kl-scale-100 kl-pointer-events-auto;
	}
}

@layer utilities {
	/* Hide scrollbar for Chrome, Safari and Opera */
	.kl-no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.kl-no-scrollbar {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
}