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

@layer base {
  @font-face {
    font-family: "Fira Code";
    src: url("/fonts/FiraCode-Regular.ttf") format("truetype");
  }
  html {
    @apply w-screen;
  }
  body {
    @apply overflow-x-hidden bg-neutral-50 bg-[url('/images/bg.png')] font-inter dark:bg-neutral-900 dark:bg-[url('/images/bg-dark.png')];
  }
}

@layer components {
  #cards:hover > .card::after,
  .card:hover::before {
    @apply opacity-100;
  }

  .card {
    @apply relative rounded-lg bg-[rgba(255,255,255,0.05)];
  }

  .card::before,
  .card::after {
    @apply absolute left-0 top-0 h-full w-full rounded-[7px] opacity-0 transition-opacity duration-500 content-[""];
    pointer-events: none;
  }

  .card::before {
    @apply z-[3];
    background: radial-gradient(
      330px circle at var(--mouse-x) var(--mouse-y),
      rgba(255, 255, 255, 0.123),
      transparent 40%
    );
  }

  .card::after {
    @apply z-[1];
    background: radial-gradient(
      330px circle at var(--mouse-x) var(--mouse-y),
      rgba(255, 255, 255, 0.377),
      transparent 40%
    );
  }

  .card > .card-content {
    @apply absolute inset-[1px] z-[2] flex flex-grow-[1] flex-col rounded-[7px] bg-[rgb(23,23,23)] p-[10px];
  }
}

@layer utilities {
  ::-webkit-scrollbar {
    @apply h-1 w-1;
  }

  ::-webkit-scrollbar-track {
    @apply bg-neutral-200 dark:bg-neutral-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded bg-neutral-400 dark:bg-neutral-700;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-500 dark:bg-neutral-600;
  }
}

.drag-outline {
  --c: rgb(212 212 212); /* neutral-300 */
  --w: 12px;
  --h: 2px;
}

[data-theme="dark"] .drag-outline {
  --c: rgb(212 212 212 / 0.4);
}

.drag-outline::before {
  @apply absolute inset-0 animate-drag-outline;
  content: "";
  background-image: linear-gradient(90deg, var(--c) 50%, transparent 50%),
    linear-gradient(90deg, var(--c) 50%, transparent 50%),
    linear-gradient(0deg, var(--c) 50%, transparent 50%),
    linear-gradient(0deg, var(--c) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:
    var(--w) var(--h),
    var(--w) var(--h),
    var(--h) var(--w),
    var(--h) var(--w);
  background-position:
    left top,
    right bottom,
    left bottom,
    right top;
}
