/*
 * This file is part of BlueMap, licensed under the MIT License (MIT).
 *
 * Copyright (c) Blue (Lukas Rieger) <https://bluecolored.de>
 * Copyright (c) contributors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: local("Quicksand"), url("./fonts/Quicksand.ttf") format('truetype-variations');
}

@import "variables.scss";

// ### global rules ###
:root {
  line-height: 1rem;

  @include dark-theme;

  .theme-light {
    @include light-theme;
  }

  .theme-contrast {
    @include contrast-theme;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    @include light-theme;

    .theme-dark {
      @include dark-theme;
    }
  }
}

body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
  text-align: left;
  margin: 1em 0 0.5em 0;
  padding: 0;
}

h1, h2 {
  position: relative;

  font-size: 1.2em;

  margin-left: 0;
  margin-right: 0;
  padding-left: 0.5em;
  padding-bottom: 0.5em;

  width: calc(100% - 0.5em);
  overflow: hidden;

  &:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';

    width: 100%;
    height: 1px;
    background-color: var(--theme-bg-light);
  }
}

h1 {
  width: 100%;
  text-align: center;
  padding-left: 0;
}

p {
  margin: 0.5em;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: underline;
}

kbd {
  background-color: var(--theme-bg-light);
  border-radius: 0.2em;
  margin: 0;
  padding: 0 0.2em;
}

// normalize input fields
input {
  display: inline-block;
  box-sizing: content-box;

  border: none;
  outline: none;

  margin: 0;
  padding: 0;

  font: inherit;
  color: inherit;
}

// scrollbar
::-webkit-scrollbar {
  width: 0.5em;
}
::-webkit-scrollbar-track {
  background: var(--theme-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--theme-bg-light);
  border-radius: 0.5em;
  border: solid var(--theme-bg) 0.1em;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--theme-fg-light);
}

//app-error
#bm-app-err {
  position: relative;

  width: 100vw;
  height: 100vh;

  background-color: var(--theme-bg);
  color: var(--theme-fg);

  > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;

    img {
      max-width: 10em;
      min-width: 5em;
      width: 90%;
      border-radius: 50%;
      margin: 0 0 3em 0;
    }

    .bm-app-err-hint {
      color: var(--theme-fg-light);
    }

  }

}

@import "markers.scss";
