.social-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-medium);
}

.social-button:hover {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-brand);
}

.social-button .icon {
  width: 20px;
  height: 20px;
  border-radius: 0px;
  fill: currentColor; 
}