/*
 * 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.
 */

#map-container {
  .bm-marker-html {
    position: relative;

    .bm-marker-poi-label {
      position: absolute;
      top: 0;
      left: 0;

      opacity: 0;
      transition: opacity 0.3s;
    }

    .bm-marker-poi-icon {
      opacity: 1;
      transition: opacity 0.3s;
      filter: drop-shadow(1px 1px 3px #0008);
    }

    &.bm-marker-highlight {
      .bm-marker-poi-label {
        opacity: 1;
      }

      .bm-marker-poi-icon {
        opacity: 0;
      }
    }
  }

  .bm-marker-html .bm-marker-poi-label,
  .bm-marker-labelpopup,
  .bm-marker-popup {
    transform: translate(-50%, -100%) translate(0, -0.5em);

    max-width: 15em;

    color: var(--theme-fg);
    background-color: var(--theme-bg);
    filter: drop-shadow(1px 1px 3px #0008);
    padding: 0.5em;

    > hr {
      border: none;
      border-bottom: solid 1px var(--theme-bg-light);
      margin: 0.5em -0.5em;
    }

    &:after {
      position: absolute;
      bottom: calc(-1em + 1px);
      left: 50%;
      transform: translate(-50%, 0);

      content: '';
      border: solid 0.5em transparent;
      border-top-color: var(--theme-bg);
    }
  }

  .bm-marker-popup {
    line-height: 1.2em;

    .group {
      > .label {
        position: relative;
        top: 0;
        left: 0.5em;

        margin: 0 0.5em;

        font-size: 0.8em;
        color: var(--theme-fg-light);
      }

      > .content {
        display: flex;
        justify-content: center;

        > .entry {
          margin: 0 0.5em;

          > .label {
            color: var(--theme-fg-light);
          }
        }
      }
    }

    .files {
      font-size: 0.8em;
      color: var(--theme-fg-light);
    }
  }

  .bm-marker-player {
    position: relative;
    transform: translate(-50%, -50%);
    filter: drop-shadow(1px 1px 3px #0008);

    img {
      width: 32px;
      image-rendering: pixelated;

      transition: width 0.3s;
    }

    .bm-player-name {
      position: absolute;
      top: -0.5em;
      left: 50%;
      transform: translate(-50%, -100%);

      padding: 0.25em;
      background-color: #0008;
      color: #fff;

      transition: opacity 0.3s;
    }

    &[distance-data="med"],
    &[distance-data="far"] {
      img {
        width: 16px;
      }

      .bm-player-name {
        opacity: 0;
      }
    }
  }
}