@require '../../../style/var.styl';
@require '../../../style/media.styl';

.igo-mini-basemap-container {
  width: "calc(%s * 2)" % $igo-icon-size;
  height: "calc(%s * 2)" % $igo-icon-size;
  background-color: rgba(255,255,255,0.01);
  border: 2px solid white;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3)
  cursor: pointer;
  margin-top: 5px;

  &:hover {
    .igo-mini-basemap-title {
      text-shadow: 0 0 5px white;
    }
  }
}

.igo-mini-basemap-container > div {
  width: 100%;
  height: 100%;
}

.igo-mini-basemap-title {
  position: relative;
  top: -76px;
  height: 76px;
  width: 76px;
  text-align: center;
  vertical-align: bottom;
  color: white;
  text-shadow: 0 0 5px black;
  white-space: normal;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}