@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/src/styles/base-styles.js

@@ -1,741 +0,0 @@
-export const BASE_STYLE = (STYLES_VARIABLES, primaryValues, textColorMuted) => `
-  /* Loader */
-  .rebilly-instruments-loader {
-    display: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    justify-content: center;
-    align-items: center;
-    background-color: ${STYLES_VARIABLES.background};
-    z-index: 9000;
-    transition: all 200ms;
-  }
-
-  .rebilly-instruments-loader.active {
-    display: flex;
-  }
-
-  .rebilly-instruments-loader-spinner {
-    border: 4px solid ${primaryValues.tint(80).hexString()};
-    border-top: 4px solid ${STYLES_VARIABLES.primary};
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 0.5s ease infinite;
-  }
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  /* Helpers */
-  .visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-
-  .mt-xxs { margin-top: ${STYLES_VARIABLES.spaceXXS}!important }
-  .mt-xs { margin-top: ${STYLES_VARIABLES.spaceXS}!important }
-  .mt-s { margin-top: ${STYLES_VARIABLES.spaceS}!important }
-  .mt-m { margin-top: ${STYLES_VARIABLES.spaceM}!important }
-  .mt-l { margin-top: ${STYLES_VARIABLES.spaceL}!important }
-  .mt-xl { margin-top: ${STYLES_VARIABLES.spaceXL}!important }
-  .mt-xxl { margin-top: ${STYLES_VARIABLES.spaceXXL}!important }
-  .mt-0 { margin-top: 0!important }
-  .mr-xxs { margin-right: ${STYLES_VARIABLES.spaceXXS}!important }
-  .mr-xs { margin-right: ${STYLES_VARIABLES.spaceXS}!important }
-  .mr-s { margin-right: ${STYLES_VARIABLES.spaceS}!important }
-  .mr-m { margin-right: ${STYLES_VARIABLES.spaceM}!important }
-  .mr-l { margin-right: ${STYLES_VARIABLES.spaceL}!important }
-  .mr-xl { margin-right: ${STYLES_VARIABLES.spaceXL}!important }
-  .mr-xxl { margin-right: ${STYLES_VARIABLES.spaceXXL}!important }
-  .mr-0 { margin-right: 0!important }
-  .mb-xxs { margin-bottom: ${STYLES_VARIABLES.spaceXXS}!important }
-  .mb-xs { margin-bottom: ${STYLES_VARIABLES.spaceXS}!important }
-  .mb-s { margin-bottom: ${STYLES_VARIABLES.spaceS}!important }
-  .mb-m { margin-bottom: ${STYLES_VARIABLES.spaceM}!important }
-  .mb-l { margin-bottom: ${STYLES_VARIABLES.spaceL}!important }
-  .mb-xl { margin-bottom: ${STYLES_VARIABLES.spaceXL}!important }
-  .mb-xxl { margin-bottom: ${STYLES_VARIABLES.spaceXXL}!important }
-  .mb-0 { margin-bottom: 0!important }
-  .ml-xxs { margin-left: ${STYLES_VARIABLES.spaceXXS}!important }
-  .ml-xs { margin-left: ${STYLES_VARIABLES.spaceXS}!important }
-  .ml-s { margin-left: ${STYLES_VARIABLES.spaceS}!important }
-  .ml-m { margin-left: ${STYLES_VARIABLES.spaceM}!important }
-  .ml-l { margin-left: ${STYLES_VARIABLES.spaceL}!important }
-  .ml-xl { margin-left: ${STYLES_VARIABLES.spaceXL}!important }
-  .ml-xxl { margin-left: ${STYLES_VARIABLES.spaceXXL}!important }
-  .ml-0 { margin-left: 0!important }
-
-  /* Icons */
-  .rebilly-instruments-icon {
-    width: ${STYLES_VARIABLES.lineHeight};
-    height: ${STYLES_VARIABLES.lineHeight};
-    fill: ${STYLES_VARIABLES.text};
-  }
-
-  /* Form */
-  .rebilly-instruments-form {
-    color: ${STYLES_VARIABLES.text};
-    background: ${STYLES_VARIABLES.background};
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    font-family: ${STYLES_VARIABLES.fontFamily};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-    transition: all 200ms;
-    padding: 2px;
-  }
-
-  .rebilly-instruments-form.is-popup {
-    padding: 20px;
-  }
-
-  .rebilly-instruments-form fieldset {
-    border: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .rebilly-instruments-form h2 {
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    margin: 0 0 ${STYLES_VARIABLES.spaceM};
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-form-express * + * {
-    margin-top: ${STYLES_VARIABLES.spaceS};
-  }
-
-  .rebilly-instruments-form-express.compact * + * {
-    margin-top: 0;
-  }
-
-  .rebilly-instruments-form-express.compact {
-    display: flex;
-    justify-content: center;
-    padding: calc(${STYLES_VARIABLES.spaceXS} + ${STYLES_VARIABLES.spaceS}) ${STYLES_VARIABLES.spaceS} ${STYLES_VARIABLES.spaceS};
-    border: 1px solid ${textColorMuted[7].hexString()};
-    border-radius: 4px;
-    position: relative;
-    flex-wrap: wrap;
-  }
-
-  @keyframes rebillyExpressShine {
-    to {
-      background-position-x: -200%;
-    }
-  }
-
-  .rebilly-instruments-form-express.compact > * {
-    flex: 1 1;
-    margin: ${STYLES_VARIABLES.spaceXS} ${STYLES_VARIABLES.spaceXS};
-    max-width: 260px;
-    min-height: 44px;
-    background: linear-gradient(110deg, ${textColorMuted[8].hexString()} 0%, ${textColorMuted[9].hexString()} 25%, ${textColorMuted[8].hexString()} 50%);
-    border-radius: 6px;
-    background-size: 200% 100%;
-    animation: 1.5s rebillyExpressShine linear infinite;
-  }
-
-  .rebilly-instruments-form-express:empty {
-    display: none;
-  }
-
-  @media (max-width: 600px) {
-    .rebilly-instruments-form-express.compact > * {
-      flex: 1 1 auto;
-      max-width: 100%;
-    }
-  }
-
-  .rebilly-instruments-form-express.compact .rebilly-instruments-form-express-label {
-    position: absolute;
-    top: -12px;
-    color: ${STYLES_VARIABLES.text};
-    padding: 0 ${STYLES_VARIABLES.spaceS};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    background: ${STYLES_VARIABLES.background};
-    display: inline-block;
-    font-weight: 500;
-    min-height: auto;
-    margin: 0;
-  }
-
-  .rebilly-instruments-methods {
-    background-color: ${STYLES_VARIABLES.background};
-  }
-
-  .rebilly-instruments-button {
-    font-size: ${STYLES_VARIABLES.fontSize};
-    font-family: ${STYLES_VARIABLES.fontFamily};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    padding: ${STYLES_VARIABLES.formElementPadding};
-    box-sizing: border-box;
-    background: ${STYLES_VARIABLES.primary};
-    color: ${STYLES_VARIABLES.buttonText};
-    border-radius: ${STYLES_VARIABLES.borderRadius};
-    margin: calc(${STYLES_VARIABLES.spaceXXS} + ${STYLES_VARIABLES.spaceS} / 2) 0;
-    font-weight: 500;
-    border: none;
-    width: 100%;
-    cursor: pointer;
-    min-height: 44px;
-    transition: all 0.2s ease;
-    outline: none;
-  }
-
-  .rebilly-instruments-button.rebilly-instruments-button-secondary {
-    background: ${STYLES_VARIABLES.background};
-    box-shadow: inset 0 0 0 1px ${STYLES_VARIABLES.primary};
-    color: ${STYLES_VARIABLES.primary};
-  }
-
-  .rebilly-instruments-button:first-of-type {
-    margin-top: 0;
-  }
-
-  .rebilly-instruments-button:last-of-type {
-    margin-bottom: 0;
-  }
-
-  .rebilly-instruments-button:hover,
-  .rebilly-instruments-button:active {
-    background: ${primaryValues.shade(20).hexString()};
-  }
-
-  .rebilly-instruments-button.rebilly-instruments-button-secondary:hover,
-  .rebilly-instruments-button.rebilly-instruments-button-secondary:active {
-    background: ${STYLES_VARIABLES.background};
-  }
-
-  .rebilly-instruments-button:focus,
-  .rebilly-instruments-button:focus-visible,
-  .rebilly-instruments-button:focus-within {
-    box-shadow: 0 0 0 2px ${primaryValues.tint(60).hexString()};
-  }
-
-  .rebilly-instruments-button:disabled {
-    opacity: 0.6;
-  }
-
-  .rebilly-instruments-button::first-letter {
-    text-transform: uppercase;
-  }
-
-  .rebilly-instruments-select-field select {
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    padding: ${STYLES_VARIABLES.formElementPadding};
-    margin: 0;
-    border: 1px solid ${textColorMuted[5].hexString()};
-    border-radius: ${STYLES_VARIABLES.borderRadius};
-    background: transparent;
-    width: 100%;
-    cursor: pointer;
-    min-height: 44px;
-  }
-
-  .rebilly-instruments-input-field, 
-  .rebilly-instruments-select-field {
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    position: relative;
-    margin: calc(${STYLES_VARIABLES.spaceXXS} + ${STYLES_VARIABLES.spaceS}) 0;
-  }
-
-  .rebilly-instruments-input-field label,
-  .rebilly-instruments-select-field label {
-    left: ${STYLES_VARIABLES.formElementHorizontalPadding};
-    color: ${STYLES_VARIABLES.text};
-    background: transparent;
-    opacity: 0;
-    position: absolute;
-    top: 22px;
-    transform: translateY(-50%);
-    transition: all 200ms;
-    cursor: text;
-    pointer-events: none;
-  }
-
-  .rebilly-instruments-select-field label {
-    opacity: 0.5;
-  }
-
-  .rebilly-instruments-input-field input {
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    padding: ${STYLES_VARIABLES.formElementPadding};
-    min-height: ${STYLES_VARIABLES.formElementMinHeight};
-    background: transparent;
-    box-sizing: border-box;
-    width: 100%;
-    transition: all 200ms;
-    border: 1px solid ${textColorMuted[5].hexString()};
-    border-radius: ${STYLES_VARIABLES.borderRadius};
-  }
-
-  .rebilly-instruments-input-field input::placeholder {
-    color: ${STYLES_VARIABLES.text};
-    opacity: 0.5;
-  }
-
-  .rebilly-instruments-select-field select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-
-  .rebilly-instruments-select-field select::-ms-expand {
-    display: none;
-  }
-
-  .rebilly-instruments-input-field input:focus,
-  .rebilly-instruments-input-field input:focus-visible,
-  .rebilly-instruments-input-field input:focus-within,
-  .rebilly-instruments-select-field select:focus,
-  .rebilly-instruments-select-field select:focus-visible,
-  .rebilly-instruments-select-field select:focus-within {
-      outline: none;
-      border: 1px solid ${STYLES_VARIABLES.primary};
-      box-shadow: 0 0 0 1px ${STYLES_VARIABLES.primary};
-  }
-
-  .rebilly-instruments-input-field input:not(:placeholder-shown) + label,
-  .rebilly-instruments-select-field select:focus + label,
-  .rebilly-instruments-select-field label.active {
-    padding: 0 ${STYLES_VARIABLES.spaceXXS};
-    left: calc(${STYLES_VARIABLES.formElementHorizontalPadding} - ${STYLES_VARIABLES.spaceXXS});
-    font-size: ${STYLES_VARIABLES.fontSizeSmall};
-    line-height: ${STYLES_VARIABLES.fontSizeSmall};
-    color: ${STYLES_VARIABLES.text};
-    background: ${STYLES_VARIABLES.background};
-    font-weight: 500;
-    opacity: 1;
-    top: 0;
-  }
-
-  .rebilly-instruments-select-field::before {
-    content: '';
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border: solid ${STYLES_VARIABLES.text};
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    -webkit-transform: rotate(45deg);
-    right: 16px;
-    top: 16px;
-  }
-
-  .rebilly-instruments-checkbox-field {
-    position: relative;
-    padding-left: calc(${STYLES_VARIABLES.spaceM} + ${STYLES_VARIABLES.spaceS});
-    align-items: center;
-    margin: calc(${STYLES_VARIABLES.spaceM} - ${STYLES_VARIABLES.spaceXXS}) 0;
-    display: block;
-    cursor: pointer;
-  }
-
-  .rebilly-instruments-checkbox-field > * {
-    cursor: pointer;
-  }
-
-  .rebilly-instruments-checkbox-field input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  .rebilly-instruments-checkbox-field .rebilly-instruments-checkbox-check {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 24px;
-    width: 24px;
-    border-radius: 4px;
-    box-shadow: inset 0 0 0 1px ${textColorMuted[5].hexString()};
-    background-color: transparent;
-    transition: all 200ms;
-  }
-
-  .rebilly-instruments-checkbox-field .rebilly-instruments-checkbox-check:after {
-    content: '';
-    position: absolute;
-    left: 9px;
-    top: 4px;
-    opacity: 0;
-    width: 5px;
-    height: 11px;
-    border: solid ${STYLES_VARIABLES.primary};
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    transition: all 200ms;
-  }
-
-  .rebilly-instruments-checkbox-field input[type="checkbox"]:checked ~ .rebilly-instruments-checkbox-check {
-    box-shadow: inset 0 0 0 2px ${STYLES_VARIABLES.primary};
-  }
-
-  .rebilly-instruments-checkbox-field input[type="checkbox"]:checked ~ .rebilly-instruments-checkbox-check:after {
-    opacity: 1;
-  }
-
-  .rebilly-instruments-checkbox-field input[type="checkbox"]:focus ~ .rebilly-instruments-checkbox-check {
-    box-shadow: 0 0 0 2px ${primaryValues.tint(80).hexString()}, inset 0 0 0 1px ${STYLES_VARIABLES.primary};
-  }
-
-  .rebilly-instruments-divider {
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    padding: ${STYLES_VARIABLES.spaceM} 0;
-    margin: 0;
-    position: relative;
-    outline: 0;
-    border: 0;
-    text-align: center;
-  }
-
-  .rebilly-instruments-divider::before {
-    background: ${textColorMuted[7].hexString()};
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 100%;
-    height: 1px;
-  }
-
-  .rebilly-instruments-divider .rebilly-instruments-divider-label {
-    color: ${textColorMuted[2].hexString()};
-    font-weight: 500;
-    text-transform: uppercase;
-    padding: 0 ${STYLES_VARIABLES.spaceS};
-    line-height: 14px;
-    background-color: ${STYLES_VARIABLES.background};
-    font-size: 12px;
-    position: relative;
-    display: inline-block;
-  }
-
-  .rebilly-instruments-select-field-error select,
-  .rebilly-instruments-input-field-error input {
-    border-color: ${STYLES_VARIABLES.errorText};
-    color: ${STYLES_VARIABLES.errorText};
-  }
-
-  .rebilly-instruments-validation-error-wrapper,
-  .rebilly-instruments-errors {
-    margin-top: ${STYLES_VARIABLES.spaceXXS};
-    margin-bottom: calc(${STYLES_VARIABLES.spaceXXS} + ${STYLES_VARIABLES.spaceS});
-    padding: 0;
-    list-style: none;
-  }
-
-  .rebilly-instruments-validation-error-item,
-  .rebilly-instruments-errors li {
-    color: ${STYLES_VARIABLES.errorText};
-    padding: 0;
-  }
-
-  .rebilly-instruments-overlay {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0,0,0,0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #ffffff;
-    font-family: "Helvetica Neue";
-    font-size: 18px;
-    z-index: 9001
-  }
-
-  /* Summary */
-  .rebilly-instruments-summary-container {
-    color: ${STYLES_VARIABLES.text};
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    font-family: ${STYLES_VARIABLES.fontFamily};
-    background: ${STYLES_VARIABLES.background};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-  }
-
-  .rebilly-instruments-summary-line-item {
-    border-bottom: 1px solid ${textColorMuted[7].hexString()};
-    padding: ${STYLES_VARIABLES.spaceS} 0;
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-
-  .rebilly-instruments-summary-line-item:first-child {
-    padding-top: 0;
-  }
-
-  .rebilly-instruments-summary-line-item-figure {
-    margin: 0 ${STYLES_VARIABLES.spaceS} 0 0;
-    flex: 0 0 auto;
-    width: 48px;
-    height: 48px;
-    border-radius: ${STYLES_VARIABLES.borderRadius};
-    box-shadow: 0 0 0 1px ${textColorMuted[7].hexString()};
-    overflow: hidden;
-  }
-
-  .rebilly-instruments-summary-line-item-figure img {
-    width: 100%;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis {
-    flex: 1 2 auto;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis-title {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis-description {
-    color: ${textColorMuted[2].hexString()};
-    margin: 0;
-    font-size: 14px;
-    line-height: 14px;
-  }
-
-  .rebilly-instruments-summary-line-item-price-breakdown {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: ${textColorMuted[2].hexString()};
-    margin: 0 ${STYLES_VARIABLES.spaceS};
-  }
-
-  .rebilly-instruments-summary-line-item-amount {
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-summary-breakdown table {
-    width: 100%;
-    margin: ${STYLES_VARIABLES.spaceXS} 0;
-  }
-
-  .rebilly-instruments-summary-breakdown table colgroup col:first-child {
-    width: 85%;
-  }
-
-  .rebilly-instruments-summary-breakdown table colgroup col {
-    width: 15%;
-  }
-
-  .rebilly-instruments-summary-breakdown table tr td {
-    text-align: right;
-  }
-
-  .rebilly-instruments-summary-breakdown table tr td:first-child {
-    padding-right: ${STYLES_VARIABLES.spaceS};
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-summary-breakdown-total {
-    padding-top: ${STYLES_VARIABLES.spaceXS};
-    display: flex;
-    border-top: 1px solid ${textColorMuted[7].hexString()};
-    align-items: center;
-  }
-
-  .rebilly-instruments-summary-breakdown-total p {
-    margin: ${STYLES_VARIABLES.spaceS} 0;
-  }
-
-  .rebilly-instruments-summary-breakdown-total-amount {
-      flex: 1 2 80%;
-      font-size: 24px;
-      font-weight: 500;
-      text-align: right;
-      font-weight: bold;
-  }
-
-  .rebilly-instruments-summary-breakdown-total-amount-currency {
-    font-size: ${STYLES_VARIABLES.fontSize};
-    font-weight: normal;
-    color: ${textColorMuted[2].hexString()};
-    margin-right: ${STYLES_VARIABLES.spaceS};
-  }
-
-  /* Confirmation */
-  .rebilly-instruments-confirmation {
-    color: ${STYLES_VARIABLES.text};
-    background: ${STYLES_VARIABLES.background};
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    font-family: ${STYLES_VARIABLES.fontFamily};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-    transition: all 200ms;
-    padding: 2px;
-  }
-
-  .rebilly-instruments-confirmation a {
-    color: ${STYLES_VARIABLES.primary};
-    cursor: pointer;
-  }
-
-  .rebilly-instruments-confirmation a:hover {
-    text-decoration: none;
-  }
-
-  .rebilly-instruments-confirmation a svg {
-    fill: ${STYLES_VARIABLES.primary};
-  }
-
-  .rebilly-instruments-confirmation-go-back {
-    display: inline-flex;
-    margin-bottom: ${STYLES_VARIABLES.spaceM};
-  }
-
-  .rebilly-instruments-confirmation h2 {
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    margin: 0 0 ${STYLES_VARIABLES.spaceS};
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-confirmation-addresses-title {
-    display: flex;
-    justify-content: flex-start;
-  }
-
-  .rebilly-instruments-confirmation-addresses-title a {
-    margin-left: ${STYLES_VARIABLES.spaceS};
-    font-weight: normal;
-  }
-
-  .rebilly-instruments-confirmation address {
-    margin: 0 0 ${STYLES_VARIABLES.spaceM};
-    color: ${textColorMuted[2].hexString()};
-    font-style: normal;
-  }
-
-  .rebilly-instruments-confirmation-address-actions {
-    display: flex;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :first-child {
-    margin: 0 ${STYLES_VARIABLES.spaceXS} 0 0;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :last-child {
-    margin: 0 0 0 ${STYLES_VARIABLES.spaceXS};
-  }
-
-  .rebilly-instruments-confirm-payment-method {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 26px;
-    margin: 0 0 ${STYLES_VARIABLES.spaceL};
-  }
-
-  .rebilly-instruments-confirm-payment-method figure {
-    margin: 0 ${STYLES_VARIABLES.spaceXXS} 0 0;
-    height: 26px;
-    padding: 0;
-  }
-
-  .rebilly-instruments-confirm-payment-method span {
-    display: inline-block;
-    margin: 0 0 0 ${STYLES_VARIABLES.spaceS};
-  }
-
-  .rebilly-instruments-confirm-payment-method figure img {
-    width: 42px;
-    border-radius: ${STYLES_VARIABLES.borderRadius};
-  }
-
-  .rebilly-instruments-confirm-payment-method-exp {
-    color: ${textColorMuted[2].hexString()};
-  }
-
-  /* Results */
-  .rebilly-instruments-results {
-    color: ${STYLES_VARIABLES.text};
-    background: ${STYLES_VARIABLES.background};
-    font-size: ${STYLES_VARIABLES.fontSize};
-    line-height: ${STYLES_VARIABLES.lineHeight};
-    font-family: ${STYLES_VARIABLES.fontFamily};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-    transition: all 200ms;
-  }
-
-  .rebilly-instruments-results h1 {
-    font-size: calc(${STYLES_VARIABLES.fontSize} * 1.5);
-    line-height: calc(${STYLES_VARIABLES.lineHeight} * 1.5);
-    text-align: center;
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-results-icon {
-    width: 160px;
-    margin: 0 auto ${STYLES_VARIABLES.spaceM} auto;
-    display: block;
-  }
-
-  .rebilly-instruments-results-icon g {
-    stroke: ${STYLES_VARIABLES.primary};
-  }
-
-  .rebilly-instruments-results-icon.is-error g,
-  .rebilly-instruments-results-icon.is-error g {
-    stroke: ${STYLES_VARIABLES.errorText};
-  }
-
-  .rebilly-instruments-results-icon path {
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  .rebilly-instruments-results-icon path.circle {
-    stroke-dasharray: 350;
-    stroke-dashoffset: 0;
-    animation: 0.6s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
-  }
-
-  .rebilly-instruments-results-icon path.mark {
-    stroke-dasharray: 350;
-    stroke-dashoffset: 0;
-    animation: 1s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
-  }
-
-  @keyframes rebillyDashResultIcon {
-    from {
-        stroke-dashoffset: 350;
-    }
-    to {
-        stroke-dashoffset: 0;
-    }
-  }
-`;