/* Glue for the sign-in widget.
 *
 * Apple's identityWidget / home / app-sk7 stylesheets own every visual decision; this file
 * only covers the things Apple's own bundle would otherwise do from JavaScript, or that its
 * own stylesheets leave broken: hiding the step container we are not on, keeping Chrome's
 * autofill highlight from painting over Apple's translucent field background (Apple ships a
 * translucent background and no autofill rule, so the browser default reads as a bug), and
 * restoring the one scale two of Apple's stylesheets disagree about, below.
 */

#content-auth[hidden],
#content-verify[hidden] {
  display: none !important;
}

/* Apple's nib artwork is sized by a scale, not by a width: home-0aa20955…css paints those bars
 * at transform:scale(.075) to make a 16px spinner (.15 for .spinner-large, 32px). app-sk7.css
 * is loaded after it and resets exactly that (`.signin .spinner-container{transform:none}`),
 * which paints the same spinner 212px wide — on a 320px phone that is the whole card covered in
 * black bars, hanging off the right edge.
 *
 * The markup nests two .spinner-container elements, Apple's own: the outer one only positions
 * (that is the one app-sk7.css means to leave alone), the inner one holds the nibs and is the
 * one that carries the scale. Scaling both, which is what a rule on the class alone does, gives
 * .075 * .075 = a 1px spinner. Each one is stated explicitly instead. */
.si-container .signin .spinner-container.auth {
  -webkit-transform: none;
  transform: none;
}

.si-container .signin .spinner > .spinner-container {
  -webkit-transform: scale(0.075);
  transform: scale(0.075);
}

.si-container .signin .spinner.spinner-large .spinner-container {
  -webkit-transform: scale(0.15);
  transform: scale(0.15);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.8) inset;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.8) inset;
  -webkit-text-fill-color: rgb(73, 73, 73);
  transition: background-color 9999s ease-in-out 0s;
}

/* The pending state of the Continue / Sign In button: Apple keeps the button's own box where it is
 * and paints its 32px spinner inside it, over the fill at .47 alpha. Measured off a capture of the
 * real button while a sign-in request was in flight: the ink there is a ring of radial dashes in
 * twelve lobes with a ramp in brightness — Apple's nib artwork, .spinner-large — centred in the
 * button, no label, on rgb(136,189,239), which is exactly #0071e3 (the fill this page paints) at
 * .47 over the card's white. The label is hidden with the class Apple ships for it
 * (.…__button__text--hidden), so the button never changes size while it spins.
 *
 * The fill needs !important because Apple's own bundle paints it on a more specific selector, and
 * this file is loaded last on purpose. The button is the spinner's offset parent so the artwork can
 * be centred in it rather than in whatever happens to be positioned nearby. */
.signin-v2__buttons-wrapper__button-wrapper__button {
  position: relative;
}

.signin-v2__buttons-wrapper__button-wrapper__button.button-loading {
  background-color: rgba(0, 113, 227, 0.47) !important;
  background-image: none !important;
  cursor: default;
}

/* Apple's spinner is drawn around its own origin, and the vendored cascade disagrees with itself
 * about where that origin is: app-sk7.css leaves .spinner-container position:relative with
 * percentage offsets, the module bundle inside the code step's button bar puts it position:absolute
 * at a fixed left:16px top:16px, and both outrank anything spelled with two class names because
 * they are hung off ids. Measured: a 32px wrapper centred on a button painted its ring 16px left of
 * the button's centre, and the same wrapper inside the button bar painted 21px right and 18px below
 * the bar's centre.
 *
 * So the wrapper is given no size and its container is pinned to that point, and !important is what
 * makes it stick — this file is loaded last precisely so these declarations are the last word, the
 * same reason the button's fill above needs it. A zero-size wrapper anchored at the middle of the
 * thing the spinner belongs in leaves exactly one place the artwork can be, under any cascade. */
.spinner.btn-spinner,
.spinner.spinner-centre {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  /* a transform is ignored on a non-replaced inline box, and this transform is the difference
   * between Apple's 32px spinner and the raw 212px artwork */
  display: block;
  pointer-events: none;
}

.spinner.btn-spinner > .spinner-container,
.spinner.spinner-centre > .spinner-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  display: block;
}

/* The code step's pending state hangs the artwork in the middle of the button bar, so the bar has
 * to be what the absolutely positioned wrapper is positioned against. Apple leaves it static. */
.verify-code__button-container .button-bar {
  position: relative;
}