// Overwrite normal style (colors)
@import 'modules/variables';
@import 'custom/variables';

$color-white: #1c1c13;
$color-black: #fefefe;
$color-map-background: #0d151c;

$color-online: lighten($color-online, 25%);

html {
  //@import 'modules/base';
  body,
  textarea,
  input {
    background: $color-white;
    color: lighten($color-black, 100);
  }

  header {
    background: transparentize($color-black, .98);
    border-bottom-color: lighten($color-white, 10%);
  }

  a {
    color: $color-online;
    text-decoration: none;

    &:focus {
      color: darken($color-online, 15%);
    }
  }

  //@import 'modules/leaflet';
  .leaflet-container {
    background: $color-map-background;
  }

  .leaflet-label {
    &.leaflet-label-right {
      background-color: $color-white;
    }
  }

  .leaflet-control-container {
    .leaflet-control-layers-toggle {
      background: lighten($color-white, 10);
      color: $color-black;
    }
  }

  .leaflet-control-zoom {
    a {
      background: lighten($color-white, 10);
      color: $color-black;

      &:hover {
        background: $color-white;
      }
    }
  }

  .leaflet-control-layers {
    &.leaflet-control {
      opacity: .9;
    }
  }

  .language-switch {
    color: $color-black;

    option {
      background: $color-white;
    }
  }

  //@import 'modules/filter';
  .filter-node {
    input {
      color: $color-black;
    }
  }

  //@import 'modules/sidebar';
  .sidebar {
    .infobox,
    .container {
      background: transparentize($color-white, .03);
      border-right: 1px solid darken($color-white, 10%);
    }

    img {
      filter: invert(100%);
    }

    @media screen and (max-width: map-get($grid-breakpoints, xl) - 1) {
      background: $color-white;
    }
  }

  //@import 'modules/tabs';
  .tabs {
    background: transparentize($color-black, .98);
    border-bottom-color: lighten($color-white, 10%);

    li {
      color: transparentize($color-black, .5);

      &:hover {
        color: $color-black;
      }
    }
  }

  //@import 'modules/node';
  .bar {
    background: mix($color-new, $color-white, 60);

    &.warning {
      background: mix($color-offline, $color-white, 60);
    }

    label {
      color: $color-white;
    }
  }

  //@import 'modules/button';
  button {
    background: lighten($color-white, 10);
    color: $color-black;

    &:hover {
      background: $color-white;
    }

    &.close {
      background: transparent;
      color: transparentize($color-black, .5);
    }
  }
}