/*
 * Third-party sign-in buttons (Google Identity Services + Sign in with Apple).
 *
 * One stylesheet for every "continue with <provider>" control on the site, so
 * the login page form and the global login/register modal render an identical
 * row without either template carrying its own styles.
 *
 * Markup contract (produced by templates/components/auth/oauth_provider_buttons.html):
 *
 *   <div class="cc-oauth-row">
 *     <div class="cc-oauth-provider" id="googleSignInContainer"></div>
 *     <div class="cc-oauth-provider" data-cc-apple-auth data-cc-apple-mode="signin"></div>
 *   </div>
 *
 * Google renders into its container itself; the Apple button is rendered by
 * js/auth/auth_helpers/appleSignIn.js using the classes below.
 *
 * Apple's Human Interface Guidelines for "Sign in with Apple" are binding on
 * the button (approved wording, unmodified logo, one of the three approved
 * colour schemes, >= 140px wide, >= 30px tall, logo and text sized and inset
 * relative to button height, corner radius no greater than half the height).
 * The white scheme is used because it sits beside Google's outline button and
 * reads correctly on the dark Cannabis Cult surfaces.
 */

/* ---------------------------------------------------------------- layout -- */

.cc-oauth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  /* The row is a layout box only; the form surface shows through it. */
  background: transparent !important;
}

/* Full-width, one provider per line — used where the column is too narrow to
   seat two buttons side by side (the register panes). */
.cc-oauth-row--stacked {
  flex-direction: column;
  align-items: stretch;
}

.cc-oauth-row--stacked .cc-oauth-provider,
.cc-oauth-row--stacked .cc-apple-btn {
  width: 100%;
}

/*
 * The provider slot. Deliberately paints nothing: the requirement is that only
 * the vendor buttons themselves have a surface, so the colour and state of the
 * surrounding form (card, modal body, disabled/hover state) stays visible
 * around them.
 */
.cc-oauth-provider {
  display: flex;
  flex: 0 1 auto;
  /* Wraps so an error message lands under the button rather than beside it. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * Google Identity Services injects its own wrappers (and, for the personalized
 * "Sign in as …" variant, an iframe) which carry a light background and a drop
 * shadow of their own. Clear the wrappers only — the button element Google
 * renders inside them keeps the vendor styling its brand guidelines require.
 */
.cc-oauth-provider > div,
.cc-oauth-provider iframe,
.cc-oauth-provider [class*='S9gUrf'] {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* GIS keeps its config element in the flow; it has no size but can still add a
   flex gap row. */
.cc-oauth-provider > #g_id_onload {
  display: none !important;
}

/* ----------------------------------------------- sign in with apple button -- */

/*
 * Sizing is driven by --cc-apple-btn-height so every derived measurement stays
 * in the proportions Apple specifies. 40px matches the height Google renders
 * for its "large" button, which keeps the pair visually equal.
 */
.cc-apple-btn {
  --cc-apple-btn-height: 40px;
  --cc-apple-btn-fg: #000;
  --cc-apple-btn-bg: #fff;
  --cc-apple-btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Apple: minimum 140px wide. Sized by its label in a row so it sits beside
     Google's own content-sized button; stretched when the row is stacked. */
  min-width: 140px;
  max-width: 100%;
  width: auto;
  height: var(--cc-apple-btn-height);
  /* Apple: minimum inset of 1/10th the button height around the content. */
  padding: 0 calc(var(--cc-apple-btn-height) * 0.35);
  /* Apple: corner radius may be anything up to half the height. A pill matches
     the shape Google is asked to render (data-shape="pill"). */
  border-radius: calc(var(--cc-apple-btn-height) / 2);
  border: 1px solid var(--cc-apple-btn-border);
  background-color: var(--cc-apple-btn-bg);
  color: var(--cc-apple-btn-fg);
  /* Apple: San Francisco, or the platform system font. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  /* Apple: text is ~43% of the button height. */
  font-size: calc(var(--cc-apple-btn-height) * 0.43);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

/* Black scheme — for use on light surfaces. */
.cc-apple-btn--black {
  --cc-apple-btn-fg: #fff;
  --cc-apple-btn-bg: #000;
  --cc-apple-btn-border: transparent;
}

/* White-with-outline scheme — for use on white surfaces. */
.cc-apple-btn--outline {
  --cc-apple-btn-fg: #000;
  --cc-apple-btn-bg: #fff;
  --cc-apple-btn-border: #000;
}

/*
 * The mark is never recoloured or reproportioned; it only scales with the
 * button. The glyph fills about 74% of its 24x24 viewBox, so a 0.58 box gives
 * the ~43% visible logo height Apple specifies (17px in a 40px button).
 */
.cc-apple-btn__logo {
  flex: 0 0 auto;
  height: calc(var(--cc-apple-btn-height) * 0.58);
  width: auto;
  margin-right: calc(var(--cc-apple-btn-height) * 0.17);
  fill: currentColor;
}

.cc-apple-btn__label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-apple-btn:hover {
  background-color: color-mix(in srgb, var(--cc-apple-btn-bg) 92%, var(--cc-apple-btn-fg));
}

.cc-apple-btn:active {
  background-color: color-mix(in srgb, var(--cc-apple-btn-bg) 85%, var(--cc-apple-btn-fg));
}

.cc-apple-btn:focus-visible {
  outline: 2px solid var(--cc-pink, #ff2d6f);
  outline-offset: 2px;
}

.cc-apple-btn[aria-busy='true'],
.cc-apple-btn:disabled {
  opacity: 0.65;
  cursor: progress;
}

/* Errors surfaced by the Apple flow, rendered under the button by appleSignIn.js. */
.cc-oauth-error {
  width: 100%;
  margin: 0.5rem 0 0;
  color: var(--cc-pink, #ff2d6f);
  font-size: 0.8125rem;
  text-align: center;
}

@media (max-width: 575.98px) {
  .cc-oauth-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-oauth-provider,
  .cc-apple-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-apple-btn {
    transition: none;
  }
}