@import "tailwindcss";

body {
	@apply bg-amber-50;

	--color1: var(--color-amber-50);
	--color2: var(--color-amber-100);

	background-image: repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
		repeating-linear-gradient(45deg, var(--color1) 25%, var(--color2) 25%, var(--color2) 75%, var(--color1) 75%, var(--color1));
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
}

.pill {
	@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md;
}

.button {
	@apply hover:bg-orange-400 transition cursor-pointer;
}

.input {
	@apply !bg-orange-200 outline-0 focus:ring-[3px] ring-orange-400/50 transition placeholder:text-black/40;
}

.checkbox {
	@apply flex items-center justify-center appearance-none size-5 bg-orange-300 border-2 border-orange-400 rounded-md cursor-pointer checked:bg-orange-400;
}

.checkbox::after {
	content: "";
	@apply hidden size-3.5 bg-cover bg-no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
}

.checkbox:checked::after {
	@apply block;
}