$main-color: #263238; // blue-grey darken-4
$main-color-surface: #37474f; // blue-grey darken-3
$main-color-surface-light: #455a64; // blue-grey darken-2
$main-color-surface-light-variant: #546e7a; // blue-grey darken-1
$minor-color: #78909c; // blue-grey lighten-1
$minor-color-surface: #90a4ae; // blue-grey lighten-2

$link-color: #81d4fa; // light-blue lighten-3
$text-color: rgba(255, 255, 255, 0.8);

body[data-theme="dark"] {
  & {
    --background-color: #{$main-color};
    --box-shadow-color: #090909;
  }

  &,
  .modal-container,
  .modal-header {
    background-color: $main-color;
    color: $text-color;
  }

  .card,
  .empty,
  .form-select,
  .form-input,
  .form-checkbox .form-icon,
  .leaflet-popup-tip,
  .leaflet-popup-content-wrapper,
  .leaflet-bar a,
  .leaflet-container,
  .leaflet-control-attribution,
  .leaflet-control-geocoder,
  .leaflet-control-geocoder-icon,
  .leaflet-control-geocoder-address-context,
  .leaflet-control-geocoder-alternatives li:hover,
  .leaflet-draw-actions a {
    background-color: $main-color-surface !important;
    color: $text-color;
  }

  .btn {
    background-color: $main-color-surface-light;
    color: $text-color;
    border-color: $minor-color;
    &.btn-primary {
      background-color: $main-color-surface-light-variant;
      &:focus,
      &:hover {
        border-color: $minor-color-surface;
      }
    }
    &.btn-link:hover {
      color: $text-color;
    }
    &.btn-clear:not(:focus) {
      background-color: transparent;
    }
    &.active {
      background-color: $main-color-surface;
    }
  }

  ::selection {
    background-color: $minor-color;
  }

  a {
    color: $link-color;
  }

  .avatar {
    background-color: #0288d1; // light-blue darken-2
  }

  .divider {
    border-top-color: $main-color-surface-light;
  }

  .modal {
    &.active .modal-overlay, &:target .modal-overlay {
      background: rgba(75, 75, 75, 0.5);
    }
  }

  .badge:not([data-badge])::after, .badge[data-badge]::after {
    background-color: $minor-color;
  }

  img:not(.leaflet-tile) {
    filter: brightness(.8) contrast(1.2);
  }

  .leaflet-control-geocoder-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M12.2 13l3.4 6.6c.6 1.1 2.5-.4 2-1.2l-4-6.2z"/><circle cx="10.8" cy="8.9" r="3.9" fill="none" stroke="%23fff" stroke-width="1.5"/></svg>');
  }

  .leaflet-draw-toolbar.leaflet-bar a {
    background-color: $text-color !important;
  }
}
