.social-button {
  --_facebook: #1877f2;
  --_facebook-fade: #1877f2;
  --_instagram: #c13584;
  --_instagram-fade: #c13584;
  --_youtube: #ff0000;
  --_youtube-fade: #ff0000;
  --_discord: #5662f6;
  --_discord-fade: #5662f6;

  --_bg-color: var(--clr-surface-04);
  --_text-color: var(--clr-onSurface-04--strong);

  /* Layout */
  display: flex;
  width: var(--size-18, 4rem);
  height: var(--size-18, 4rem);
  min-width: var(--size-18, 4rem);
  padding: var(--spacing-2, 0.5rem);
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  /* Style */
  border-radius: var(--radius-3, 0.25rem);
  background: var(--_bg-color);

  /* Interaction  */
  cursor: pointer;
  transition: background 500ms ease-out, border 500ms ease-out;
}

.social-button path {
  /* Style */
  fill: var(--_text-color);

  /* Interaction */
  transition: fill var(--ts-normal), stroke var(--ts-quick);
}

.social-button svg {
  transition: transform var(--ts-quick);
}

@media (hover) {
  .social-button path:hover {
    fill: var(--clr-white);
  }

  .social-button.facebook:hover {
    --_bg-color: var(--_facebook);
  }
  .social-button.youtube:hover {
    --_bg-color: var(--_youtube);
  }
  .social-button.instagram:hover {
    --_bg-color: var(--_instagram);
  }
  .social-button.discord:hover {
    --_bg-color: var(--_discord);
  }
}