// sass-lint:disable shorthand-values
@import 'variables';


.icon-container {
  font-size: $share-button-font-size;
  list-style: none;
  margin: 1rem auto 0 auto;
  text-align: center;


  li {
    display: inline-flex;

    a {
      text-decoration: none;
    }
  }

  @mixin some-btn {
    border-radius: 8px;
    border-width: 0;
    box-shadow: 1px 1px 14px 2px darken($bg, 6.5%);
    height: 32px;
    line-height: 32px;
    margin: auto;
    padding: 8px;
    width: 32px;
  }

  .fa-facebook-f {
    @include some-btn;

    &:hover {
      background: $color-fb-logo;
      color: $white;
    }
  }

  .fa-twitter {
    @include some-btn;

    &:hover {
      background: $color-twitter-logo;
      color: $white;
    }
  }

  .fa-pinterest {
    @include some-btn;

    &:hover {
      background: $color-pinterest-logo;
      color: $white;
    }
  }

  .fa-linkedin {
    @include some-btn;

    &:hover {
      background: $color-linkedin-logo;
      color: $white;
    }
  }

  .fa-reddit-alien {
    @include some-btn;

    &:hover {
      background: $color-reddit-logo;
      color: $white;
    }
  }

  .fa-get-pocket {
    @include some-btn;

    &:hover {
      background: $color-pocket-logo;
      color: $white;
    }
  }

  .fa-envelope {
    @include some-btn;

    &:hover {
      background: $color-mail-logo;
      color: $white;
    }
  }
}
