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

@layer base {
  @font-face {
    font-family: Inter;
    font-weight: 400 700;
    src: url('/fonts/Inter.var.woff2') format('woff2-variations');
    font-display: swap;
  }
  @font-face {
    font-family: Poppins;
    font-style: normal;
    /* font-weight: 500; */
    font-display: swap;
    src: url('/fonts/Poppins-Medium.woff2') format('woff2');
  }

  /* Set defaults */
  body {
    @apply antialiased;
    @apply bg-white dark:bg-neutral-800;
    @apply text-neutral-900 dark:text-neutral-200;
    /* Disables mobile touch specific blue user select effect */
    -webkit-tap-highlight-color: transparent;
    /* Disables overscroll behavior (e.g. the "bounce" effect when scorlling past content on MacOS and iOS) */
    overscroll-behavior: none;
  }
  h1 {
    @apply text-xl;
    @apply font-poppins;
    @apply font-medium;
  }
  h2 {
    @apply text-base;
    @apply font-poppins;
    @apply font-medium;
  }
  h3 {
    @apply text-sm;
    @apply font-poppins;
    @apply font-medium;
  }
  h4 {
    @apply text-xs;
    @apply font-poppins;
    @apply font-medium;
  }
  p {
    @apply text-sm;
    @apply font-inter;
  }
}
*::-webkit-scrollbar {
  /*remove scrollbar track chrome*/
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 4px solid transparent;
  height: 50px;
  width: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: content-box;
}
* {
  scrollbar-color: #404040b3 transparent; /*remove scrollbar track firefox*/
}

/* Custom styling for react-spring-bottom-sheet */
.dark [data-rsbs-root] {
  --rsbs-bg: theme(colors.neutral.800);
  --rsbs-handle-bg: rgba(255, 255, 255, 0.2);
}
[data-rsbs-header] {
  padding-bottom: 0;
  box-shadow: none;
}
[data-rsbs-scroll] {
  /* Disables scrolling, as we want users to open the sheet instead of scrolling inside it */
  overflow: hidden;
}

.translate-x-radix-toast-swipe-move-x {
  transform: translateX(var(--radix-toast-swipe-move-x));
}

.translate-x-radix-toast-swipe-end-x {
  transform: translateX(var(--radix-toast-swipe-end-x));
}

@media screen and (max-width: 768px) {
  .maplibregl-ctrl {
    display: none !important;
  }
}

button.maplibregl-ctrl-zoom-in.maplibregl-ctrl-zoom-in {
  width: 33px;
  height: 32px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid theme(colors.neutral.200) !important;
}
button.maplibregl-ctrl-zoom-in.maplibregl-ctrl-zoom-in:focus {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
button.maplibregl-ctrl-zoom-out.maplibregl-ctrl-zoom-out {
  width: 33px;
  height: 32px;
  border: 1px solid theme(colors.neutral.200) !important;
  border-top: none !important;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
button.maplibregl-ctrl-zoom-out.maplibregl-ctrl-zoom-out:focus {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.maplibregl-ctrl.maplibregl-ctrl-group.maplibregl-ctrl.maplibregl-ctrl-group {
  background: transparent;
  box-shadow: none !important;

  @apply backdrop-blur-sm;
}
.maplibregl-ctrl.maplibregl-ctrl-group.maplibregl-ctrl.maplibregl-ctrl-group button {
  @apply bg-white/80;
}
.maplibregl-ctrl.maplibregl-ctrl-group.maplibregl-ctrl.maplibregl-ctrl-group
  button:not(:disabled):hover {
  @apply bg-white;
}
.dark
  .maplibregl-ctrl.maplibregl-ctrl-group.maplibregl-ctrl.maplibregl-ctrl-group
  button {
  @apply bg-neutral-900/80;
  border: 1px solid rgb(64, 64, 64, 0.6) !important; /* dark: border-neutral-700/60; */
}

.dark
  .maplibregl-ctrl.maplibregl-ctrl-group.maplibregl-ctrl.maplibregl-ctrl-group
  button:not(:disabled):hover {
  @apply bg-neutral-900/90;
}
.dark button.maplibregl-ctrl-zoom-in.maplibregl-ctrl-zoom-in > span {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23FFF'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.dark button.maplibregl-ctrl-zoom-out.maplibregl-ctrl-zoom-out > span {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23FFF'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E") !important;
}

html,
body,
#root {
  @apply h-full;
}

[data-rsbs-header] {
  padding-top: 25px !important;
  padding-bottom: 0 !important;
}

[data-rsbs-header]:before {
  top: 8px !important;
}
:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

noscript div {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  text-align: center;
}

noscript img {
  max-width: 300px;
}

/* Restore original simple opacity animation */
@keyframes loading-icon-spinner-animation {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.intercom-lightweight-app-launcher {
  display: none !important;
}

/* Hide intercom launcher unless it's active */
.intercom-launcher:not(.intercom-launcher-active) {
  display: none !important;
}
