/* =========================
   AtlasHUD
========================= */

#atlasToggle {
  position: absolute;
  top: 0;
  left: 40px;

  width: 40px;
  height: 40px;

  padding: 5px;

  background-color: rgba(103,115,131,0.8);

  z-index: 2000;

  cursor: pointer;
}

.mobile #atlasToggle {
  width: 40px;
  height: 40px;
  left: 40px;
}

#atlasToggle .icon {
  position: absolute;
  top: 5px;
  left: 5px;

  width: 30px;
  height: 30px;
}

.mobile #atlasToggle .icon {
  top: 5px;
  left: 5px;
}

#atlasToggle .icon.on {
  display: none;
}

#atlasToggle.enabled .icon.on {
  display: block;
}

#atlasToggle.enabled .icon.off {
  display: none;
}

/* =========================
   AtlasHUD PANEL
========================= */

#atlasHud {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: fit-content;
  max-width: 600px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  border-radius: 10px;
  padding: 10px;
  z-index: 2500;
  display: none;
  cursor: grab;
  overflow: hidden;
}

#atlasHud.dragging {
  cursor: grabbing;
  transition: none;
}

#atlasHud.visible {
  display: block;
}

#atlasHud img {
  width: 100%;
  display: block;
  border-radius: 6px;
}

.mobile #atlasHud {
  width: 300px;
  left: 10px;
  bottom: 10px;
}

/* =========================
   Atlas markers
========================= */

.atlasMapWrapper {
  position: relative;
}

.atlasMapImage {
  width: 100%;
  display: block;
  border-radius: 6px;
}

.atlas-marker {
  position: absolute;

  width: 18px;
  height: 18px;

  margin-left: -9px;
  margin-top: -9px;

  border-radius: 50%;

  background: #ffffff;

  border: 2px solid rgba(0,0,0,0.5);

  cursor: pointer;

  transition: transform 0.2s,
              background 0.2s;
}

.atlas-marker:hover {
  transform: scale(1.2);
}

.atlas-marker.active {
  background: #4da3ff;

  transform: scale(1.35);

  box-shadow: 0 0 12px rgba(77,163,255,0.8);
}

/* =========================
   Atlas direction arrow
========================= */

.atlas-direction {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 0;
  height: 24px;

  margin-left: 0;
  margin-top: -24px;

  transform-origin: center bottom;

  pointer-events: none;
}

.atlas-direction::before {

  content: '';

  position: absolute;

  left: 50%;
  top: 0;

  margin-left: -6px;

  width: 0;
  height: 0;

  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #4da3ff;

  filter: drop-shadow(0 0 4px rgba(77,163,255,0.8));
}

.atlas-direction {
  display: none;
}

.atlas-marker.active .atlas-direction {
  display: block;
}

/* =========================
   Atlas Floor List
========================= */

#atlasFloorList {

  width: 100%;

  margin-bottom: 10px;

  background: rgba(58,68,84,0.92);

  border-radius: 8px;

  overflow: hidden;
}

/* =========================
   Titlebar
========================= */

#atlasFloorTitleBar {

  position: relative;

  height: 40px;
  padding: 0 40px;

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  display: flex;

  align-items: center;

  justify-content: center;
}

#atlasFloorTitle {

  font-size: 16px;

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  padding: 0 50px;
}

/* =========================
   Left toggle button
========================= */

#atlasFloorListToggle {

  position: absolute;

  left: 0;

  top: 0;

  width: 40px;

  height: 40px;
}

#atlasFloorListToggle .icon {

  position: absolute;

  top: 5px;

  left: 5px;

  width: 30px;

  height: 30px;
}

#atlasFloorListToggle .icon.on {
  display: none;
}

#atlasFloorListToggle.enabled .icon.on {
  display: block;
}

#atlasFloorListToggle.enabled .icon.off {
  display: none;
}

/* =========================
   Right close button
========================= */

#atlasHudClose {

  position: absolute;

  right: 0;

  top: 0;

  width: 40px;

  height: 40px;
}

#atlasHudClose .icon {

  position: absolute;

  top: 5px;

  right: 5px;

  width: 30px;

  height: 30px;
}

#atlasFloorListToggle,
#atlasHudClose {

  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

/* =========================
   Floor items
========================= */

/* =========================
   Floating Floor List
========================= */

#atlasFloorList {

  position: absolute;

  top: 50px;

  left: 0;

  width: 220px;

  transform: translateX(-100%);

  transition: transform 0.3s ease;

  z-index: 3000;
  
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

/* opened */

#atlasFloorList.enabled {
  transform: translateX(0);
}

/* =========================
   Floor items panel
========================= */

#atlasFloorItems {

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;

  overflow: hidden;
}

.atlas-floor-item {

  height: 34px;

  line-height: 34px;

  padding: 0 15px;

  cursor: pointer;

  background: transparent;

  transition: background 0.2s;
}

.atlas-floor-item:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.atlas-floor-item.current {

  background: rgba(77,163,255,0.7);
}

.no-touch #atlasToggle:hover {
  background-color: rgba(58,68,84,0.8);
}

.no-touch #atlasFloorListToggle:hover {
  background-color: rgba(58,68,84,0.8);
}

.no-touch #atlasHudClose:hover {
  background-color: rgba(58,68,84,0.8);
}