//
// Variables
//
$global-margin: 15px;
$global-muted: #a8a8a8;
$global-color: darken($global-muted, 25);
$global-background: #fff;
$global-border-radius: 3px;
$global-primary: #0177FA;

html {
  height: 100%;
}

.Map-container {
  position: relative;
}

#Map-svg {
  width: 900px;
  max-width: 100%;
  height: auto;
}

.Location-nav {
  margin-top: ($global-margin * 2);
  color: rgba(#fff, 0.75);
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  li {
    margin: $global-margin;
    cursor: default;
    user-select: none;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: rgba(#fff, 0.75);
      opacity: 0;
      transform: translateY(100%);
      transition: opacity 0.25s linear, transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    &:hover {
      
      &::after {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}