/* Tailwind Core */
@import 'tailwindcss';

/* ReUI Configs */
@import './config.reui.css';

/** Global Styles **/
@layer base {
  * {
    @apply border-border;
  }

  *:focus-visible {
    @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
  }
  .leaflet-container {
    @apply !bg-card !font-[inherit];
  }
  .leaflet-container a {
    @apply !text-inherit;
  }
  .leaflet-div-icon {
    @apply !bg-transparent !border-none;
  }
  .leaflet-popup-content-wrapper, .leaflet-popup-content, .leaflet-popup-content p {
    @apply ![all:unset];
  }
  .leaflet-popup {
    @apply !animate-none;
  }
  .leaflet-popup-close-button {
    @apply ring-offset-background focus:ring-ring bg-secondary rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden;
  }
  .leaflet-tooltip, .leaflet-draw-tooltip {
    @apply !bg-foreground !text-background !animate-none !rounded-md !border-none !p-0 !px-3 !py-1.5 !shadow-none;
  }
  .leaflet-draw-tooltip:before {
    @apply bg-foreground !top-1/2 !right-0.5 size-2.5 translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] !border-none;
  }
  .leaflet-error-draw-tooltip {
    @apply !bg-destructive !text-white;
  }
  .leaflet-error-draw-tooltip:before {
    @apply bg-destructive;
  }
  .leaflet-draw-tooltip-subtext {
    @apply !text-background;
  }
  .leaflet-popup-tip-container, .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
    @apply hidden;
  }
  .leaflet-control-attribution {
    @apply !bg-muted rounded-md !px-[4px] !py-[2px] text-[10px] !leading-none !text-inherit;
  }
  .leaflet-draw-guide-dash {
    @apply rounded-full;
  }
  .leaflet-edit-marker-selected {
    @apply !border-transparent !bg-transparent;
  }
}

/* Metronic Components  */
@import './components/image-input.css';
@import './components/apexcharts.css';
@import './components/leaflet.css';
@import './components/rating.css';
@import './components/image-input.css';
@import './components/scrollable.css';

/* Demos */
@import './demos/demo1.css';

/** Dark/Light Theme Variant **/
@custom-variant dark (&:is(.dark *));
@custom-variant light (&:not(.dark *));

/* @layer components {
  .badge {
    @apply px-2 py-1 rounded-full text-xs font-medium;
  }
} */

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