/* Sign in with Google — sizing for the official pre-approved button assets.
 *
 * Google fixes how the button looks, so this file touches the box around the
 * artwork and nothing inside it: no fill, no border, no filter or opacity that
 * would shift the standard color "G" or the label. The hover state is a shadow
 * that falls outside the asset and the focus state is a ring beside it.
 * https://developers.google.com/identity/branding-guidelines
 *
 * Usage:
 *
 *   <a class="google-signin google-signin-block" href="...">
 *     <img src="{% static 'img/google/google-signin-dark-rect.svg' %}"
 *          width="216" height="48" alt="Sign in with Google">
 *   </a>
 *
 * Match the asset to the surface behind it — `-dark-` for the near-black pages
 * here, `-light-` for white, `-neutral-` for anything else. See
 * `static/img/google/README.md` for the full set.
 *
 * Loaded by base.html (public site) and admin/login.html (staff panel), so the
 * button has one definition in both.
 */

.google-signin {
  /* Admin defines --primary; the public site defines --purple-300. */
  --google-signin-ring: var(--purple-300, var(--primary, #7c5ce6));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Matches the -rect artwork's 4px corners so the focus ring traces it. */
  border-radius: 4px;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* The asset is 180x40 and vector, so it scales without loss as long as the
 * aspect ratio is left alone — Google requires that. 48px keeps the button the
 * same height as the .button-large it replaces. */
.google-signin img { display: block; height: 48px; width: auto; }

.google-signin:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.google-signin:active { transform: translateY(1px); }
.google-signin:focus-visible { outline: 2px solid var(--google-signin-ring); outline-offset: 3px; }

/* The -pill artwork is fully rounded, so the ring has to follow it. */
.google-signin-pill { border-radius: 999px; }

/* Fills the column the way .button-block did, with the artwork centred. */
.google-signin-block { display: flex; width: 100%; }