<template>
  <div class="socials-icons">
    <a href="https://www.facebook.com/ceska.piratska.strana/" rel="noopener" target="_blank">
      <svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
        <title>Facebook</title>
        <path d="M1.61 3.092v2.199H0v2.688h1.61v7.988h3.31V7.979h2.22s.207-1.289.308-2.698H4.932V3.443c0-.275.36-.644.717-.644H7.45V0h-2.45C1.529 0 1.61 2.69 1.61 3.092z" :fill="color" fill-rule="nonzero"/>
      </svg>
    </a>
    <a href="https://www.instagram.com/pirati.cz/" rel="noopener" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 169.063 169.063">
        <title>Instagram</title>
        <g :fill="color">
          <path d="M122.406 0H46.654C20.929 0 0 20.93 0 46.655v75.752c0 25.726 20.929 46.655 46.654 46.655h75.752c25.727 0 46.656-20.93 46.656-46.655V46.655C169.063 20.93 148.133 0 122.406 0zm31.657 122.407c0 17.455-14.201 31.655-31.656 31.655H46.654C29.2 154.063 15 139.862 15 122.407V46.655C15 29.201 29.2 15 46.654 15h75.752c17.455 0 31.656 14.201 31.656 31.655v75.752z"/>
          <path d="M84.531 40.97c-24.021 0-43.563 19.542-43.563 43.563 0 24.02 19.542 43.561 43.563 43.561s43.563-19.541 43.563-43.561c0-24.021-19.542-43.563-43.563-43.563zm0 72.123c-15.749 0-28.563-12.812-28.563-28.561 0-15.75 12.813-28.563 28.563-28.563s28.563 12.813 28.563 28.563c0 15.749-12.814 28.561-28.563 28.561zM129.921 28.251c-2.89 0-5.729 1.17-7.77 3.22a11.053 11.053 0 0 0-3.23 7.78c0 2.891 1.18 5.73 3.23 7.78 2.04 2.04 4.88 3.22 7.77 3.22 2.9 0 5.73-1.18 7.78-3.22 2.05-2.05 3.22-4.89 3.22-7.78 0-2.9-1.17-5.74-3.22-7.78-2.04-2.05-4.88-3.22-7.78-3.22z"/>
        </g>
      </svg>
    </a>
    <a href="https://www.twitter.com/PiratskaStrana" rel="noopener" target="_blank">
      <svg width="19" height="15" viewBox="0 0 19 15" xmlns="http://www.w3.org/2000/svg">
        <title>Twitter</title>
        <path d="M18.434 1.772c-.679.3-1.407.504-2.172.595a3.797 3.797 0 0 0 1.663-2.09 7.623 7.623 0 0 1-2.403.918 3.782 3.782 0 0 0-6.444 3.448A10.736 10.736 0 0 1 1.284.69a3.753 3.753 0 0 0-.511 1.9A3.78 3.78 0 0 0 2.455 5.74a3.782 3.782 0 0 1-1.713-.475v.047A3.785 3.785 0 0 0 3.775 9.02a3.83 3.83 0 0 1-.997.133 3.63 3.63 0 0 1-.712-.07 3.783 3.783 0 0 0 3.532 2.626 7.587 7.587 0 0 1-4.696 1.616c-.305 0-.606-.018-.902-.052a10.689 10.689 0 0 0 5.796 1.701c6.957 0 10.759-5.761 10.759-10.758l-.013-.49a7.551 7.551 0 0 0 1.892-1.953z" :fill="color" fill-rule="nonzero"/>
      </svg>
    </a>
    <a href="https://www.youtube.com/user/CeskaPiratskaStrana" rel="noopener" target="_blank">
      <svg width="20" height="14" viewBox="0 0 20 14" xmlns="http://www.w3.org/2000/svg">
        <title>YouTube</title>
        <path d="M7.988 9.586V3.974c1.993.938 3.536 1.843 5.36 2.82-1.505.834-3.367 1.77-5.36 2.792m11.103-8.403c-.344-.453-.93-.805-1.553-.922-1.833-.348-13.267-.349-15.099 0-.5.094-.945.32-1.328.673C-.5 2.429.005 10.452.393 11.75c.164.562.375.968.64 1.235.343.352.812.594 1.351.703 1.51.312 9.284.486 15.122.047a2.62 2.62 0 0 0 1.39-.712c1.49-1.49 1.388-9.962.195-11.841" :fill="color" fill-rule="evenodd"/>
      </svg>
    </a>
  </div>
</template>

<script>
export default {
  props: {
    color: String,
  },
};
</script>

<style lang="scss" scoped>
  .socials-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;

    a {
      display: block;

      margin-right: 16px;

      @media (max-width: 590px) {
        margin-right: 20px;
      }

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

      svg {
        @include baseTransition;

        height: 18px;
        width: 21px;
      }

      &:hover {
        svg {
          transform: scale(1.15);
        }
      }
    }
  }
</style>