globals.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --primary: 197 77% 56%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --primary: 195 53% 40%;
    --primary-foreground: 0 0% 100%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Override default style from leaflet */
body .leaflet-popup-content-wrapper {
  @apply p-0 bg-transparent w-60;
}

body .leaflet-popup-content {
  @apply m-0;
}

body .leaflet-container a.leaflet-popup-close-button {
  @apply bg-background rounded-bl-lg -right-px pl-1;
}
/* Override tiny-slider */
.tns-nav {
  display: none;
}

.tns-horizontal.tns-subpixel>.tns-item {
  vertical-align: middle !important;
}

.streams-animation.leaflet-interactive {
  stroke-width: 2;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-dasharray: 1 15;
  stroke-dashoffset: 208;
  animation-name: dash;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.streams-hover.leaflet-interactive:focus {
  outline: none !important;
  stroke-opacity: 0.5;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/*
leaflet bug: tooltips stay open if hovering an element while panning.
As new tooltips are added at the end of .leaflet-tooltip-pane,
just hide all tooltips that aren't the last one
*/
.leaflet-tooltip-pane > .leaflet-tooltip:not(:last-child) {
  display: none;
}


.skeleton-animation {
  background: linear-gradient(90deg, hsl(var(--muted-foreground)) 0%, hsl(var(--foreground)) 50%, hsl(var(--muted-foreground)) 100%);
  background-size: 300% 100%;
  opacity: 0.2;
  animation: skeletonator 4s ease infinite;
}

@keyframes skeletonator {
  0% {
    background-position-x: 0%;
  }
  50% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 0%;
  }
}

.is-WYSIWYG h2 {
  @apply my-6 lg:my-8;
  @apply clear-both text-xl font-bold tracking-tight lg:text-2xl;
}

.is-WYSIWYG h3 {
  @apply my-4 lg:my-6;
  @apply clear-both text-xl tracking-tight lg:text-2xl;
}

.is-WYSIWYG h4 {
  @apply my-3 lg:my-5;
  @apply text-lg font-bold tracking-tight lg:text-xl;
}

.is-WYSIWYG h5,
.is-WYSIWYG h6 {
  @apply my-2 lg:my-4;
  @apply text-lg tracking-tight lg:text-xl;
}

.is-WYSIWYG p {
  @apply mb-6 lg:mb-8;
}

.is-WYSIWYG blockquote {
  @apply my-3 lg:my-5 flex gap-4 text-lg text-foreground/75 italic;
}

.is-WYSIWYG blockquote p:last-child {
  @apply mb-0;
}

.is-WYSIWYG blockquote::before {
  content: "“";
  @apply text-5xl;
}

.is-WYSIWYG .information {
  @apply py-2 px-4 lg:py-4 lg:px-8 bg-muted;
}

.is-WYSIWYG iframe,
.is-WYSIWYG video {
  @apply my-6 w-full h-auto lg:my-10 aspect-video;
}

.is-WYSIWYG .image {
  @apply clear-both overflow-hidden lg:mb-8;
}

.is-WYSIWYG .image:not(.align-left):not(.align-right) img {
  @apply w-full;
}

.is-WYSIWYG .align-left {
  @apply mb-8 lg:float-start lg:mr-10 lg:mb-8 lg:w-min;
}

.is-WYSIWYG .align-right {
  @apply mb-8 lg:float-end lg:ml-10 lg:mb-8 lg:w-min;
}

.is-WYSIWYG .align-left img,
.is-WYSIWYG .align-right img {
  @apply mt-2;
  max-width: revert-layer;
}

@media (max-width: 1024px) {
  .is-WYSIWYG .align-left img,
  .is-WYSIWYG .align-right img {
    @apply w-auto max-w-full;
  }
}

.is-WYSIWYG .align-left figcaption,
.is-WYSIWYG .align-right figcaption,
.is-WYSIWYG .image figcaption {
  @apply text-sm mt-1 text-center;
}