/**
 * Auth Button Component Styles
 * Sign In/Sign Out toggle button for the header
 */

.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 150ms ease;
  text-decoration: none;
}

.auth-button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.auth-button svg {
  width: 18px;
  height: 18px;
}

/* Sign in state - primary color */
.auth-button--sign-in {
  color: var(--primary);
}

.auth-button--sign-in:hover {
  color: var(--primary);
  background: rgba(59, 130, 246, 0.1);
}

/* Sign out state - error/danger color */
.auth-button--signed-out {
  color: var(--text-secondary);
}

.auth-button--signed-out:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

/* Ensure proper alignment in header */
[data-component="auth-button"] {
  display: inline-flex;
  align-items: center;
}