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

/* layer base */
@layer base {
  :root {
    /* shadcn-ui */
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;

    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;

    --primary: 220.9 39.3% 11%;
    --primary-foreground: 210 20% 98%;

    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;

    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;

    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 224 71.4% 4.1%;

    --radius: 0.5rem;

    /* custom */
    --header-padding-top: 16px;
    --header-height: calc(var(--nav-height) + var(--header-padding-top));

    --nav-height: 3.5rem;

    --sidebar-btn-height: 3.5rem;

    --page-max-width: 90rem;
    --content-max-width: 85rem;

    --padding-lr: 16px;

    @media screen and (min-width: 768px) {
      --padding-lr: 24px;

      --nav-height: 4.5rem;
    }

    @media screen and (min-width: 1024px) {
      --header-padding-top: 24px;
    }
  }

  html {
    --body-bg-color: #fff;
    --body-text-color: #000;

    --header-shadow-color: #eee;
    --header-bg-color: rgba(255, 255, 255, 0.85);

    --selection-color: #fff;
    --selection-bg-color: #000;

    --text-gradient-color: linear-gradient(150deg, #000 25%, #777);
  }

  html.dark {
    --body-bg-color: #000;
    --body-text-color: #fff;

    --header-shadow-color: #222;
    --header-bg-color: rgba(0, 0, 0, 0.8);

    --selection-color: #000;
    --selection-bg-color: #fff;

    --text-gradient-color: linear-gradient(150deg, #fff 25%, #777);
  }

  ::selection {
    color: var(--selection-color);
    background: var(--selection-bg-color);
  }

  html {
    @apply scroll-pt-[calc(var(--header-height)+2rem)] scroll-smooth;
  }

  body {
    @apply bg-[var(--body-bg-color)] font-base font-light text-[var(--body-text-color)];
  }

  body.is-locked {
    @apply overflow-hidden;
  }

  code {
    @apply font-code;
  }
}

/* layer utilities */
@layer utilities {
  .px-lr {
    @apply px-[var(--padding-lr)];
  }

  .absolute-fill {
    @apply absolute left-0 top-0 h-full w-full;
  }
}

/* layer components */
@layer components {
  [class*='container-'] {
    @apply mx-auto w-full;
  }

  .container-page {
    @apply max-w-[var(--page-max-width)];
  }

  .container-content {
    @apply max-w-[var(--content-max-width)];
  }

  .text-gradient {
    background-image: var(--text-gradient-color);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .text-gradient::selection {
    -webkit-text-fill-color: var(--selection-color);
  }

  .split-line {
    @apply hidden text-gray-100 dark:text-gray-900 md:inline-block;
  }

  .split-line::before {
    content: '|';
  }

  .nav-link {
    @apply text-gray-300 duration-200 hover:text-black dark:text-gray-500 dark:hover:text-white;
  }

  .nav-tool-link {
    @apply text-gray-700 duration-100 hover:text-black dark:text-gray-100 hover:dark:text-white;
  }

  .sidebar-active-marker {
    @apply absolute left-0 top-0 z-[-1] h-9 w-full rounded bg-[#f9f9f9] transition-[top] duration-200 dark:bg-gray-900;
  }

  .sidebar-link {
    @apply block px-4 py-2 text-gray-300 duration-200 hover:text-black dark:text-gray-500 dark:hover:text-white;
  }

  .bg-grid {
    --dash-space: 0.125rem;
    --dash-stroke: 0.25rem;
    --dash-gap: 1.5rem;
    --dash-width: 1px;

    --bg-color: #fff;
    --dash-color: #efefef;

    mask-image: radial-gradient(circle at center, #000, #000 50%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000, 10%, #000 90%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000, 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: exclude;
    background-size:
      var(--dash-stroke) var(--dash-stroke),
      var(--dash-gap) var(--dash-gap);
    background-image: linear-gradient(
        to bottom,
        transparent var(--dash-space),
        var(--bg-color) var(--dash-space)
      ),
      linear-gradient(to right, var(--dash-color) var(--dash-width), transparent var(--dash-width)),
      linear-gradient(to right, transparent var(--dash-space), var(--bg-color) var(--dash-space)),
      linear-gradient(to bottom, var(--dash-color) var(--dash-width), transparent var(--dash-width));
  }

  .dark .bg-grid {
    --bg-color: #000;
    --dash-color: #191919;
  }

  .rainbow-bg {
    --rainbow-opacity: 0.7;

    @apply relative;
  }

  .dark .rainbow-bg {
    @media screen and (min-width: 1024px) {
      --rainbow-opacity: 0.5;
    }
  }

  .rainbow-bg::after {
    @apply absolute-fill z-[-1] block opacity-[var(--rainbow-opacity,1)];

    content: '';
    background-image: radial-gradient(at 27% 37%, #3a8bfd 0, transparent 50%),
      radial-gradient(at 97% 21%, #9772fe 0, transparent 50%),
      radial-gradient(at 52% 99%, #fd3a4e 0, transparent 50%),
      radial-gradient(at 10% 29%, #5afc7d 0, transparent 50%),
      radial-gradient(at 97% 96%, #e4c795 0, transparent 50%),
      radial-gradient(at 33% 50%, #8ca8e8 0, transparent 50%),
      radial-gradient(at 79% 53%, #eea5ba 0, transparent 50%);
    filter: blur(150px) saturate(150%);
  }
}
