@use "../breakpoints";

social-link-pills {
  display: inline-block;
  background-color: #f6f6f3;
  border-radius: 3rem;
  padding: .75rem 1rem .75rem 1rem;

  @include breakpoints.mq-lg {
    margin-bottom: .5rem;
  }

  .social-link {
    svg {
      width: 2rem;
      height: 2rem;
    }

    @include breakpoints.mq-lg {
      margin-left: 1rem;
    }

    @include breakpoints.mq-lg("above") {
      margin-bottom: 1rem;
      display: block;
    }

    &:first-of-type {
      margin-left: 0;
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  @include breakpoints.mq-lg("above") {
    position: absolute;
    top: 0.5em;
    left: -4.5rem;
    padding: 1rem .75rem .75rem 0.75rem;
  }
}