/* ==========================================================================
   The "Sign in with Google" button.

   NOT a .form-item, and not one of the .button ranks either. It is a
   button_to — OmniAuth 2 requires the request phase to be a POST carrying an
   authenticity token — wrapping a control whose appearance is set by Google's
   identity guidelines rather than by this site's palette: a white face, a grey
   hairline, the four-colour mark at its left, and the wording left alone.

   LOAD ORDER. Propshaft sorts logical paths alphabetically, so this file loads
   BEFORE utilities.css, whose `BUTTON:not(.editor-button)` (0,1,1) would
   otherwise paint this button solid blue on a tie. Every rule here is scoped
   under .oauth-button (0,2,0 or better) so it wins on specificity rather than
   on order — the same fix line-items.css and list-blocks.css use.
   ========================================================================== */

FORM.oauth-button {
  margin: 0;
}

FORM.oauth-button BUTTON {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--input-max-width);
  /* Same height arithmetic as the base button in utilities.css, so this sits
     level with the sign-in submit above it. */
  padding: calc((3rem - 1lh) / 2) 1.5rem;
  background-color: var(--nieve);
  color: var(--carbon);
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  border-radius: var(--radius-md);
  /* An inset shadow, not a border: the base button rule sets `border: none`
     and derives its padding from a target height, so a real 1px border would
     make this button 2px taller than the submit beside it. */
  box-shadow: inset 0 0 0 1px var(--hierro);
  text-align: center;
  transition: background-color 0.2s linear;
}

FORM.oauth-button BUTTON:hover {
  background-color: var(--nieve-sucia);
  color: var(--carbon);
}

/* The mark keeps its own four colours in every state — it is Google's, not
   ours to tint — and never shrinks with the label. */
FORM.oauth-button BUTTON IMG {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

/* ------------------------------------------------------------------------
   The rule between the two ways in.

   A line with the word "or" sitting in it. The line is drawn by the two
   pseudo-elements rather than by a border on the wrapper, which is what lets
   the word interrupt it instead of sitting on top of it.
   ---------------------------------------------------------------------- */

.auth-alternative {
  display: flex;
  align-items: center;
  gap: 1ch;
  max-width: var(--input-max-width);
  margin: var(--space-4) 0;
  color: var(--hierro);
  font-size: var(--fs-small);
  text-transform: lowercase;
}

.auth-alternative::before,
.auth-alternative::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--nieve-sucia);
}