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

.task-list-item::before {
  @apply hidden;
}

.task-list-item {
  @apply list-none;
}

html::-webkit-scrollbar {
  display: none;
}

/* https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}

.underline-magical {
  @apply bg-gradient-to-r from-primary-500 to-primary-500 bg-no-repeat 
  no-underline [background-position:0_100%]
  [background-size:100%_0.2em] focus:[background-size:100%_100%] hover:text-white
  hover:[background-size:100%_100%] motion-safe:transition-all
  motion-safe:duration-300 dark:from-primary-500 dark:to-primary-500;
}

.horizontal-underline {
  border-bottom-width: 0;
  background-image: linear-gradient(transparent, transparent), linear-gradient(#de1d8d, #de1d8d);
  background-size: 0 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease-in-out;
}

.horizontal-underline:hover {
  background-size: 100% 3px;
  background-position: 0 100%;
}

.horizontal-underline-active {
  background-size: 100% 3px;
  background-position: 0 100%;
}

#nprogress .bar {
  background: #de1d8d !important;
  height: 4px !important;
}

.introText {
  transition: opacity 0.4s;
}

[cmdk-root] {
  @apply fixed top-[25vh] left-1/2 z-10 w-full max-w-[640px] 
  -translate-x-1/2 transform rounded-xl border bg-white p-2 shadow-lg 
  dark:border-neutral-800 dark:bg-neutral-900 dark:shadow 
  dark:shadow-neutral-700;
}

[cmdk-input] {
  @apply h-12 w-full border-0 border-b border-b-gray-200 
  bg-transparent text-sm font-semibold
  text-gray-500 placeholder-gray-500 outline-none focus:border-b focus:border-transparent 
  focus:border-b-gray-200 focus:ring-0 dark:border-b-gray-500 dark:text-gray-200
  dark:placeholder-gray-300;
}

[cmdk-list] {
  @apply mt-2 max-h-64 overflow-y-scroll px-4 scrollbar-thin
  scrollbar-track-gray-100 scrollbar-thumb-gray-300 scrollbar-track-rounded-lg 
  scrollbar-thumb-rounded-lg dark:scrollbar-track-neutral-800 
  dark:scrollbar-thumb-neutral-700;
}

[cmdk-item] {
  @apply relative flex h-12 cursor-pointer select-none items-center space-x-3 rounded-md
  px-4 text-sm font-medium text-gray-700 transition-all duration-200 
  ease-in dark:text-gray-200;
}

[cmdk-item][aria-selected='true'] {
  @apply bg-gray-200 dark:bg-neutral-800;
}

[cmdk-group-heading] {
  @apply flex select-none items-center py-1 text-sm 
  font-medium text-gray-700 dark:text-gray-200;
}

[cmdk-empty] {
  @apply flex items-center justify-center py-4 text-sm text-gray-500;
}
