.social-auth {
  margin-top: 24px;
}
.social-auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--muted, color-mix(in srgb, #6b7280 var(--tint-text), var(--ink)));
  margin-bottom: 20px;
}
.social-auth-divider::before,
.social-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(
    --border,
    color-mix(in srgb, #dadce0 var(--tint-fill), var(--card))
  );
}
.social-auth-buttons {
  display: grid;
  gap: 12px;
}
.social-auth-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, #747775 var(--tint-text), var(--ink));
  border-radius: 4px;
  background: var(--card);
  color: var(--social-auth-ink);
  font:
    500 14px/20px Arial,
    sans-serif;
  cursor: pointer;
}
.social-auth-apple {
  background: var(--social-apple-fill);
  color: var(--on-inverse);
  border-color: var(--social-apple-fill);
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
.social-auth-button:focus-visible {
  outline: 3px solid
    var(--accent, color-mix(in srgb, #f17428 var(--tint-text), var(--ink)));
  outline-offset: 3px;
}
.social-auth-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.social-auth-button img {
  flex: 0 0 20px;
}