:host {
  max-width: 100%;
  overflow: hidden;
}

.map {
  display: grid;
  margin: 4px;
  margin-top: 16px;
  max-width: 100%;

  &.legend {
    position: relative;

    &:before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('../../../assets/images/legend-mode/bg.jpg');
      background-size: contain;
      box-shadow: 0 0 4px 4px var(--bg-color) inset;
    }
  }
}

.map-container {
  overflow: auto;
}

.map-button-bar {
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap-reverse;
  }

  .right {
    //margin-left: auto;
    display: flex;
    gap: .5rem;
  }
}

.emptyMapTile {
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  user-select: none;
  box-sizing: border-box;

  &.legend {
    aspect-ratio: 55 / 47;
  }
}

@media (max-width: 800px) {
  .map {
    overflow: auto;

    &.legend:before {
      min-width: calc(5rem * 18);
    }
  }
}
