/* Browser compatibility layer for Safari and Chrome variants. */

@supports not (color: oklch(50% .1 180)) {
  :root,
  :host {
    --color-red-50: #fef2f2;
    --color-red-300: #fca5a5;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-orange-400: #fb923c;
    --color-orange-500: #f97316;
    --color-yellow-300: #fde047;
    --color-yellow-400: #facc15;
    --color-yellow-500: #eab308;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;
    --color-pink-400: #f472b6;
    --color-gray-50: #f9fafb;
    --color-gray-600: #4b5563;
    --color-gray-900: #111827;
  }
}

@supports not (height: 100svh) {
  .h-svh {
    height: 100vh;
  }

  .min-h-svh {
    min-height: 100vh;
  }
}

@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: -webkit-fill-available;
  }

  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .backdrop-blur,
  .backdrop-blur-sm,
  .backdrop-blur-lg,
  .backdrop-blur-xl {
    background-color: rgba(10, 10, 10, .94) !important;
  }
}

@supports not (translate: 0 0) {
  .-translate-x-1\/2.-translate-y-1\/2,
  .translate-x-\[-50\%\].translate-y-\[-50\%\] {
    transform: translate(-50%, -50%);
  }

  .-translate-x-1\/2,
  .translate-x-\[-50\%\] {
    transform: translateX(-50%);
  }

  .-translate-y-1\/2,
  .translate-y-\[-50\%\] {
    transform: translateY(-50%);
  }

  .-translate-x-px {
    transform: translateX(-1px);
  }

  .translate-x-px {
    transform: translateX(1px);
  }

  .scale-110 {
    transform: scale(1.1);
  }

  .rotate-45 {
    transform: rotate(45deg);
  }

  .rotate-90 {
    transform: rotate(90deg);
  }

  .rotate-180 {
    transform: rotate(180deg);
  }

  @media (hover: hover) {
    .hover\:scale-105:hover {
      transform: scale(1.05);
    }

    .hover\:scale-110:hover {
      transform: scale(1.1);
    }

    .hover\:scale-\[1\.02\]:hover {
      transform: scale(1.02);
    }

    .group-hover\:translate-x-1:is(:where(.group):hover *) {
      transform: translateX(.25rem);
    }
  }
}