/* minimap general */

#minimap {

  position: absolute;

  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "image";

  bottom: calc(-1 * var(--outside-offset));
  left: var(--titleBar-leftAndRight);
  margin-bottom: var(--titleBar-height);

  width: 25%;
  min-width: 400px;

  opacity: 0.0;
  border-radius: var(--border-radius);
  border: 2px solid var(--background-rgba);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;

  -webkit-transition: opacity 0.3s ease-in-out,
    margin-bottom 0.0s 0.3s;
  transition: opacity 0.3s ease-in-out,
    margin-bottom 0.0s 0.3s;

  z-index: 2;

}



#minimap.enabled {
  margin-bottom: calc(var(--outside-offset) + var(--titleBar-bottom) + var(--titleBar-height));
  opacity: 1.0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}







#minimap .minimap-image {

  grid-area: image;

  width: 100%;
  height: auto;

  border-radius: var(--border-radius);

  z-index: 0;

}



/* minimap toggle */

#minimapToggle {

  grid-area: minimapToggle;

  display: block;

  width: var(--titleBar-height);
  height: var(--titleBar-height);

}



#minimapToggle .icon {
  position: absolute;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: var(--icon-margin);
}



#minimapToggle.enabled .icon {
  fill: var(--hover-rgb);
}



/* minimap scene icons */

#minimap .minimapIcons {

  grid-area: image;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: inherit;

}

#minimap .minimapScenePosition {
  position: absolute;
}

#minimap .minimapScenePosition .icon {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  left: -15px;
  top: -15px;
  opacity: 0.8;
  -webkit-transition: -webkit-transform 0.3s,
    -ms-transform 0.3s,
    transform 0.3s,
    opacity 0.3s,
    fill 0.3s;
  transition: -webkit-transform 0.3s,
    -ms-transform 0.3s,
    transform 0.3s,
    opacity 0.3s,
    fill 0.3s;
  z-index: 5;
}

#minimap .minimapScenePosition a {
  outline: none;
}

#minimap .minimapScenePosition .frustum.enabled~a .icon {
  display: block;
  fill: var(--hover-rgb);
}

#minimap .minimapScenePosition .icon:hover,
#minimap .minimapScenePosition.hover .icon {
  fill: var(--hover-rgb);
  opacity: 1;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

#minimap .frustum {
  position: absolute;
  display: none;
  pointer-events: none;
  left: -75px;
  top: -75px;
  width: 150px;
  height: 150px;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}

#minimap .frustum.enabled {
  display: block;
}

#minimap .frustum path {
  fill: var(--hover-rgba);
  stroke: var(--hover-rgb);
  stroke-width: 2px;
}

/* MINIMAP TOOLSTIPS */

#minimap .minimap-tooltip {
  position: absolute;
  font-weight: 300;
  left: 50%;
  margin-right: -50%;
  max-width: 300px;
  padding: 8px 10px;
  border-radius: 5px;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
  background-color: var(--background-rgb);
  background-color: var(--background-rgba);
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-transition: -ms-transform 0.2s,
    -webkit-transform 0.2s,
    transform 0.2s,
    opacity 0.2s;
  transition: -ms-transform 0.2s,
    -webkit-transform 0.2s,
    transform 0.2s,
    opacity 0.2s;
  pointer-events: none;
  z-index: 10;
}

#minimap .minimapScenePosition.hover .minimap-tooltip {
  opacity: 1.0;
  -ms-transform: translate(-50%, 15px);
  -webkit-transform: translate(-50%, 15px);
  transform: translate(-50%, 15px);
}



/**  Google attribution  */
#minimap #google-attribution {

  grid-area: image;

  position: absolute;

  width: 100%;
  bottom: 0;

  padding: 10px;

  z-index: 6;

}



#minimap #google-attribution p {

  font-size: 1em;
  font-size: min(max(0.5em, 0.5vw), 1em);
  white-space: nowrap;
  text-align: center;

  color: var(--background-rgb);

}



/* TOOLBAR */

#minimap-toolbar {

  position: absolute;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;

  justify-items: center;

  width: var(--titleBar-height);
  height: auto;
  right: 0;
  top: 0;

  border-radius: var(--border-radius);

  background-color: var(--background-rgb);
  background-color: var(--background-rgba);

  z-index: 5;

}



/* minimap close icon */

#minimap #minimapCloseIcon {

  cursor: pointer;

  z-index: 5;

}

#minimap #minimapCloseIcon .icon {

  width: var(--icon-size);
  height: var(--icon-size);
  margin: var(--icon-margin);

}



#minimap #minimap-toolbar #zoom-in .icon,
#minimap #minimap-toolbar #zoom-out .icon {

  width: var(--titleBar-height);
  height: var(--titleBar-height);
  margin: var(--icon-margin);

}



/* minimap north arrow */

#minimap .northElement {

  width: var(--titleBar-height);
  height: var(--titleBar-height);
  margin: var(--icon-margin);

}


#minimap .northIcon {

  width: var(--titleBar-height);
  max-width: var(--titleBar-height);
  height: var(--titleBar-height);

  padding: 2px;

  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(78deg);
  -ms-transform: rotate(78deg);
  transform: rotate(78deg);

}


#minimap .northIcon:hover,
#minimap .northIcon:focus,
#minimap .northIcon:active {

  fill: var(--icon-disabled-rgb);
  cursor: unset;

}