.btn-social {
  --bs-bg: var(--color-gray-900);
  --bs-bg-hover: var(--color-gray-700);
  --bs-bg-active: var(--color-gray-900);
  --bs-img: none;
  --bs-img-hover: none;
  --bs-img-active: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-8);
  color: var(--color-gray-0);
  background-color: var(--bs-bg);
  background-image: var(--bs-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-family-base);
}

.btn-social--md { padding: var(--spacing-10) var(--spacing-16); }
.btn-social--sm { padding: var(--spacing-6) var(--spacing-12); }
.btn-social--md.btn-social--icon-only { padding: var(--spacing-12); }
.btn-social--sm.btn-social--icon-only { padding: var(--spacing-8); }

.btn-social__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.btn-social__label { white-space: nowrap; }

.btn-social:hover,
.btn-social:focus-visible,
.btn-social--hover {
  background-color: var(--bs-bg-hover);
  background-image: var(--bs-img-hover);
}

.btn-social:focus-visible { outline: none; }

.btn-social:active,
.btn-social--active {
  background-color: var(--bs-bg-active);
  background-image: var(--bs-img-active);
}

.btn-social:disabled,
.btn-social:disabled:hover,
.btn-social:disabled:active,
.btn-social--disabled,
.btn-social--disabled:hover,
.btn-social--disabled:active {
  background-color: var(--color-gray-100);
  background-image: none;
  cursor: default;
}

.btn-social--facebook {
  --bs-bg: var(--color-social-facebook);
  --bs-bg-hover: var(--color-social-facebook-hover);
  --bs-bg-active: var(--color-social-facebook-active);
}

.btn-social--pinterest {
  --bs-bg: var(--color-social-pinterest);
  --bs-bg-hover: var(--color-social-pinterest-hover);
  --bs-bg-active: var(--color-social-pinterest-active);
}

.btn-social--youtube {
  --bs-bg: var(--color-social-youtube);
  --bs-bg-hover: var(--color-social-youtube-hover);
  --bs-bg-active: var(--color-social-youtube-active);
}

.btn-social--discord {
  --bs-bg: var(--color-social-discord);
  --bs-bg-hover: var(--color-social-discord-hover);
  --bs-bg-active: var(--color-social-discord-active);
}

.btn-social--twitter-old {
  --bs-bg: var(--color-social-twitter-old);
  --bs-bg-hover: var(--color-social-twitter-old-hover);
  --bs-bg-active: var(--color-social-twitter-old-active);
}

.btn-social--instagram {
  --bs-bg: transparent;
  --bs-bg-hover: transparent;
  --bs-bg-active: transparent;
  --bs-img: var(--gradient-social-instagram-label);
  --bs-img-hover: var(--gradient-social-instagram-label-hover);
  --bs-img-active: var(--gradient-social-instagram-label-active);
}

.btn-social--instagram.btn-social--icon-only {
  --bs-img: var(--gradient-social-instagram-icon);
  --bs-img-hover: var(--gradient-social-instagram-icon-hover);
  --bs-img-active: var(--gradient-social-instagram-icon-active);
}