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

html {
	--form-label-color         : rgb(71 85 105);
	--form-error-color         : rgb(239 68 68);
	--form-control-ring-color  : rgb(59 130 246);
	--form-control-background  : rgb(255 255 255);
	--form-control-placeholder : rgb(148 163 184);
	--form-control-color       : rgb(71 85 105);

	--form-help-block-color    : rgb(71 85 105);

	@media (prefers-color-scheme : dark) {
		--form-label-color         : rgb(148 163 184);
		--form-control-ring-color  : rgb(59 130 246);
		--form-control-background  : rgb(30 41 59);
		--form-control-placeholder : rgb(148 163 184);
		--form-control-color       : rgb(226 232 240);

		--form-help-block-color    : rgb(148 163 184);
	}
}

.form-label {
	@apply uppercase text-xs font-bold;
	color : var(--form-label-color);
}

.form-control {
	border                     : 0;
	background-color           : var(--form-control-background);
	color                      : var(--form-control-color);
	transition-property        : all;
	transition-timing-function : cubic-bezier(.4, 0, .2, 1);
	transition-duration        : .15s;
	@apply px-3 py-2 text-sm w-full shadow outline-none;

	&::placeholder {
		color : var(--form-control-placeholder);
	}

	&.no-rounding-bottom {
		border-bottom-left-radius  : 0 !important;
		border-bottom-right-radius : 0 !important;
	}

	&:disabled {
		@apply opacity-50 cursor-not-allowed;
	}

	&:focus, &:focus-visible {
		--tw-ring-opacity : 1;
		--tw-ring-color   : rgb(var(--form-control-ring-color) / var(--tw-ring-opacity));
		@apply ring-4;
	}

	&.with-icon {
		@apply pl-11 pr-11;
	}
}

.form-group {
	@apply mb-3 flex flex-col transition-all;

	label {
		color : var(--form-label-color);
		@apply uppercase text-xs font-bold;
		@apply block mb-2 transition-all;
	}

	&.no-end-space {
		margin-bottom : 0 !important;
	}

	&.has-error {
		label, .help-block {
			color : var(--form-error-color);
		}

		.form-control {
			--tw-ring-opacity : 1;
			--tw-ring-color   : rgb(var(--form-error-color) / var(--tw-ring-opacity));
			@apply ring-2;
		}
	}

	.help-block {
		color : var(--form-help-block-color);
		@apply mt-2 mb-1 block text-xs;
	}

	input[type="date"], input[type="datetime-local"] {
		line-height : 1.15rem !important;
	}

	&.required {
		label {
			&:after {
				content : "*";
				color : var(--form-error-color);
				@apply font-semibold ml-1;
			}
		}
	}

	.form-control {
		@apply shadow-md;
	}

	.form-check {
		@apply flex flex-row items-center space-x-2;

		label {
			@apply mb-0 text-sm;
		}
	}
}

.form-control:last-of-type {
	.preview {
		border-bottom : 0 !important;
	}
}