@import "../../../sass/webpack_deps";

.map-static {
  position: relative;

  @media (max-width: $max-960) {
    background-color: $color-gray;
    height: .1rem;
    margin: 0 ($gutter * .5);
    max-width: $max-width;
  }

  &__attribution {
    background-color: rgba($color-black, .2);
    bottom: 0;
    color: $color-white;
    font-size: 1.2rem;
    line-height: 1;
    padding: .5rem .5rem .3rem;
    position: absolute;
    right: 0;

    @media (max-width: $max-960) {
      display: none;
    }

    a {
      color: inherit;
    }

    a:hover,
    a:active,
    a:focus {
      text-decoration: underline;
    }
  }

  &__container {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 0;
    left: 0;
    padding: ($gutter * 13.2) 0;
    position: relative;
    top: 0;
    width: 100%;

    @media (max-width: $max-960) {
      display: none;
    }
  }

  &__button {
    $btn-width: 268px;
    @include button();
    bottom: 38px;
    letter-spacing: .05rem;
    margin-left: calc(50% - #{$btn-width / 2});
    padding-bottom: 1.8rem;
    position: absolute;
    width: $btn-width;

    .icon--open {
      content: "";
      display: inline-block;
      height: 18px;
      margin-left: 2.5rem;
      margin-right: .8rem;
      margin-top: -.5rem;
      position: relative;
      vertical-align: sub;
      width: 18px;
    }
  }

  &__button-text {
    font-size: 1.25rem;
    font-weight: bold;
    margin-right: 2.5rem;
    text-transform: uppercase;
  }
}