.btn,
.button,
select:not([multiple]) {
	height: 44px;
	line-height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

input,
textarea,
select {
	@apply text-sm ;
}

textarea,
select {
	@apply text-sm outline-none border-none ring-1 ring-gray-300 rounded-xl px-3 transition focus:ring-2 focus:ring-orange-400 dark:bg-[#1a1a1a] dark:text-gray-200 dark:ring-[#333];
}

textarea.form-control {
	height: auto;
}

.anbarak-input {
	height: 44px;
	position: relative;
	@apply ring-1 ring-gray-300 overflow-hidden dark:ring-[#333];

	.anbarak-input__placeholder,
	.anbarak-input__label {
		@apply text-sm;
		top: 0;
		line-height: 44px;
		transition: 250ms;
		pointer-events: none;
		transform-origin: inline-end;
	}

	.anbarak-input__label {
		@apply text-gray-500 dark:text-gray-400;
	}

	.anbarak-input__placeholder {
		inset-inline-start: 15px;
		transform: translateY(0px);
		transition: 290ms;
		top: 0px;
		opacity: 1;
	}

	&.with-label .anbarak-input__placeholder {
		transform: translateY(5px);
		opacity: 0;
		top: 8px;
	}

	&:focus-within {
		@apply ring-2 ring-orange-400;
		.anbarak-input__label {
			top: -12px;
			font-size: 0.75em;
			@apply text-gray-600 dark:text-gray-300;
		}

		.anbarak-input__placeholder {
			transform: translateY(0px);
			opacity: 1;
		}
	}

	input:not(:placeholder-shown) ~ .anbarak-input__label {
			top: -12px;
			font-size: 0.75em;
			@apply text-gray-600 dark:text-gray-300;
	}

	&.with-label input {
		padding-top: 12px;
	}

	input {
		@apply w-full;

		&.ltr ~ .anbarak-input__placeholder {
			inset-inline-end: auto;
			inset-inline-start: 15px;
		}

		&.text-center ~ .anbarak-input__label {
			inset-inline-end: 0;
			inset-inline-start: 0;
			text-align: center;
			transform-origin: center;
		}
		&.text-center ~ .anbarak-input__placeholder {
			inset-inline-end: 0;
			inset-inline-start: 0;
			text-align: center;
			transform-origin: center;
		}
	}

	input:not(:placeholder-shown) ~ .anbarak-input__placeholder {
		opacity: 0;
	}
}

.input {
	&[readonly] {
		pointer-events: none;
		background: rgb(241, 241, 241) !important;
		color: rgb(190, 190, 190) !important;
	}
}

:where(.dark) .input[readonly] {
	background: #1a1a1a !important;
	color: #666 !important;
}

.form-checkbox,
.form-radio,
.form-switch {
	display: block;
	position: relative;
	min-height: 1.4rem;
	padding: 0.65rem 2rem;
	padding-inline-end: .65em;
	line-height: 1.2rem;
}

.form-checkbox,
.form-radio {
	cursor: pointer;
	user-select: none;
	
	.form-icon {
		@apply bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-[#333];
		position: absolute;
		top: 7px;
		left: auto;
		inset-inline-start: 0;
		width: 1.5rem;
		height: 1.5rem;
		display: inline-block;
		cursor: pointer;
		transition:
			background 0.2s,
			border 0.2s,
			box-shadow 0.2s,
			color 0.2s;
	}
}

/* don't use logical properties for this */
.form-checkbox input + .form-icon::before {
	@apply border border-gray-300 dark:border-[#555];
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -3px;
	margin-top: -7px;
	width: 7px;
	height: 12px;
	transform: rotate(45deg);
	background-clip: padding-box;
	border: 0.15rem solid #dbdbdb;
	border-left-width: 0;
	border-top-width: 0;
}

.form-checkbox input:checked + .form-icon::before {
	border-color: white;
}

.form-checkbox input:checked + .form-icon,
.form-radio input:checked + .form-icon,
.form-switch input:checked + .form-icon {
	@apply bg-primary border-primary;
}

.form-checkbox input[type="checkbox"] {
	visibility: hidden;
	display: none;

	&:checked + .form-checkbox__check {
		@apply bg-orange-400;

		&::before {
			transform: rotate(45deg);
			border-color: #fff;
			width: 0.6rem;
		}
	}
}
