@keyframes submit {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 0.5rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 2.5rem;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;

	&[multiple] {
		background: none;
	}
}

option {
	color: hsl(var(--heading-foreground));
}

.lqd-input-switcher {
	background-image: var(--switcher-ball);

	&:checked {
		background-image: var(--switcher-ball-active);
	}
}

button {
	&.submitting {
		position: relative;
		overflow: hidden;
		text-indent: -99999px;

		&:before {
			content: '';
			display: inline-block;
			width: 24px;
			height: 24px;
			position: absolute;
			top: calc(50% - 12px);
			left: calc(50% - 12px);
			border: 2px solid;
			border-radius: 100%;
			animation: submit 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
		}

		svg {
			display: none;
		}
	}
}

input::file-selector-button {
	background-color: hsl(var(--foreground) / 0.1);
	color: hsl(var(--foreground));
	border: none;
	padding: theme('size.1') theme('size.3');
	margin-inline-end: theme('size.2');
}

.lqd-input-checkbox-custom-wrap {


	input:checked~& {
		background-image: url("data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%227%22%20viewBox%3D%220%200%209%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.55664%205.30859L7.43359%200.431641L8.05664%201.07617L2.55664%206.57617L0%204.01953L0.644531%203.375L2.55664%205.30859Z%22%20fill%3D%22%237A63DF%22%2F%3E%3C%2Fsvg%3E");
		background-size: 60%;
	}
}

.form-check-input[type='checkbox'] {
	border-radius: 4px;
}

.form-selectgroup-input:checked+.form-selectgroup-label {
	color: #000;
	border-radius: 30px;
	background: hsl(var(--primary) / 10%);
}

.form-selectgroup-label {
	color: #000;
	background-color: transparent;
}

.form-select,
.form-control,
.input-group-text {
	padding: 1em 1.23em;

}


.form-select,
.form-control,
.input-group-text,
.form-label {
	--tblr-border-color: hsl(var(--border));
	font-size: 0.8125rem;
	font-weight: 500;
}

.col-form-label,
.form-label {
	color: var(--label);
}

.form-label {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 0.6rem;

	.lqd-tooltip-container {
		@apply ms-1 align-middle;
	}
}

.input-group-text {
	display: flex;
	align-items: center;
	height: 100%;
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	border: none;

	.input-group-flat & {
		background: none;
	}
}

.form-control {
	.input-group-flat & {
		&:not(:last-child) {
			border-right: var(--tblr-border-width) solid hsl(var(--border));
		}
	}
}

.form-control-sm {
	padding: 0.125rem 0.25rem;
}

.form-check {
	cursor: pointer;
}

.input-group {

	> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
	&:not(.has-validation)> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
		border-radius: var(--tblr-border-radius);
	}
}

.workbook-form {

	input {
		border: none !important;
	}

	input {
		padding: 0;
		font-family: 'Lora', 'serif';
		font-size: 21px;
		background-color: transparent !important;
		color: hsl(var(--heading-foreground));

		&::placeholder {
			color: hsl(var(--heading-foreground));
		}

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}
}

.select2-container--default {
	.select2-selection--multiple {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background: none;
        overflow: auto;

		.select2-selection__rendered {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.5rem;
			margin: 0;
		}

		.select2-selection__choice {
			padding: 2px 10px;
			margin: 0;
			border: none;
			border-radius: 5em;
			background-color: hsl(var(--foreground) / 7%);
			color: hsl(var(--foreground));

			button {
				border: none;
				padding-inline-start: 0;
				position: relative;
			}

			.select2-selection__choice__display {
				padding: 0;
			}
		}
	}
}

.select2-container {
	.select2-search--inline {
		.select2-search__field {
			margin-top: 0;
		}
	}
}

.form-switch {
	display: flex;
	align-items: center;
	padding-left: 0;
	font-weight: 500;

	.form-check-input {
		flex-shrink: 0;
		width: 3rem;
		height: 1.5rem;
		border-radius: 1.5rem;
		margin-left: 0;
		background-size: 1.3rem;

		&:checked {
			background-color: #191919;
		}
	}

	.form-check-label {
		margin-inline-start: 0.5rem;
	}
}

.theme-dark {

	.form-check-input:not(:checked),
	.form-control:not([type='search']),
	.form-file-text,
	.form-select,
	.form-selectgroup-check {
		@apply bg-input-background border-input-border;
	}

	.select2-container {
		.select2-search--inline {
			.select2-search__field {
				color: inherit;
			}
		}
	}

	.form-switch {
		.form-check-input {
			&:checked {
				background-color: hsl(var(--primary));
			}
		}
	}

	.form-selectgroup-input:checked+.form-selectgroup-label {
		background: hsl(var(--primary));
	}
}

.form-input-stepper {
	@apply lqd-input-stepper appearance-none text-center px-2;
}

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

/* Firefox */
.lqd-input-stepper[type=number] {
  -moz-appearance: textfield;
}

html[dir='rtl'] {
	select {
		background-position: left 0.5rem center;
	}
}

@media (min-width: 992px) {
	.image-input-for-fillanexample {
		padding-right: 128px;
	}
}

@media (max-width: 565px) {

	// to prevent ios zoom on focus
	button[type='submit'],
	.form-file-text,
	.form-selectgroup-check,
	.form-control,
	.form-input,
	.form-select {
		font-size: 16px !important;
	}
}
