@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin  "@tailwindcss/typography";

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@theme {
  --font-sans: "SN Pro", sans-serif; 
  --color-soft-50: oklch(0.999 0.001 0);
  --color-soft-100: oklch(0.995 0.002 0);
  --color-soft-200: oklch(0.99 0.003 0);
  --color-soft-300: oklch(0.98 0.004 0);
  --color-soft-400: oklch(0.95 0.005 0);
  --color-soft-500: oklch(0.9 0.006 0);
  --color-soft-600: oklch(0.85 0.007 0);
  --color-soft-700: oklch(0.8 0.008 0);
  --color-soft-800: oklch(0.75 0.009 0);
  --color-soft-900: oklch(0.7 0.01 0);

  --color-gray-50: oklch(0.985 0 0);
  --color-gray-100: oklch(0.967 0.001 286.375);
  --color-gray-200: oklch(0.92 0.004 286.32);
  --color-gray-300: oklch(0.871 0.006 286.286);
  --color-gray-400: oklch(0.705 0.015 286.067);
  --color-gray-500: oklch(0.552 0.016 285.938);
  --color-gray-600: oklch(0.442 0.017 285.786);
  --color-gray-700: oklch(0.37 0.013 285.805);
  --color-gray-800: oklch(0.274 0.006 286.033);
  --color-gray-900: oklch(0.21 0.006 285.885);
  --color-gray-950: oklch(0.141 0.005 285.823);
}


@layer utilities {

  :root {
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
  }

  .dark {
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
  }

  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 2px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }
}
@supports(animation-timeline: view()) {
  @keyframes fade-in-on-enter--fade-out-on-exit {
    entry 0% {
      opacity: 0;
      transform: translateY(100%);
    }

    entry 100% {
      opacity: 1;
      transform: translateY(0);
    }

    exit 0% {
      opacity: 1;
      transform: translateY(0);
    }

    exit 100% {
      opacity: 0;
      transform: translateY(-100%);
    }
  }

  .list-view>ul>li {
    animation: linear fade-in-on-enter--fade-out-on-exit;
    animation-timeline: view();
  }
}

.vue3-treeselect__single-value {
  @apply!text-black dark: !text-white;
}

.vue3-treeselect:not(.vue3-treeselect--disabled):not(.vue3-treeselect--focused) .vue3-treeselect__control:hover {
  @apply !border-gray-200 dark:!border-neutral-700;
}

.vue3-treeselect__control {
  @apply w-full !border-gray-200 !text-xs !text-black !shadow-sm !outline-none focus:!border-gray-300 focus:!ring-0 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-white dark:focus:!border-neutral-700;
}

.vue3-treeselect__input {
  @apply !text-xs !text-black dark:!text-white;
}

.vue3-treeselect__input:focus {
  @apply !ring-0 !outline-none !shadow-none !text-xs;
}

.vue3-treeselect__menu {
  @apply !bg-white !shadow-sm !text-xs !border-t-0 !border-solid !border-gray-200 dark:!border-neutral-700 !ring-0 focus:!outline-none dark:!bg-neutral-900 dark:!text-white;
}

.vue3-treeselect .vue3-treeselect__list div {
  @apply !leading-[2.5] !py-0 !my-0;
}

.vue3-treeselect__option--highlight {
  @apply !bg-gray-100 dark:!bg-neutral-800;
}

.vue3-treeselect__option vue3-treeselect__option--highlight {
  @apply !bg-gray-100 dark:!bg-neutral-800;
}

.vue3-treeselect--open .vue3-treeselect__control {
  @apply dark:!border-neutral-700;
}

.vue3-treeselect--single .vue3-treeselect__option--selected {
  @apply !bg-gray-100 dark:!bg-neutral-800;
}

.vue3-treeselect--focused:not(.vue3-treeselect--open) .vue3-treeselect__control {
  @apply !border-gray-200 dark:!border-neutral-700 !shadow-none;
}

.vue3-treeselect__single-value {
  @apply !text-black dark:!text-white;
}

:root .dp__theme_light {
  --dp-background-color: #fff;
  --dp-text-color: var(--color-gray-900);
  --dp-hover-color: var(--color-gray-100);
  --dp-hover-text-color: var(--color-gray-900);
  --dp-primary-color: var(--color-gray-600);
  --dp-primary-text-color: #fff;
  --dp-border-color: var(--color-gray-200);
  --dp-menu-border-color: var(--color-gray-200);
  --dp-font-family: "SN Pro", sans-serif;
  --dp-font-size: 0.75rem;
}

:root .dp__theme_dark {
  --dp-background-color: var(--color-gray-950);
  --dp-text-color: var(--color-gray-100);
  --dp-hover-color: var(--color-gray-800);
  --dp-hover-text-color: var(--color-gray-100);
  --dp-primary-color: var(--color-gray-400);
  --dp-primary-text-color: var(--color-gray-900);
  --dp-border-color: var(--color-gray-700);
  --dp-menu-border-color: var(--color-gray-700);
  --dp-font-family: "SN Pro", sans-serif;
  --dp-font-size: 0.75rem;
}
