@layer components {
  /* Google OAuth Button - follows Google Brand Guidelines */
  .btn--google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: white;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    font-weight: 500;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
  }

  .btn--google:hover {
    background: #f8f9fa;
    border-color: #dadce0;
  }

  .btn--google:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--color-bg),
      0 0 0 4px var(--color-primary);
  }

  .btn--google .btn__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Full width variant for auth buttons */
  .btn--full-width {
    width: 100%;
  }

  /* Auth Divider ("or" separator) */
  .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }

  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--color-border);
  }

  /* Google OAuth Form (removes default form spacing) */
  .google-oauth-form {
    margin: 0;
  }
}