the-obelisk/sass/_map.scss

.mapRow {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row;
  justify-content: center;
  margin-top: 1ex;
  z-index: 1;
}

.mapRoom {
  z-index: 2;
  opacity: 0.5;
  max-width: 4.5ex;
  color: white;
  flex: 1 0 auto;
  margin-left: 1ex;
  height:auto;

  &:last-child {
    margin-right: 1ex;
  }
  position: relative;

  &.linked:hover {
    opacity: 1;
    cursor: pointer;
  }

  &.current {
    opacity: 1;
    &:hover {
      //opacity: 1;
      cursor: auto;
    }
    &::after {
      display: block;
      position: absolute;
      content: '';
      //top: 15%;
      //left: 15%;
      //height: 70%;
      //width: 70%;
      //background-image: inline-image("PlayerIcon.png");
      //background-size: contain;
      border: solid 2px #000;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
    }
  }


  &.unknown {
    opacity: 0;
    pointer-events: none;
  }

  &::before {
    content:'';
    float:left;
    padding-top:100%;
  }
}

.mapRoomConnection {
  pointer-events: none;
  display: block;
  background-color: black;
  position: absolute;
  z-index: 3;
}

.mapRoomConnectionEast {
  @extend .mapRoomConnection;
  width: 1ex;
  height: 0.6ex;
  right: -1ex;
  top: 50%;
  margin-top: -0.3ex;
}

.mapRoomConnectionWest {
  @extend .mapRoomConnection;
  width: 1ex;
  height: 0.6ex;
  left: -1ex;
  top: 50%;
  margin-top: -0.3ex;
}

.mapRoomConnectionNorth {
  @extend .mapRoomConnection;
  width: 0.6ex;
  height: 1ex;
  left: 50%;
  top: -1ex;
  margin-left: -0.3ex;
}

.mapRoomConnectionSouth {
  @extend .mapRoomConnection;
  width: 0.6ex;
  height: 1ex;
  left: 50%;
  bottom: -1ex;
  margin-left: -0.3ex;
}

.mapRoomName {
  display: none;
  position: absolute;
  text-align: center;
  bottom: 105%;
  right: 5%;
  padding:5%;
  white-space: nowrap;
  margin: auto;
  background-color: white;
  color: #000;
  font-weight: bold;
  border: solid 2px #000;
  z-index: 4;
  pointer-events: none;
}

.mapRoom.linked:hover > .mapRoomName {
  display: block;
}

.tomato {
  background: tomato;
}

.bloo {
  background: blue;
}

.blocked {
  background-color: black;

  &.unknown {
    opacity: 1;
  }
}