@tailwind utilities;

@layer utilities {
  @supports selector(::-webkit-scrollbar) {
    .scrollbar-dashboard::-webkit-scrollbar {
      width: 2px;
    }

    .scrollbar-dashboard::-webkit-scrollbar-thumb {
      background-color: #ddd8eb;
      border-radius: 9999px;
    }
    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
      height: 2px;
    }

    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
      background-color: #ddd8eb;
      border-radius: 9999px;
    }
    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
      height: 0px;
    }
  }
  .ui-checkbox {
    @apply appearance-none
           w-5 h-5
           rounded
           border-2 border-[var(--neutral-800)]
           bg-[hsl(var(--background))]
           cursor-pointer
           inline-grid place-content-center;
  }

  /* checked */
  .ui-checkbox:checked {
    @apply bg-brand-purple
           border-brand-purple;
  }

  /* checkmark */
  .ui-checkbox::after {
    content: "";
    @apply w-2.5 h-2.5 scale-0 transition-transform bg-white;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  }

  .ui-checkbox:checked::after {
    @apply scale-100;
  }

  /* focus */
  .ui-checkbox:focus-visible {
    @apply outline-none ring-2 ring-brand-purple
           ring-offset-2 ring-offset-[hsl(var(--background))];
  }

  /* disabled */
  .ui-checkbox:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
}