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

::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 0px;
}
::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background-color: #d4d4d4;
	box-shadow: 0 0 1px #e0e0e000;
}
* {
	transition: all 0.3s ease-out;
}

.scroller[data-animated="true"] .scroller__inner {
	width: max-content;
	animation: scroll var(--_animation-duration, 40s)
		var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
	--_animation-direction: reverse;
}

.scroller[data-direction="left"] {
	--_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
	--_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
	--_animation-duration: 60s;
}

@keyframes scroll {
	to {
		transform: translate(calc(-50% - 0.5rem));
	}
}

input ~ span.placeholder {
	top: 8px;
}
.fly {
	color: white;
	background-color: #cacaca;
	padding: 0px 1px;
	font-size: 12px;
	top: -18px;
	border-radius: 5px;
	transition: all 0.5s;
}
input:valid ~ span.placeholder,
input:focus ~ span.placeholder,
input:not(:empty) ~ span.placeholder {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	height: 20px;
	color: white;
	background-color: #cacaca;
	padding: 0px 10px;
	font-size: 10px;
	top: -11px;
	border-radius: 5px;
	transition: all 0.5s;
}

@layer components {
	.adl {
		@apply h-full absolute top-0 bottom-0 left-0 m-2 flex flex-row items-center justify-center gap-2;
	}
	.adr {
		@apply h-full absolute top-0 bottom-0 right-0 m-2 flex flex-row items-center justify-center gap-2;
	}
	.adt {
		@apply absolute top-0 left-0 right-0 m-2 flex flex-row items-center justify-center gap-2;
	}
	.adtl {
		@apply absolute top-0 left-0 m-2 flex flex-row items-center justify-start gap-2;
	}
	.adtr {
		@apply absolute top-0 right-0 m-2 flex flex-row items-center justify-end gap-2;
	}
	.adb {
		@apply absolute bottom-0 left-0 right-0 m-2 flex flex-row items-center justify-center gap-2;
	}
	.adbl {
		@apply absolute bottom-0 left-0 m-2 flex flex-row items-center justify-start gap-2;
	}
	.adbr {
		@apply absolute bottom-0 right-0 m-2 flex flex-row items-center justify-end gap-2;
	}
	.fcol {
		@apply flex flex-col items-center justify-center;
	}
	.fcols {
		@apply flex flex-col items-start justify-center;
	}
	.fcole {
		@apply flex flex-col items-end justify-center;
	}
	.frow {
		@apply flex flex-row items-center justify-center;
	}
	.frows {
		@apply flex flex-row items-center justify-start;
	}
	.frowe {
		@apply flex flex-row items-center justify-end;
	}
	.frowb {
		@apply flex flex-row items-center justify-between;
	}
	.title {
		@apply text-base md:text-xl font-bold print:text-base;
	}
	.menuitem {
		@apply cursor-pointer px-2 py-1 hover:bg-gray-400 rounded-lg;
	}
	.activemenu {
		@apply cursor-default hover:bg-gray-300 border-b-4 border-red-500 rounded-none;
	}
	.responsivegrid {
		@apply grid grid-flow-row-dense grid-cols-1 items-center justify-items-center gap-4 p-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
	}
	.menubar {
		@apply frows w-full gap-2 border-b border-green-600 bg-gray-300 px-2;
	}
	.statusbar {
		@apply frowe fixed bottom-0 w-full gap-2 border-t border-green-600 bg-green-200 px-2 text-xs shadow-inner;
	}
	.inputcss {
		@apply w-full rounded-xl border border-gray-400 p-2 pl-12 shadow outline-none;
	}
	.checkbox {
		@apply h-5 w-5 cursor-pointer appearance-none rounded-full border border-green-400 p-2 checked:border-transparent checked:bg-green-400;
	}
	.selectedtxt {
		@apply text-xl font-bold text-gray-100;
	}
	.selectebletxt {
		@apply text-xl text-gray-400 hover:text-gray-100 cursor-pointer;
	}
	.menudiv {
		@apply fcols absolute top-12 hidden w-40 gap-2 rounded-lg bg-gray-400 bg-opacity-70 p-2 shadow-2xl group-hover:flex;
	}
	.drstitle {
		@apply text-base font-bold w-full border-b border-yellow-500 text-left uppercase;
	}
	.sstitle {
		@apply w-full text-base uppercase font-bold;
	}
	.lbtn {
		@apply text-blue-700 cursor-pointer hover:text-white drop-shadow;
	}
	.card {
		@apply overflow-hidden relative drop-shadow-xl;
	}
}