@import '../variables/colors';
@import '../variables/sizes';

// Favourite map displayed in subheader on user's profile page.
// Initially expected to have the .is-pre-loading, transition to .is-loading (thus remove the .is-pre-loading), and
// finally remove the .is-loading
//
// --------------------------------------------------------------------------------------------------------------------

$height: 280px;
$heightTall: 450px;

.FavMap {
  position: relative;
  height: $height / 2;
  overflow: hidden;
  background: #333 image-url('layout/noise.png') repeat 0 0;
}

.FavMap::before {
  content: '';
  position: absolute;
  z-index: 9995;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  transition: all 100ms ease-in-out;
  background-image: linear-gradient(to bottom, rgba(#000, 0), rgba(#000, 0.1));
}

.FavMap:not(.is-pre-loading):not(.is-loading)::before {
  height: 20px;
}

.FavMap-spinner {
  display: none;
  position: absolute;
  top: ($height / 4) - $sSpinner-default;
  left: 50%;
  margin-left: -#{$sSpinner-default / 2};
}

.FavMap.is-pre-loading .FavMap-spinner,
.FavMap.is-loading .FavMap-spinner {
  display: block;
}

.FavMap.FavMap--tall {
  height: $heightTall / 2;
}

.FavMap.FavMap--highShadow::before {
  height: 180px;
  background-image: linear-gradient(to bottom, rgba(#000, 0), rgba(#000, 0.5));
  pointer-events: none;
}

.FavMap.FavMap--highShadow:not(.is-pre-loading):not(.is-loading)::before {
  height: 150px;
}

.FavMapTitle {
  position: absolute;
  z-index: 10000;
  bottom: 45px;
  width: 100%;
  transition: opacity 150ms ease-in-out;
  opacity: 1;
  line-height: normal;
}

.FavMapTitle.is-hidden {
  opacity: 0;
}

.FavMapTitle-inner {
  box-sizing: border-box;
  width: 940px;
  margin: auto;
}

.FavMapTitle-sectionTitle,
.FavMapTitle-mapTitle {
  color: #FFF;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(#000, 0.5);
}

.FavMapTitle-sectionTitle {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: lighter;
  text-transform: uppercase;
}

.FavMapTitle-mapTitle {
  margin: 0;
  font-size: 48px;
  font-weight: normal;
}

.FavMapTitle-mapTitleLink {
  color: #FFF;

  &:hover {
    color: #FFF;
    text-decoration: none;
  }
}

@media (min-width: $sMedia-tablet) {
  .FavMap {
    height: $height;
  }

  .FavMap-spinner {
    top: ($height / 2) - $sSpinner-default;
  }

  .FavMap.FavMap--tall {
    height: $heightTall;
  }

  .FavMap--tall .FavMap-spinner {
    top: ($heightTall / 2) - $sSpinner-default;
  }
}

@media only screen and (max-width: 320px) {
  $height: 280px;

  .FavMap {
    height: $height;
  }

  .FavMap-spinner {
    top: ($height / 2) - $sSpinner-default;
  }

  .FavMap.FavMap--tall {
    height: $heightTall;
  }

  .FavMap--tall .FavMap-spinner {
    top: ($heightTall / 2) - $sSpinner-default;
  }
}

@media only screen and (min-width: 320px) and (max-width: 955px) {
  .FavMap .FavMapTitle-inner {
    width: 100%;
    padding: 0 20px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 760px) {
  $height: 320px;

  .FavMap {
    height: $height;
  }

  .FavMap-spinner {
    top: ($height / 2) - $sSpinner-default;
  }

  .FavMap.FavMap--tall {
    height: $height;
  }

  .FavMap--tall .FavMap-spinner {
    top: ($height / 2) - $sSpinner-default;
  }
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  $height: 300px;

  .FavMap {
    height: $height;
  }

  .FavMap-spinner {
    top: ($height / 2) - $sSpinner-default;
  }

  .FavMap.FavMap--tall {
    height: $height;
  }

  .FavMap--tall .FavMap-spinner {
    top: ($height / 2) - $sSpinner-default;
  }
}