// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-comments: $dark-gray;
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-google-plus: #dd4b39;

.wide-article-link {
  background-color: $white;
  padding: 1rem 1rem 0.5rem;
  border: 1px solid $medium-gray;
  margin-bottom: 1rem;

  .article-title {
    a {
      color: $black;

      &:hover,
      &:focus {
        color: $primary-color;
      }
    }
  }

  .article-elipsis {
    .read-more {
      font-weight: bold;
    }
  }

  .article-title,
  .article-author,
  .article-elipsis {
    margin-bottom: 0.25rem;
  }

  .article-social {
    margin-top: 0.75rem;

    .social {
      margin-right: 0.25rem;

      &.comments {
        @include button-style($social-comments, auto, $white);
      }
      &.facebook {
        @include button-style($social-brand-facebook, auto, $white);
      }
      &.twitter {
        @include button-style($social-brand-twitter, auto, $white);
      }
      &.linkedin {
        @include button-style($social-brand-linkedin, auto, $white);
      }
      &.google-plus {
        @include button-style($social-brand-google-plus, auto, $white);
      }

      > .fa {
        color: $white;

        &.fa-comments-o {
          margin-right: 0.25rem;
        }
      }
    }
  }
}
