css {
  .social {
    display: block;
    position: relative;
    padding-bottom: 100%;
    background-color: white;
    border-radius: 15%;
    box-sizing: border-box;
    transition: transform 0.2s;
    z-index: 1;
    overflow: hidden;
  }
  .social-instagram {
    // Approximated based on https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg
    background-image: linear-gradient(168.6776deg, #3771c8, transparent 40%),
      radial-gradient(
        100% 100% at 26.3651908% 107.693077%,
        #fd5 10%,
        #ff543e 50%,
        #c837ab 100%
      );
  }
  .social-thick .ball {
    border-width: 10px;
  }
  .social-jsperf {
    background-image: linear-gradient(#6ca5dd, #1a6ab9);
  }
  .social-piskel {
    background-image: linear-gradient(
        90deg,
        transparent 0 33.3%,
        rgba(0, 0, 0, 0.25) 33.3% 66.7%,
        rgba(0, 0, 0, 0.5) 66.7% 100%
      ),
      linear-gradient(
        #2a6fff 0%,
        #2a6fff 33.3%,
        #00ee00 33.3%,
        #00ee00 66.7%,
        #ff0000 66.7%,
        #ff0000 100%
      );
  }
  .social-devpost {
    background-image: linear-gradient(
      90deg,
      #3acce6 20%,
      transparent 20%,
      transparent 80%,
      #3acce6 80%
    );
  }
  .social-gmaps::before,
  .social-gmaps::after {
    content: '';
    display: block;
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    // 100% * sqrt(2) / 3, a third of the diagonal
    width: calc(100% * 1.4142135623730951 / 3);
    z-index: -1;
    transform: rotate(45deg);
  }
  .social-gmaps::before {
    background-image: linear-gradient(#1b73e8 50%, #ea4336 50%);
    transform: rotate(45deg) translateX(-100%);
  }
  .social-gmaps::after {
    background-image: linear-gradient(#4285f4 50%, #fabd05 50%);
  }
  .social-tiktok .ball {
    box-shadow: 3px 0 0 #fe2b54, -3px 0 0 #22f5ed, inset 3px 0 0 #fe2b54,
      inset -3px 0 0 #22f5ed;
  }
  .social-leetcode .ball {
    border-color: #ffa115;
    border-left-color: black;
    border-right-color: white;
  }
  .social-leetcode .ball::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 0 2.5px;
    height: 5px;
    background-color: #b3b3b3;
    border-radius: 5px;
    margin: -2.5px;
    // box-shadow: 0 0 0 3px white;
  }
  .social-steam {
    background-image: linear-gradient(
      to bottom,
      #111d2e 0%,
      #051839 21.2%,
      #0a1b48 40.7%,
      #132e62 58.1%,
      #144b7e 73.8%,
      #136497 87.3%,
      #1387b8 100%
    );
  }
  .social-acm {
    background-image: conic-gradient(
      from 135deg,
      #ff6d6d 0%,
      #fda44e 17.1875%,
      #ffdc24 34.8958%,
      #38cf6b 52.6042%,
      #62b0ff 71.3542%,
      #816dff 87.5%,
      #ff6d6d 100%
    );
  }
  .social-suno {
    background-image: radial-gradient(
      100% 100% at 75% 75%,
      #d79aeb,
      #f47e47,
      #801d70
    );
  }
  .social-figma .ball {
    border-top-color: #ff7237;
    border-left-color: #874fff;
    border-bottom-color: #24cb71;
  }
}
@media (hover: hover) and (min-width: 1000px) {
  a.social {
    transform: scale(1.1);
  }
}
@media (hover: hover) {
  a.username:hover .social {
    transform: scale(1.1);
  }
}
$bg: '';
@if map.get($social, 'bg') {
  $bg: "background-color:#{map.get($social, 'bg')}";
}
$ball-type: 'social';
@if $extra-class {
  $ball-type: '#{$ball-type} #{$extra-class}';
}
@if map.get($social, 'type') {
  $ball-type: "#{$ball-type} social-#{map.get($social, 'type')}";
}
$link: '';
@if not $type {
  $type: 'span';
}
@if $type == 'a' {
  $link: map.get($social, 'link');
}
$name: map.get($social, 'name');
#{$type}.#{$ball-type}[href='#{$link}'][style='#{$bg}'][title='#{$name}'] {
  css {
    .ball {
      position: absolute;
      width: 50%;
      height: 50%;
      margin: 25%;
      border-radius: 50%;
      background-color: white;
      border: 5px solid transparent;
      box-sizing: border-box;
      transition: all 0.2s;
    }
    .border-ball {
      border-color: white;
      background-color: transparent;
    }
  }
  @media (hover: hover) {
    a.social:hover .ball,
    a.username:hover .ball {
      transform: scale(1.2);
    }
  }
  $class: 'ball';
  $border: '';
  @if map.get($social, 'border') {
    $class: 'ball border-ball';
    $border: "border-color:#{map.get($social, 'border')};";
  }
  $ball: '';
  @if map.get($social, 'ball') {
    $ball: "background-color:#{map.get($social, 'ball')}";
    @if map.get($social, 'ball') == 'border' {
      $ball: '';
      $class: 'ball border-ball';
    }
  }
  span.#{$class}[style='#{$border}#{$ball}'] {
  }

  css {
    .social-name {
      font-size: 0;
      position: absolute;
    }
  }
  span.social-name {
    content: '#{$name}';
  }
}