/*------------------------------------*\
  $SHARE
\*------------------------------------*/

@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

.btn--share {
  background-color: transparent;

  svg {
    width: 20px;
    height: 17px;
    fill: $brand;
  }
}

.share-box {
  @include position(fixed, 50%, false, false, 50%);
  display: none;
  padding: 60px 60px 80px;
  width: 660px;
  max-width: 95%;

  transform: translate(-50%, -50%);
  z-index: 101;

  background-color: #bd2b2e;
  box-shadow: 0 0 10px rgba(#000, 0.2);

  animation-name: fade-in;
  animation-duration: .4s;


  /**
   * 1. Forcing !important to override styles applied using JS
   */
  .ie9 & {
    position: fixed !important; /* 1 */
  }

  &.is-visible {
    display: block;
  }

  &__close {
    @include position(absolute, 30px, 30px, false, false);

    @include mq(mq960) {
      top: 60px;
      right: 60px;
    }

    svg {
      width: 13px;
      height: 12px;
      fill: #fff;
    }
  }

  &__title {
    margin-bottom: 40px;
    text-align: center;

    svg {
      margin-bottom: 20px;
      width: 26px;
      height: 28px;
      fill: #fff;
    }

    h3 {
      color: #fff;
      font: {
        family: $nav-font;
        size: font-size(22);
        weight: 500;
      }
    }
  }

  &__links {
    margin: 0;
    text-align: center;

    li {
      display: inline-block;
      list-style: none;
      margin: {
        right: 35px;
      }
      position: relative;

      &:last-child {
        margin-right: 0;
      }
    }

    span {
      display: none;
      position: absolute;
      top: 67px;
      left: -10px;
      right: -10px;
      width: calc(100% + 20px);
      font: {
        family: $body-font;
        weight: 700;
        size: font-size(13);
      }
      line-height: 1;
      color: #fff;
      text-transform: uppercase;

      @include mq(mq768) {
        display: block;
      }
    }
  }
}

.share-link {
  width: 60px;
  height: 60px; 
  border: 3px solid #fff;
  border-radius: 60px;
  position: relative;

  svg {
    width: 20px;
    height: 20px;
    top: 17px;
    left: 17px;
    position: absolute;
    fill: #fff;
  }

  @include states {
    background: #fff;

    svg {
      fill: #bd2b2e;
    }
  }
}