.socials
  display: flex
  align-items: center
  width: fit-content

.social
  & + &
    margin-left: 16px

@mixin socialLinkStyles
  display: block
  width: 24px
  height: 24px
  border-radius: 12px
  transition: $all

@mixin buttonHoverStyles
  background-color: transparent

  &::before
    opacity: 1

.social__link
  @include socialLinkStyles
  position: relative
  background-color: $black
  cursor: pointer
  mask-size: 100% 100%

  &::before
    @include socialLinkStyles
    content: ''
    position: absolute
    left: 0
    top: 0
    opacity: 0
    background-image: $gradient-red-to-purple
    pointer-events: none
    user-select: none

.social__link:hover
  @include buttonHoverStyles

.social__link:focus-visible
  @include buttonHoverStyles

.social__link:active
  @include buttonHoverStyles
  background-color: transparentize($black, 0.2)

  &::before
    opacity: 0.8

.social__link[href*="discord"]
  mask-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" width="148" height="148" viewBox="0 0 148 148" fill="white" color="white"><path d="M56.3903 69.4039V69.3562C50.8585 69.3562 46.3945 73.9292 46.3945 79.5497C46.3945 85.1702 50.8585 89.7435 56.3903 89.7435C61.9221 89.7435 66.3864 85.1705 66.3864 79.5974C66.3864 73.9763 61.8735 69.4039 56.3903 69.4039V69.4039Z" fill="black"/><path d="M74 0C33.131 0 0 33.131 0 74C0 114.869 33.131 148 74 148C114.869 148 148 114.869 148 74C148 33.131 114.869 0 74 0ZM101.378 113.046C101.378 113.046 97.6504 108.898 94.9683 105.241C107.887 101.583 112.758 94.2668 112.758 94.2668C99.3258 102.572 86.781 105.767 74 105.352C61.219 105.766 48.6742 102.572 35.2435 94.2668C35.2435 94.2668 40.1127 101.583 53.0331 105.241C50.3502 108.9 46.6236 113.046 46.6236 113.046C24.4611 112.558 15.8656 98.9981 15.3683 99.5833C15.3683 69.3913 30.0262 44.8073 30.0262 44.8073C43.1438 35.3945 55.3671 35.0032 57.7022 34.9543L59.1932 36.3689C42.4482 41.0514 34.349 48.3679 34.349 48.3679C48.7207 41.4264 62.2663 38.9847 74 38.8385C85.734 38.9865 99.2784 41.4264 113.651 48.3679C113.651 48.3679 105.552 41.0514 88.8071 36.3689L90.2978 34.9543C92.6332 35.0032 104.856 35.3933 117.974 44.8073C117.974 44.8073 132.631 69.3907 132.631 99.5833C132.134 98.9981 123.539 112.558 101.378 113.046V113.046Z" fill="black"/><path d="M91.6093 69.3556V69.4033C86.1261 69.4033 81.6133 73.9763 81.6133 79.5968C81.6133 85.1699 86.0778 89.7429 91.6093 89.7429C97.1408 89.7429 101.605 85.1699 101.605 79.5491C101.605 73.9283 97.1411 69.3556 91.6093 69.3556Z" fill="black"/></svg>')

.social__link[href*="twitter"]
  mask-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" width="148" height="148" viewBox="0 0 148 148" fill="white" color="white"><path d="M74 0C33.1372 0 0 33.1372 0 74C0 114.863 33.1372 148 74 148C114.863 148 148 114.863 148 74C148 33.1372 114.863 0 74 0ZM107.788 57.6973C107.82 58.4256 107.836 59.1573 107.836 59.8924C107.836 82.3365 90.7521 108.218 59.5096 108.219H59.5107H59.5096C49.9175 108.219 40.9915 105.407 33.4748 100.589C34.8038 100.746 36.1565 100.824 37.5262 100.824C45.4844 100.824 52.8081 98.1096 58.6221 93.5535C51.1866 93.4157 44.9176 88.5051 42.7542 81.7561C43.7896 81.9549 44.8544 82.0633 45.9463 82.0633C47.4966 82.0633 48.9984 81.8544 50.4256 81.4648C42.6537 79.9088 36.799 73.0402 36.799 64.8155C36.799 64.7387 36.799 64.6698 36.8013 64.5987C39.0901 65.8712 41.7074 66.6368 44.4942 66.7226C39.9335 63.6796 36.9356 58.4776 36.9356 52.5845C36.9356 49.4726 37.7769 46.5571 39.2357 44.047C47.6118 54.3246 60.1295 61.0836 74.2462 61.7939C73.9548 60.5496 73.8047 59.2533 73.8047 57.9209C73.8047 48.5444 81.4117 40.9373 90.7916 40.9373C95.6774 40.9373 100.09 43.0026 103.19 46.3042C107.059 45.5409 110.693 44.1272 113.975 42.1817C112.705 46.1461 110.013 49.4726 106.506 51.5762C109.942 51.1652 113.217 50.254 116.26 48.9012C113.987 52.3079 111.104 55.3001 107.788 57.6973V57.6973Z" fill="black"/></svg>')

.social__link[href*="medium"]
  mask-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" width="148" height="148" viewBox="0 0 148 148" fill="white" color="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M148 74C148 114.869 114.869 148 74 148C33.1309 148 0 114.869 0 74C0 33.1309 33.1309 0 74 0C114.869 0 148 33.1309 148 74ZM49.4898 105.93C67.0044 105.93 81.2026 91.6346 81.2026 74C81.2026 56.3655 67.0044 42.0699 49.4901 42.0699C31.9755 42.0699 17.7773 56.3655 17.7773 74C17.7773 91.6346 31.9755 105.93 49.4898 105.93ZM100.142 104.057C108.899 104.057 115.998 90.6 115.998 74.0001C115.998 57.4001 108.899 43.9433 100.142 43.9433C91.3849 43.9433 84.2858 57.4001 84.2858 74.0001C84.2858 90.6 91.3849 104.057 100.142 104.057ZM130.223 74C130.223 88.8728 127.726 100.93 124.646 100.93C121.566 100.93 119.07 88.8728 119.07 74C119.07 59.1271 121.566 47.0703 124.646 47.0703C127.726 47.0703 130.223 59.1271 130.223 74Z" fill="black"/></svg>')

.social__link[href*="github"]
  mask-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" width="148" height="148" viewBox="0 0 148 148" fill="white" color="white"><path d="M73.9908 0C33.1335 0 0 33.9702 0 75.8755C0 109.392 21.201 137.827 50.616 147.868C54.316 148.567 55.6665 146.225 55.6665 144.213C55.6665 142.408 55.6017 137.638 55.5647 131.308C34.9835 135.89 30.636 121.134 30.636 121.134C27.2783 112.368 22.422 110.035 22.422 110.035C15.6973 105.33 22.9215 105.425 22.9215 105.425C30.3492 105.963 34.2528 113.246 34.2528 113.246C40.8573 124.837 51.578 121.493 55.796 119.547C56.462 114.645 58.3767 111.3 60.495 109.402C44.067 107.484 26.788 100.975 26.788 71.9079C26.788 63.6232 29.674 56.8499 34.41 51.5409C33.6423 49.6233 31.1078 41.9053 35.1315 31.4668C35.1315 31.4668 41.3475 29.4263 55.4815 39.2414C61.383 37.5599 67.71 36.7191 74.0093 36.6908C80.29 36.7286 86.6262 37.5599 92.537 39.2508C106.662 29.4358 112.868 31.4762 112.868 31.4762C116.901 41.9242 114.367 49.6327 113.608 51.5504C118.354 56.8594 121.212 63.6326 121.212 71.9174C121.212 101.06 103.914 107.475 87.431 109.354C90.0857 111.697 92.4537 116.326 92.4537 123.402C92.4537 133.547 92.3612 141.728 92.3612 144.213C92.3612 146.244 93.6932 148.605 97.4487 147.859C126.817 137.808 148 109.383 148 75.8755C148 33.9702 114.867 0 73.9908 0Z" fill="black"/></svg>')

.social__text
  font-size: 0px
  line-height: 0px
  color: transparent
  visibility: hidden