/**
 * Colors
 */
/**
 * Colors
 */
/**
 * SCSS Variables.
 *
 * Please use variables from this sheet to ensure consistency across the UI.
 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 */
/**
 * Colors
 */
/**
 * Fonts & basic variables.
 */
/**
 * Grid System.
 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 */
/**
 * Dimensions.
 */
/**
 * Shadows.
 */
/**
 * Editor widths.
 */
/**
 * Block & Editor UI.
 */
/**
 * Block paddings.
 */
/**
 * React Native specific.
 * These variables do not appear to be used anywhere else.
 */
/**
 * Breakpoint mixins
 */
/**
 * Long content fade mixin
 *
 * Creates a fading overlay to signify that the content is longer
 * than the space allows.
 */
/**
 * Focus styles.
 */
/**
 * Applies editor left position to the selector passed as argument
 */
/**
 * Styles that are reused verbatim in a few places
 */
/**
 * Allows users to opt-out of animations via OS-level preferences.
 */
/**
 * Reset default styles for JavaScript UI based pages.
 * This is a WP-admin agnostic reset
 */
/**
 * Reset the WP Admin page styles for Gutenberg-like pages.
 */
/**
 * These are default block editor widths in case the theme doesn't provide them.
 */
/**
 * Breakpoints & Media Queries
 */
:root {
  --wp-admin-theme-color: #007cba;
  --wp-admin-theme-color-darker-10: #006ba1;
  --wp-admin-theme-color-darker-20: #005a87;
}

body.admin-color-light {
  --wp-admin-theme-color: #0085ba;
  --wp-admin-theme-color-darker-10: #0073a1;
  --wp-admin-theme-color-darker-20: #006187;
}

body.admin-color-modern {
  --wp-admin-theme-color: #3858e9;
  --wp-admin-theme-color-darker-10: #2145e6;
  --wp-admin-theme-color-darker-20: #183ad6;
}

body.admin-color-blue {
  --wp-admin-theme-color: #096484;
  --wp-admin-theme-color-darker-10: #07526c;
  --wp-admin-theme-color-darker-20: #064054;
}

body.admin-color-coffee {
  --wp-admin-theme-color: #46403c;
  --wp-admin-theme-color-darker-10: #383330;
  --wp-admin-theme-color-darker-20: #2b2724;
}

body.admin-color-ectoplasm {
  --wp-admin-theme-color: #523f6d;
  --wp-admin-theme-color-darker-10: #46365d;
  --wp-admin-theme-color-darker-20: #3a2c4d;
}

body.admin-color-midnight {
  --wp-admin-theme-color: #e14d43;
  --wp-admin-theme-color-darker-10: #dd382d;
  --wp-admin-theme-color-darker-20: #d02c21;
}

body.admin-color-ocean {
  --wp-admin-theme-color: #627c83;
  --wp-admin-theme-color-darker-10: #576e74;
  --wp-admin-theme-color-darker-20: #4c6066;
}

body.admin-color-sunrise {
  --wp-admin-theme-color: #dd823b;
  --wp-admin-theme-color-darker-10: #d97426;
  --wp-admin-theme-color-darker-20: #c36922;
}

/* stylelint-disable block-closing-brace-newline-after */
/* stylelint-enable */
/**
 * Breakpoint mixins
 */
/* stylelint-disable block-closing-brace-newline-after */
/* stylelint-enable */
.woocommerce-task-payments .woocommerce-task-payment-wcpay .woocommerce-task-payment-wcpay__description {
  font-size: 16px;
  margin-bottom: 24px;
}
.woocommerce-task-payments .woocommerce-task-payment-wcpay .components-card__header {
  margin-bottom: 12px;
  justify-content: flex-start;
  padding: 25px;
}
.woocommerce-task-payments .woocommerce-task-payment-wcpay .components-card__header .woocommerce-pill {
  margin-left: 12px;
}
.woocommerce-task-payments .woocommerce-task-payment-wcpay .components-card__footer {
  flex-direction: column;
  align-items: flex-start;
}
.woocommerce-task-payments .woocommerce-task-payment-wcpay .components-card__footer .components-button {
  margin-top: 16px;
  margin-left: 0;
}
.woocommerce-task-payments .woocommerce-task-payment-wcpay .components-card__body h2 {
  margin: 0 0 20px 0;
}
.woocommerce-task-payments .woocommerce-task-payment-wcpay .woocommerce-task-payment-wcpay__accepted {
  display: flex;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.woocommerce-task-payments .woocommerce-task-payment-wcpay .woocommerce-task-payment-wcpay__accepted h3 {
  color: #40464d;
}

.woocommerce-task-payment__recommended-ribbon {
  position: absolute;
  transform: rotate(-45deg) translate(-50%, -50%);
  background: #2c3338;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  padding: 7px 40px;
  transform-origin: top left;
  margin-top: 32px;
  margin-left: 32px;
}
.woocommerce-task-payment__recommended-ribbon span {
  max-width: 70px;
}

@media (max-width: 600px) {
  .woocommerce-task-payment__recommended-ribbon {
    margin-top: 24px;
    margin-left: 24px;
    font-size: 9px;
  }
}