.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  height: var(--button-height);
  padding: 0 var(--spacing-lg);
  border: var(--border-light) solid var(--color-chat-input-border);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.facebook {
  background: var(--color-facebook-blue);
  border-color: transparent;
}

.google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: transparent;
}

.apple {
  background: #000000;
  border-color: #ffffff;
}

.label {
  flex: 1 1 auto;
  text-align: center;
}