@import "tailwindcss";

.setting-checkbox-wrapper {
  @apply relative w-5 h-5;
}

.setting-checkbox {
  @apply appearance-none w-full h-full border-2 border-(--col4) rounded-md bg-(--col2) transition-colors cursor-pointer;
}

.setting-checkbox:checked {
  @apply bg-(--col4) border-(--col6);
}

.fa-check-icon {
  @apply absolute top-1/2 left-1/2 text-white text-[11px] pointer-events-none -translate-x-2/4 -translate-y-2/4;
}