/*
  The payment card's insides: a header saying who takes the card, the frame Stripe mounts into, and
  the two things that can stand in for it.

  Nothing here can style the fields themselves; Stripe renders them inside an iframe it controls.
  What this owns is the box around them and the states where there is no box yet. Colours are the
  design tokens (`design.css`), so dark mode follows the page.
*/

atomics-stripe-checkout {
  display: block;
  width: 100%;
}

atomics-stripe-checkout [checkout] {
  display: flex;
  flex-direction: column;
}

atomics-stripe-checkout [secure] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  box-shadow: inset 0 -1px 0 var(--ds-line);
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-ink2, var(--ds-ink));
}

atomics-stripe-checkout [secure] > span:nth-child(2) {
  flex: 1 1 auto;
}

/* A padlock from two shapes, so it needs no icon file and follows the scheme. */
atomics-stripe-checkout [lock] {
  position: relative;
  width: 11px;
  height: 8px;
  margin-top: 5px;
  border-radius: 2px;
  background: currentColor;
}

atomics-stripe-checkout [lock]::before {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 6px;
  width: 7px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
}

atomics-stripe-checkout [test] {
  display: none;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  background: var(--ds-warn-soft);
  color: var(--ds-warn);
  font-size: 11.5px;
  font-weight: 700;
}

atomics-stripe-checkout [test-hint] {
  display: none;
  margin: 18px 22px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ds-warn);
}

atomics-stripe-checkout [test-hint] code {
  font-family: var(--ds-mono);
}

atomics-stripe-checkout[mode='test'] [test] {
  display: inline-flex;
}

atomics-stripe-checkout[mode='test'] [test-hint] {
  display: block;
}

/*
  A minimum height held before Stripe mounts, so the page does not jump by the height of a whole
  payment form the moment the iframe arrives. Roughly what the card form occupies; being a little
  wrong is much better than being zero.
*/
atomics-stripe-checkout [frame] {
  min-height: 22rem;
  padding: 12px 8px 8px;
}

atomics-stripe-checkout [frame][hidden] {
  display: none;
  min-height: 0;
}

atomics-stripe-checkout [status] {
  margin: 18px 22px 0;
  color: var(--ds-mute);
  font-size: 14px;
}

atomics-stripe-checkout [status][hidden] {
  display: none;
}

atomics-stripe-checkout [fallback] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 22px 22px;
  padding: 16px;
  border-radius: 14px;
  background: var(--ds-fill);
}

atomics-stripe-checkout [fallback][hidden] {
  display: none;
}

atomics-stripe-checkout [note] {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ds-ink);
}

atomics-stripe-checkout [hosted] {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  background: var(--ds-ink);
  color: var(--ds-panel);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

/*
  Offline is the one fallback that is not an error, so it does not get an error's chrome. The
  customer has done nothing wrong and there is nothing to retry until the connection is back. The
  hosted link is still shown, because it will work the moment it is.
*/
atomics-stripe-checkout[fallback='offline'] [fallback] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ds-line);
}