input.css

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

@layer components {
	.item {
		@apply flex items-center justify-between text-[15px] px-4 py-2 font-medium duration-200 rounded-lg shadow outline-1 outline-zinc-600 outline drop-shadow;
	}

	.goto-btn {
		@apply bg-blue-300 border-none rounded-lg btn btn-sm hover:bg-blue-400;
	}

	.del-btn {
		@apply bg-red-300 border-none rounded-lg btn btn-sm hover:bg-red-400;
	}

	.btn-group {
		@apply flex flex-row gap-2;
	}

	[data-theme='dark'] .item {
		@apply hover:bg-zinc-800;
	}

	[data-theme='light'] .item {
		@apply hover:bg-zinc-100;
	}

	.video-item {
		@apply rounded-lg;
	}

	.video-frame {
		@apply h-[35vh] w-[30vw] rounded-lg shadow-sm mb-4;
	}

	.video-title {
		@apply text-lg font-semibold;
	}

	.link-list {
		@apply flex flex-row flex-wrap gap-4;
	}

	.link-item {
		@apply text-base text-blue-400 duration-200 hover:text-blue-500;
	}
}