@import "tailwindcss";

@plugin "tailwindcss-animate";

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

@theme {
  --font-sans: var(--font-sans);

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@utility step {
  counter-increment: step;

  &:before {
    @apply border-background bg-muted absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 text-center -indent-px font-mono text-base font-medium;
    @apply mt-[-4px] ml-[-50px];
    content: counter(step);
  }
}

@layer utilities {
  :root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24 9.8% 10%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;
    --radius: 1rem;
    --chart-1: 220 70% 50%;
    --chart-2: 340 75% 55%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 160 60% 45%;
    --chart-6: 180 50% 50%;
    --chart-7: 216 50% 50%;
    --chart-8: 252 50% 50%;
    --chart-9: 288 50% 50%;
    --chart-10: 324 50% 50%;
    --timing: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    --background: 30 15% 8%;
    --foreground: 60 9.1% 97.8%;
    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;
    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;
    --primary: 60 9.1% 97.8%;
    --primary-foreground: 24 9.8% 10%;
    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 24 5.7% 82.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 340 75% 55%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 160 60% 45%;
    --chart-6: 180 50% 50%;
    --chart-7: 216 50% 50%;
    --chart-8: 252 50% 50%;
    --chart-9: 288 50% 50%;
    --chart-10: 324 50% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    @apply scroll-smooth;
  }
  body {
    @apply bg-background text-foreground;
    /* font-feature-settings: "rlig" 1, "calt" 1; */
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }
}

@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

::selection {
  @apply bg-stone-300 dark:bg-stone-800;
}

.hamster-loading-wrapper {
  --size: 12px;
  height: var(--size);
  width: var(--size);
  inset: 0;
  z-index: 10;
}

.hamster-loading-wrapper[data-visible="false"] {
  transform-origin: center;
  animation: hamster-fade-out 0.2s ease forwards;
}

.hamster-spinner {
  position: relative;
  top: 50%;
  left: 50%;
  height: var(--size);
  width: var(--size);
}

.hamster-loading-bar {
  --gray11: hsl(0, 0%, 43.5%);
  animation: hamster-spin 0.8s linear infinite;
  background: var(--gray11);
  border-radius: 6px;
  height: 13%;
  left: -10%;
  position: absolute;
  top: -3.9%;
  width: 30%;
}

.hamster-loading-bar:nth-child(1) {
  animation-delay: -0.8s;
  transform: rotate(0deg) translate(120%);
}

.hamster-loading-bar:nth-child(2) {
  animation-delay: -0.7s;
  transform: rotate(45deg) translate(120%);
}

.hamster-loading-bar:nth-child(3) {
  animation-delay: -0.6s;
  transform: rotate(90deg) translate(120%);
}

.hamster-loading-bar:nth-child(4) {
  animation-delay: -0.5s;
  transform: rotate(135deg) translate(120%);
}

.hamster-loading-bar:nth-child(5) {
  animation-delay: -0.4s;
  transform: rotate(180deg) translate(120%);
}

.hamster-loading-bar:nth-child(6) {
  animation-delay: -0.3s;
  transform: rotate(225deg) translate(120%);
}

.hamster-loading-bar:nth-child(7) {
  animation-delay: -0.2s;
  transform: rotate(270deg) translate(120%);
}

.hamster-loading-bar:nth-child(8) {
  animation-delay: -0.1s;
  transform: rotate(315deg) translate(120%);
}

@keyframes hamster-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hamster-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes hamster-spin {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}

.scrollbar-hidden {
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

/* Thanks to next.js. */
[data-issues-count-animation] {
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-issues-count-animation] > div {
  text-align: center;
}

[data-issues-count-exit].animate {
  animation: fadeOut 300ms var(--timing) forwards;
}

[data-issues-count-enter].animate {
  animation: fadeIn 300ms var(--timing) forwards;
}

[data-issues-count-plural] {
  display: inline-block;
  animation: fadeIn 300ms var(--timing) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(2px);
  }
}