/* Continue with Google (templates/app/_google_signin.html), on the login page and on the
   checkout's account step. The fill, the outline, the text colour, the logo's size and the
   hover and press layers are Google's light theme (Sign in with Google branding
   guidelines); the height, the font and the corners follow the page the button sits on,
   so it lines up with that page's own fields and buttons. */
.google-signin {
  --google-fill: #FFFFFF;
  --google-outline: #747775;
  --google-text: #1F1F1F;
  --google-hover: #EEEEEE;
  --google-press: #E6E6E6;
  --google-lift: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --google-logo: 20px;
  --google-inner-gap: 12px;
  --google-pad: 12px;
  --google-height: 52px;
  --google-or-gap: 12px;
  --google-stack-gap: 16px;
  display: grid;
  gap: var(--google-stack-gap);
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--google-inner-gap);
  min-block-size: var(--google-height);
  padding-inline: var(--google-pad);
  background: var(--google-fill);
  border: 1px solid var(--google-outline);
  /* The page's own corners: the subscriber area's buttons, else the sales pages'. */
  border-radius: var(--r-btn, var(--r-control, 4px));
  color: var(--google-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.google-btn:hover {
  background: var(--google-hover);
  box-shadow: var(--google-lift);
}
.google-btn:active { background: var(--google-press); }

.google-btn__logo {
  flex: none;
  inline-size: var(--google-logo);
  block-size: var(--google-logo);
}

/* "או" between the button and the form, on a line that runs to both edges. */
.google-signin__or {
  display: flex;
  align-items: center;
  gap: var(--google-or-gap);
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.72;
}
.google-signin__or::before,
.google-signin__or::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: currentColor;
  opacity: 0.45;
}