/* This css file is a frozen version of packages/checkout-web-ui/src/style.css
  with css variables prefixed with `pp` (post-purchase) in order to avoid
  conflicting variables when importing both stylesheets in the same page. */

:root {
  /* TODO: Tech debt, change these for Surface and onSurface palettes  */
  --pp-color--light-grey: hsl(0, 0%, 73%);
  --pp-color--lightest-grey: hsl(0, 0%, 90%);
  --pp-color--white: hsl(0, 0%, 100%);

  /* Design system */

  /* For now, using --x-pp- prefix for these "design primitive" variables */

  /* color background */
  --x-pp-color-canvas: hsl(0, 0%, 100%);
  --x-pp-color-canvas-subdued: hsl(0, 0%, 98%);
  --x-pp-color-canvas-text: hsl(0, 0%, 33%);
  --x-pp-color-canvas-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-canvas-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-canvas-border: hsl(0, 0%, 85%);
  --x-pp-color-canvas-border-emphasized: hsl(0, 0%, 58%);

  /* color surface 1 */
  --x-pp-color-surface-primary: hsl(0, 0%, 100%);
  --x-pp-color-surface-primary-subdued: hsl(0, 0%, 98%);
  --x-pp-color-surface-primary-text: hsl(0, 0%, 33%);
  --x-pp-color-surface-primary-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-surface-primary-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-surface-primary-border: hsl(0, 0%, 85%);
  --x-pp-color-surface-primary-border-emphasized: hsl(0, 0%, 58%);
  --x-pp-color-surface-primary-disabled: hsl(0, 0%, 97.3%);
  --x-pp-color-surface-primary-accent: hsl(204, 77%, 41%);

  /* color surface 2 */
  --x-pp-color-surface-secondary: hsl(0, 0%, 98%);
  --x-pp-color-surface-secondary-subdued: hsl(0, 0%, 96%);
  --x-pp-color-surface-secondary-text: hsl(0, 0%, 33%);
  --x-pp-color-surface-secondary-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-surface-secondary-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-surface-secondary-border: hsl(0, 0%, 85%);
  --x-pp-color-surface-secondary-border-emphasized: hsl(0, 0%, 58%);
  --x-pp-color-surface-secondary-disabled: hsl(0, 0%, 95.3%);
  --x-pp-color-surface-secondary-accent: hsl(204, 77%, 41%);

  /* color surface 3 */
  --x-pp-color-surface-tertiary: hsl(0, 0%, 100%);
  --x-pp-color-surface-tertiary-subdued: hsl(0, 0%, 98%);
  --x-pp-color-surface-tertiary-text: hsl(0, 0%, 33%);
  --x-pp-color-surface-tertiary-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-surface-tertiary-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-surface-tertiary-border: hsl(0, 0%, 85%);
  --x-pp-color-surface-tertiary-border-emphasized: hsl(0, 0%, 58%);
  --x-pp-color-surface-tertiary-disabled: hsl(0, 0%, 97.3%);
  --x-pp-color-surface-tertiary-accent: hsl(204, 77%, 41%);

  /* color primary */
  --x-pp-color-primary-action: hsl(204, 77%, 41%);
  --x-pp-color-primary-action-hovered: hsl(204, 79%, 32%);
  --x-pp-color-primary-action-pressed: hsl(204, 79%, 32%);
  --x-pp-color-primary-action-text: hsl(0, 0%, 100%);
  --x-pp-color-primary-action-text-hovered: hsl(0, 0%, 100%);
  --x-pp-color-primary-action-text-pressed: hsl(0, 0%, 100%);

  /* color secondary */
  --x-pp-color-secondary-action: hsl(204, 0%, 42%);
  --x-pp-color-secondary-action-hovered: hsl(204, 0%, 32%);
  --x-pp-color-secondary-action-pressed: hsl(204, 0%, 32%);
  --x-pp-color-secondary-action-text: hsl(0, 0%, 100%);
  --x-pp-color-secondary-action-text-hovered: hsl(0, 0%, 100%);
  --x-pp-color-secondary-action-text-pressed: hsl(0, 0%, 100%);

  /* color tertiary */
  --x-pp-color-tertiary-action: hsl(0, 0%, 92%);
  --x-pp-color-tertiary-action-text: hsl(0, 0%, 20%);
  --x-pp-color-tertiary-action-text-subdued: hsl(0, 0%, 40%);

  /* color interactive */
  --x-pp-color-interactive: transparent;
  --x-pp-color-interactive-hovered: transparent;
  --x-pp-color-interactive-pressed: transparent;
  --x-pp-color-interactive-text: hsl(204, 77%, 41%);
  --x-pp-color-interactive-text-hovered: hsl(204, 76%, 50%);
  --x-pp-color-interactive-text-pressed: hsl(204, 76%, 50%);
  --x-pp-color-interactive-icon: hsl(0, 0%, 100%);

  /* color info */
  --x-pp-color-info: hsl(206, 100%, 97%);
  --x-pp-color-info-disabled: hsl(199, 100%, 94%);
  --x-pp-color-info-subdued: hsl(201, 100%, 95%);
  --x-pp-color-info-text: hsl(0, 0%, 33%);
  --x-pp-color-info-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-info-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-info-border: hsl(205, 63%, 89%);
  --x-pp-color-info-border-emphasized: hsl(192, 100%, 13%);
  --x-pp-color-info-accent: hsl(204, 77%, 41%);

  /* color success */
  --x-pp-color-success: hsl(132, 52%, 94%);
  --x-pp-color-success-disabled: hsl(131, 56%, 90%);
  --x-pp-color-success-subdued: hsl(133, 55%, 91%);
  --x-pp-color-success-text: hsl(0, 0%, 33%);
  --x-pp-color-success-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-success-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-success-border: hsl(127, 42%, 87%);
  --x-pp-color-success-border-emphasized: hsl(134, 27%, 15%);
  --x-pp-color-success-accent: hsl(131, 86%, 34%);

  /* color warning */
  --x-pp-color-warning: hsl(47, 100%, 94%);
  --x-pp-color-warning-disabled: hsl(48, 100%, 87%);
  --x-pp-color-warning-subdued: hsl(47, 100%, 89%);
  --x-pp-color-warning-text: hsl(0, 0%, 33%);
  --x-pp-color-warning-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-warning-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-warning-border: hsl(46, 63%, 84%);
  --x-pp-color-warning-border-emphasized: hsl(134, 27%, 15%);
  --x-pp-color-warning-accent: hsl(44, 100%, 36%);

  /* color critical */
  --x-pp-color-critical: hsl(0, 100%, 96%);
  --x-pp-color-critical-disabled: hsl(0, 100%, 94%);
  --x-pp-color-critical-subdued: hsl(0, 100%, 95%);
  --x-pp-color-critical-text: hsl(0, 0%, 33%);
  --x-pp-color-critical-text-subdued: hsl(0, 0%, 45%);
  --x-pp-color-critical-text-emphasized: hsl(0, 0%, 20%);
  --x-pp-color-critical-border: hsl(0, 82%, 89%);
  --x-pp-color-critical-border-emphasized: hsl(0, 100%, 18%);
  --x-pp-color-critical-accent: hsl(0, 77%, 51%);

  /* typography - font stacks */
  --x-pp-typography-primary-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', sans-serif;
  --x-pp-typography-secondary-fonts: -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;

  /* typography - font weights */
  --x-pp-typography-primary-weight-base: 400;
  --x-pp-typography-primary-weight-bold: 500;
  --x-pp-typography-secondary-weight-base: 400;
  --x-pp-typography-secondary-weight-bold: 500;

  /* typography - ratio of 1:1.285 */
  --x-pp-typography-size-xsmall: rem(9px);
  --x-pp-typography-size-small: rem(12px);
  --x-pp-typography-size-default: rem(14px);
  --x-pp-typography-size-medium: rem(16px);
  --x-pp-typography-size-large: rem(18px);
  --x-pp-typography-size-xlarge: rem(24px);
  --x-pp-typography-size-xxlarge: rem(28px);

  /* spacing - ratio of 1:1.225 */
  --x-pp-spacing-tight4x: rem(5px);
  --x-pp-spacing-tight3x: rem(6px);
  --x-pp-spacing-tight2x: rem(7px);
  --x-pp-spacing-tight1x: rem(9px);
  --x-pp-spacing-tight: rem(11px);
  --x-pp-spacing-base: rem(14px);
  --x-pp-spacing-loose: rem(17px);
  --x-pp-spacing-loose1x: rem(21px);
  --x-pp-spacing-loose2x: rem(26px);
  --x-pp-spacing-loose3x: rem(32px);
  --x-pp-spacing-loose4x: rem(38px);

  /* animation and transition */
  --x-pp-duration-none: 0;
  --x-pp-duration-fast: 100ms;
  --x-pp-duration-base: 200ms;
  --x-pp-duration-slow: 300ms;
  --x-pp-duration-slower: 400ms;
  --x-pp-duration-slowest: 500ms;

  @media screen and (prefers-reduced-motion: reduce) {
    --x-pp-duration-fast: 0.001ms;
    --x-pp-duration-base: 0.001ms;
    --x-pp-duration-slow: 0.001ms;
    --x-pp-duration-slower: 0.001ms;
    --x-pp-duration-slowest: 0.001ms;
  }

  --x-pp-timing-base: ease-in-out;
  --x-pp-timing-ease-out: cubic-bezier(0.3, 0.5, 0.5, 1);
  --x-pp-timing-linear: linear;
  --x-pp-timing-spring: cubic-bezier(0.3, 0, 0, 1);

  /* border */
  --x-pp-border-full: 1px;
  --x-pp-border-block-end: 0 0 1px;
  --x-pp-border-none: 0;

  /* border radii */
  --x-pp-border-radius-none: 0;
  --x-pp-border-radius-tight: em(2px);
  --x-pp-border-radius-base: em(5px);
  --x-pp-border-radius-fully-rounded: em(23px);

  /* border width */
  --x-pp-border-width-base: 1px;
  --x-pp-border-width-thick: em(2px);

  /* defaults */
  --x-pp-default-color-accent: hsl(204, 77%, 41%);
  --x-pp-default-color-border: hsl(0, 0%, 85%);
  --x-pp-default-color-border-emphasized: hsl(0, 0%, 58%);

  /* component groups */
  --x-pp-global-typography-letter-case: none;
  --x-pp-global-typography-line-size-default: 1.3;
  --x-pp-global-typography-line-size-large: 1.5;
  --x-pp-global-typography-kerning: normal;
  --x-pp-global-border-radius: var(--x-pp-border-radius-base);
  --x-pp-control-border-radius: var(--x-pp-border-radius-base);
  --x-pp-text-field-border-radius: var(--x-pp-border-radius-base);
  --x-pp-checkbox-border-radius: var(--x-pp-border-radius-base);
  --x-pp-option-list-border-radius: var(--x-pp-border-radius-base);
  --x-pp-select-border-radius: var(--x-pp-border-radius-base);
  --x-pp-review-block-border-radius: var(--x-pp-border-radius-base);
  --x-pp-tag-border-radius: var(--x-pp-border-radius-base);

  /* option lists */
  --x-pp-option-list-block-gap: 0;
  --x-pp-option-list-block-padding: var(--x-pp-spacing-loose);
  --x-pp-option-list-inline-padding: var(--x-pp-spacing-loose);

  /* money lines */
  --x-pp-money-lines-block-gap: var(--x-pp-spacing-tight);
  --x-pp-money-lines-separator-block-gap: var(--x-pp-spacing-loose1x);
  --x-pp-money-lines-block-padding: 0;
  --x-pp-money-lines-inline-padding: 0;
  --x-pp-money-summary-block-padding: 0;
  --x-pp-money-summary-inline-padding: 0;

  /* buyer journey */
  --x-pp-buyer-journey-inline-gap: var(--x-pp-spacing-tight1x);

  /* buttons */
  --x-pp-primary-button-block-padding: var(--x-pp-spacing-loose1x);
  --x-pp-primary-button-inline-padding: var(--x-pp-spacing-loose2x);
  --x-pp-secondary-button-block-padding: var(--x-pp-spacing-loose1x);
  --x-pp-secondary-button-inline-padding: var(--x-pp-spacing-loose2x);
  --x-pp-tertiary-button-block-padding: var(--x-pp-spacing-tight4x);
  --x-pp-tertiary-button-inline-padding: var(--x-pp-spacing-tight3x);

  /* radio */
  --x-pp-radio-size-base: em(18px);
  --x-pp-radio-size-large: em(22px);

  /* checkbox */
  --x-pp-checkbox-size: em(18px);

  /* icons */
  --x-pp-icon-size-small: em(10px);
  --x-pp-icon-size-default: em(14px);
  --x-pp-icon-size-large: em(18px);

  /* thumbnail */
  --x-pp-thumbnail-aspect-ratio: 1;

  /* link */
  --x-pp-link-transition-duration: var(--x-pp-duration-base);

  /* modal */
  --x-pp-modal-max-width: rem(840px);
  --x-pp-modal-iframe-default-height: rem(400px);
}

/* Global
   ----------------------------------------------------------------------------- */

*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

html {
  font-size: 62.5%; /* calc(10 / 16 * 100%); 16px being the default browser size */
  text-size-adjust: 100%;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  overflow-wrap: break-word;
}

/* Typography
   ----------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

em,
i {
  font-style: inherit;
}

b,
strong {
  font-weight: inherit;
}

small {
  font-size: var(--x-pp-typography-size-small);
}

address {
  font-style: normal;
}

/* Tables
   ----------------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
  font-weight: 400;
}

/* Media
   ----------------------------------------------------------------------------- */

img {
  border-style: none;
}

figure {
  margin: 0;
}

/* Forms
   ----------------------------------------------------------------------------- */

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  appearance: button;
  cursor: pointer;

  /* Bring back when we design focus states
  &::-moz-focus-inner {
    border: none;
    padding: 0;
  }
  */
}

[type='checkbox'],
[type='radio'] {
  padding: 0;
}

/* Misc
   ----------------------------------------------------------------------------- */

[hidden],
template {
  display: none;
}

iframe {
  margin: 0;
  padding: 0;
  border: 0;
}