/*------------------------------------*\
  $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 20px;
  width: 660px;
  max-width: 95%;

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

  background-color: $dark-grey;
  border-radius: 10px;
  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, 20px, 20px, false, false);

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

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

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

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

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

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

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

.share-link {
  svg {
    fill: rgba(#fff, 0.5);
  }

  @include states {
    svg {
      fill: #fff;
    }
  }

  &--twitter svg {
    width: 24px;
    height: 24px;
  }

  &--facebook svg {
    width: 24px;
    height: 24px;
  }

  &--linkedin svg {
    width: 24px;
    height: 24px;
  }

  &--google svg {
    width: 24px;
    height: 24px;
  }

  &--pinterest svg {
    width: 24px;
    height: 24px;
  }
}