@import 'tailwindcss' layer(tailwind);

@layer tailwind {
  @layer base {
    /* preflight disabled - using Ant Design's base styles */
  }
}

@layer components {
  .flex-c {
    @apply flex justify-center items-center;
  }

  .flex-ac {
    @apply flex justify-around items-center;
  }

  .flex-bc {
    @apply flex justify-between items-center;
  }

  .navbar-bg-hover {
    @apply dark:text-white dark:hover:bg-[#242424]!;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .abs-c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .abs-tc {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .abs-lc {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .abs-bc {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .abs-rc {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}