/**
 * Express checkout buttons.
 *
 * Heights are px, never em: the buttons mount on the product page, the cart, the
 * mini cart and checkout, and the parent font size differs on each, so em would
 * give a different height on every surface.
 */
.monei-express-shortcut {
  margin: 0;
  width: 100%;
}

/* Cart: Luma leaves 25px under the button above the shortcut, so the same
   goes under the OR line to centre it between the two. */
.monei-express-separator {
  margin: 0 0 25px;
}

/* Mini cart: Luma's 15px sits under the whole actions block, not between the
   button and the shortcut, so the full 25 goes here. */
.monei-express-shortcut[data-monei-express-location='minicart'] .monei-express-separator {
  margin-top: 25px;
}

/* Product page: Luma leaves 35px under Add to Cart; 10px less makes 25. */
.monei-express-shortcut[data-monei-express-location='product'] .monei-express-separator {
  margin-top: -10px;
}

/* Nothing shows until a wallet reports itself usable: a heading over a button
   that never appears reads as a broken checkout. */
.monei-express-shortcut.is-loading,
.monei-express-shortcut.is-unavailable {
  display: none;
}

/* Stacked, one per line, on the cart and product surfaces. */
.monei-express-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * Not display:flex on a slot. PayPal sizes its own button inside, and a flex
 * parent collapses its width.
 */
.monei-express-button {
  display: block;
  min-height: 45px;
  width: 100%;
}

/* A slot this device cannot use, or one no wallet was mounted into. */
.monei-express-button.is-unavailable,
.monei-express-button:empty {
  display: none;
}

.monei-express-error {
  display: none;
  margin-top: 8px;
}

/* A rule either side of the text, as MONEI's own payment page draws it. No
   background behind the text, so it sits on grey and white surfaces alike. */
.monei-express-separator {
  align-items: center;
  color: rgba(0, 0, 0, 0.5);
  display: flex;
  font-size: 14px;
  gap: 8px;
  line-height: 20px;
}

.monei-express-separator::before,
.monei-express-separator::after {
  background: rgba(0, 0, 0, 0.1);
  content: '';
  flex: 1 1 0;
  height: 1px;
}

.monei-express-separator span {
  white-space: nowrap;
}