[class^="leader-line"] {
  z-index: 9999;
}

.with-leader-line:not(:has(> *)) {
  display: inline-block;

  padding-right: 15px;
  padding-left: 6px;

  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cG9seWdvbiBwb2ludHM9IjI0LDAgMCw4IDgsMTEgMCwxOSA1LDI0IDEzLDE2IDE2LDI0IiBmaWxsPSJjb3JhbCIvPjwvc3ZnPg==");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: right 2px top 2px;
  color: #555;

  &.geolink {
    background-color: rgb(248, 248, 129);
  }
  &.doclink {
    background-color: #9ee7ea;
  }

  &:hover {
    background-image: none;

    font-weight: bolder;
    text-decoration: none;
  }
}

.DumbyMap {
  position: relative;
  max-width: 60em;
  margin: 0 auto;
  padding: 0;
  display: flex;
  overflow-x: scroll;
  /* height: 100vh; */

  .Showcase {
    order: 2;
    #mapPlaceholder {
      display: none;
    }
  }

  .SemanticHtml {
    order: 1;
    padding: 1.5rem;
    overflow-y: scroll;
    width: 100%;

    > .draggable-block {
      width: 100%;
      pointer-events: auto;
      border-radius: 0.5rem;
      background-color: white;
      margin-bottom: 3rem;

      .draggable {
        display: none;
      }
    }

    pre {
      width: 100%;

      &:has(.map-container) {
        display: flex;
        justify-content: flex-start;
        background-color: inherit;
      }
    }

    .map-container {
      margin: 2px;
      &.focus {
        border: solid gray;
      }
    }

    #mapPlaceholder {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightgray;
      > * {
        width: fit-content;
        flex: 0 0;
      }
    }
  }

  :has(> .map-container) {
    display: flex;
    width: fit-content;
  }

  .Showcase .map-container {
    width: 100% !important;
    height: 100% !important;
  }
}

.DumbyMap[data-layout]:not([data-layout=none]) {
  margin: 0 auto;

  height: 100vh;
  width: 100%;
  max-width: none;
  border: none;

  & ~ :not(.leader-line) {
    display: none;
    pointer-events: none;
  }
}

.DumbyMap[data-layout=side] {
  .Showcase,
  .SemanticHtml {
    flex: 50%;
    overflow-y: scroll;
    height: 100vh;
  }
}

.DumbyMap[data-layout=overlay] {
  .Showcase,
  .SemanticHtml {
    position: fixed;
    height: 100%;
    width: 100%;
  }

  .SemanticHtml {
    font-size: 12px;
    pointer-events: none;
    z-index: 1;

    > .draggable-block {
      box-sizing: content-box;
      position: absolute;
      width: fit-content;
      max-height: 50vh;
      max-width: 25vw;
      overflow: scroll;
      border: solid gray;
      padding-top: 0.5rem;
      padding-bottom: 0;
      resize: both;

      > * {
        padding-inline: 0.5rem;
      }

      &[style*="height"],
      &[style*="width"] {
        max-height: unset;
        max-width: unset;
      }

      .map-container {
        min-width: 200px;
        padding-inline: 0;
      }

      .draggable {
        display: block;
        top: 0;
        left: 0;
        position: sticky;
        background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1) 60%);
        margin-bottom: -18px;
        transform: translate(0, -16px);
        width: 100%;
        padding-inline: 0;
        padding-bottom: 2em;
        text-align: center;
        z-index: 9999;
        transition: all 0.3s ease-out;
        &:hover {
          background: #e1e1e1;
          padding-block: 1em 0.5em;
          & ~ * {
            opacity: 0.7;
            color: gray;
          }
        }
      }
    }
    > :not(.draggable-block) {
      display: none;
    }
  }
}

*:has(> nav) {
  position: absolute;
  right: 10px;
  bottom: 10px;
  /* FIXME Hide nav at proper time */
  display: none;

  padding: 0.5rem;
  min-width: 120px;
  border: 2px solid gray;
  border-radius: 0.5rem;
  background-color: white;
  z-index: 500;

  &:has(> nav:empty) {
    display: none;
  }
  ol {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}

.bold-options {
  font-weight: bold;
}