globals.css

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

/* Zinc */
/* --background: 240 10% 3.9%; */
/* --muted: 240 3.7% 15.9%; */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    /* --destructive: 0 84.2% 60.2%; */
    --destructive: 2.74 92.59% 62.94%;
    --destructive-foreground: 0 0% 98%;
    --warning: 46.38 70.61% 48.04%;
    --warning-foreground: 120 12.5% 3.14%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 6px;
    --danger: 2.74 92.59% 62.94%;
  }

  .dark {
    /* --background: 120 12.5% 3.14%; */
    --background: 240, 3%, 9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    /* --muted: 165 10% 7.84%; */
    --muted: 240 3.45% 11.37%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    /* --destructive: 0 62.8% 30.6%; */
    --destructive: 356.18 70.61% 48.04%;
    --destructive-foreground: 0 0% 98%;
    --warning: 46.38 70.61% 48.04%;
    --warning-foreground: 120 12.5% 3.14%;
    /* --border: 240 3.7% 15.9%; */
    --border: 240 2% 14%;
    --border-muted: 240 2% 14%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --danger: 356.18 70.61% 48.04%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

::selection {
  color: hsl(var(--background));
  background: hsl(var(--foreground));
}

.google {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E");
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}