<script lang="ts">
  let text = '';
</script>

<div class="social">
  <div class="social__items">
    <div class="social__item social__item_twitter">
      <a href="https://twitter.com/Quadcode_SaaS" target="_blank" aria-label="We are on the social network twitter"
        >{text}</a
      >
    </div>
    <div class="social__item social__item_facebook">
      <a
        href="https://www.facebook.com/Quadcode-108315268769590"
        target="_blank"
        aria-label="We are on the social network facebook">{text}</a
      >
    </div>
    <div class="social__item social__item_linkedin">
      <a
        href="https://www.linkedin.com/company/quadcode-saas/"
        target="_blank"
        aria-label="We are on the social network linkedin">{text}</a
      >
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/media';

  .social {
    &__items {
      display: flex;
      align-items: center;
    }

    &__item {
      width: 60px;
      min-width: 60px;
      height: 60px;
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: 20px;

      @include breakpoint-down('deskM') {
        width: 52px;
        min-width: 52px;
        height: 52px;
        margin-right: 24px;
      }

      a {
        width: 100%;
        height: 100%;
        display: block;
      }

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

      &_twitter {
        background-image: url('../../assets/images/social/twitter.svg');
      }

      &_facebook {
        background-image: url('../../assets/images/social/facebook.svg');
      }

      &_linkedin {
        background-image: url('../../assets/images/social/linkedin.svg');
      }
    }
  }
</style>