/*
 * Google sizes its button iframe 20px wider than the button and pulls it
 * back with -10px side margins, so the focus halo can bleed past the
 * wrapper. A theme's responsive reset (`iframe { max-width: 100% }`) caps
 * that frame to the wrapper's width and the frame's internal clip then
 * eats the button's right edge, border included. The plugin owns this
 * host, so it ships the exemption.
 */
[data-st-google-button] iframe {
	max-inline-size: none;
}

/* The Google block the plugin renders on the login view and in the drawer:
   the button box GIS fills, and the "or" divider under it. */
@layer components {
  .st-auth-social {
    display: grid;
    gap: var(--st-space-md);
    margin-block-end: var(--st-space-md);
  }

  /* Fixed height + clip, not min: the GIS iframe pulses ~40px taller while
     personalising, which shifted the whole login form (CLS). 44px is the
     vendor-fixed height of the rendered button. */
  .st-auth-social__button {
    display: flex;
    justify-content: center;
    position: relative;
    block-size: 44px;
    overflow: clip;
  }

  .st-auth-social__button > div {
    inline-size: 100%;
    block-size: 44px;
  }

  /* GIS first renders a 40px fallback button, appends its zero-size iframe
     wrapper after that fallback, then removes the fallback. Keep the wrapper
     out of normal flow so that replacement cannot move it through the reserved
     44px box and register a layout shift. The generated id is the only stable
     contract GIS exposes for this wrapper. */
  .st-auth-social__button [id$="-wrapper"] {
    /* GIS loads unlayered vendor CSS after this layered component. */
    /* stylelint-disable declaration-no-important */
    position: absolute !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100% !important;
    block-size: 44px !important;
    /* stylelint-enable declaration-no-important */
  }

  .st-auth-social__button iframe {
    display: block;
  }

  /* Chromium removes the generated *-wrapper before personalisation and leaves
     the iframe directly under the positioned GIS host. Pin the block axis from
     insertion so Google's inline 6px -> 44px transition and its -2px top margin
     cannot move the iframe's layout rect. The inline axis stays Google's
     (canvas 20px wider than the button, pulled back by -10px side margins):
     the companion plugin's fit() pass reads exactly that contract to detect
     real clipping, and forcing inline-size or the side margins makes it see a
     permanent deficit and reload the iframe in a loop with the width watcher. */
  .st-auth-social__button > div > iframe {
    /* GIS writes these properties inline after this layered component. */
    /* stylelint-disable declaration-no-important */
    position: absolute !important;
    inset: 0 !important;
    margin-block: 0 !important;
    block-size: 44px !important;
    /* stylelint-enable declaration-no-important */
  }

  .st-auth-social__divider {
    display: flex;
    align-items: center;
    gap: var(--st-space-sm);
    color: var(--st-fg-muted);
    font-size: var(--st-font-size-sm);
  }

  .st-auth-social__divider::before,
  .st-auth-social__divider::after {
    content: '';
    flex: 1;
    block-size: 1px;
    background: var(--st-border);
  }
}