// Dependencies.
@import 'init';

// Social
//
// The social of page
//
// Markup: social.hbs
//
// Style guide: components.social

.social,
%social {
  &__title {
    @include font-size(l);
  }

  &__list {
    display: inline-block;
    text-indent: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  &__item {
    @include margin(0 .75 .25 0);
    float: left;
    list-style: none;

    a {
      @include border-radius(100%);
      width: 48px;
      height: 48px;
      text-align: center;
      display: block;

      &:hover {
        // Add your styles.
      }

      span {
        font-size: 24px;
        line-height: 50px;
      }
    }
  }

  &__text {
    @include visually-hidden;
  }
}

// Join the dots for the linkicon generated markup.
.linkicon--social ul {
  @extend %social__list;

  li {
    @extend %social__item;
  }

  .linkicon__text {
    @extend %social__text;
  }
}
