"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var styled_components_1 = __importDefault(require("styled-components"));
var CurrencyConverter_1 = require("../CurrencyConverter");
var context_1 = require("../context");
var elements_1 = require("@joincivil/elements");
exports.PaymentWrapperStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 400px;\n  width: 100%;\n\n  ", " {\n    bottom: 10px;\n  }\n"], ["\n  margin: 0 auto;\n  max-width: 400px;\n  width: 100%;\n\n  ", " {\n    bottom: 10px;\n  }\n"])), CurrencyConverter_1.CurrencyErrorMsg);
exports.PaymentHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-bottom: 25px;\n  position: relative;\n\n  h2 {\n    border-bottom: 1px solid ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 22px;\n    margin-bottom: 12px;\n    padding-bottom: 10px;\n\n    ", "\n  }\n"], ["\n  font-family: ", ";\n  margin-bottom: 25px;\n  position: relative;\n\n  h2 {\n    border-bottom: 1px solid ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 22px;\n    margin-bottom: 12px;\n    padding-bottom: 10px;\n\n    ", "\n  }\n"])), elements_1.fonts.SANS_SERIF, elements_1.colors.accent.CIVIL_GRAY_4, function (props) { return props.theme.renderContext === context_1.RENDER_CONTEXT.EMBED && "border-bottom: none; padding-bottom: 0;"; });
exports.PaymentCivilLogo = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  left: calc(50% - 25px);\n  position: absolute;\n  top: 10px;\n"], ["\n  left: calc(50% - 25px);\n  position: absolute;\n  top: 10px;\n"])));
exports.PaymentHeaderFlex = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n"])));
exports.PaymentHeaderCenter = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 10px;\n  text-align: center;\n"], ["\n  margin-bottom: 10px;\n  text-align: center;\n"])));
exports.PaymentHeaderNewsroom = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 17px;\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 17px;\n"])));
exports.PaymentHeaderTip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 13px;\n  line-height: 16px;\n"], ["\n  color: ", ";\n  font-size: 13px;\n  line-height: 16px;\n"])), elements_1.colors.accent.CIVIL_GRAY_1);
exports.PaymentAdjustedNotice = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: rgba(255, 204, 0, 0.1);\n  border-radius: 8px;\n  color: ", ";\n  margin-bottom: 25px;\n  padding: 15px 15px 12px;\n\n  p {\n    font-size: 13px;\n    line-height: 18px;\n    margin-top: 0;\n\n    span {\n      display: block;\n      font-weight: 700;\n    }\n  }\n"], ["\n  background-color: rgba(255, 204, 0, 0.1);\n  border-radius: 8px;\n  color: ", ";\n  margin-bottom: 25px;\n  padding: 15px 15px 12px;\n\n  p {\n    font-size: 13px;\n    line-height: 18px;\n    margin-top: 0;\n\n    span {\n      display: block;\n      font-weight: 700;\n    }\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_0);
exports.PaymentAdjustedNoticeFtr = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  padding-top: 10px;\n  text-align: right;\n\n  span {\n    color: ", ";\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 22px;\n  }\n"], ["\n  border-top: 1px solid ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  padding-top: 10px;\n  text-align: right;\n\n  span {\n    color: ", ";\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 22px;\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_4, elements_1.colors.accent.CIVIL_GRAY_1, elements_1.colors.primary.BLACK);
exports.PaymentFormWrapperStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 3px;\n  font-family: ", ";\n  padding: 20px 15px;\n  margin-bottom: 25px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 3px;\n  font-family: ", ";\n  padding: 20px 15px;\n  margin-bottom: 25px;\n"])), elements_1.colors.accent.CIVIL_GRAY_4, elements_1.fonts.SANS_SERIF);
exports.PaymentHeaderBoostLabel = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  margin-right: 5px;\n"], ["\n  color: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  margin-right: 5px;\n"])), elements_1.colors.accent.CIVIL_GRAY_1);
exports.PaymentHeaderAmount = styled_components_1.default.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 18px;\n  line-height: 22px;\n\n  b {\n    color: ", ";\n    font-weight: 700;\n  }\n"], ["\n  color: ", ";\n  font-size: 18px;\n  line-height: 22px;\n\n  b {\n    color: ", ";\n    font-weight: 700;\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_0, elements_1.colors.primary.BLACK);
exports.PaymentDirectionsStyled = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 15px;\n  line-height: 20px;\n  margin: 0 0 20px;\n\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"], ["\n  font-family: ", ";\n  font-size: 15px;\n  line-height: 20px;\n  margin: 0 0 20px;\n\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), elements_1.fonts.SANS_SERIF, elements_1.colors.accent.CIVIL_BLUE);
exports.PaymentBtn = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  border-radius: 3px;\n  color: ", ";\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 19px;\n  opacity: 1;\n  outline: none;\n  padding: 10px 40px;\n  transition: opacity 250ms;\n  width: 100%;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  background-color: ",
    ";\n  border: none;\n  border-radius: 3px;\n  color: ", ";\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 19px;\n  opacity: 1;\n  outline: none;\n  padding: 10px 40px;\n  transition: opacity 250ms;\n  width: 100%;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
    return props.backgroundColor ? props.backgroundColor : elements_1.colors.accent.CIVIL_BLUE;
}, elements_1.colors.basic.WHITE);
exports.PaymentInvertedBtn = styled_components_1.default(elements_1.InvertedButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: 19px;\n  padding: 10px 40px;\n  text-transform: none;\n  width: 100%;\n"], ["\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: 19px;\n  padding: 10px 40px;\n  text-transform: none;\n  width: 100%;\n"])));
exports.PaymentTypeSelect = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  padding-bottom: 40px;\n\n  button {\n    margin-bottom: 8px;\n  }\n"], ["\n  padding-bottom: 40px;\n\n  button {\n    margin-bottom: 8px;\n  }\n"])));
exports.PaymentNotice = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 0 0 15px;\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 0 0 15px;\n"])), elements_1.colors.accent.CIVIL_GRAY_1);
exports.PaymentTerms = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 22px;\n  margin: 15px 0 10px;\n\n  a {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 22px;\n  margin: 15px 0 10px;\n\n  a {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_1, elements_1.colors.accent.CIVIL_BLUE);
exports.PaymentInfoFlex = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  justify-content: space-between;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  justify-content: space-between;\n"])));
exports.PaymentSecure = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  color: ", ";\n  font-size: 11px;\n"], ["\n  align-items: center;\n  display: flex;\n  color: ", ";\n  font-size: 11px;\n"])), elements_1.colors.accent.CIVIL_GRAY_1);
exports.PaymentTypeLabel = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 20px;\n  margin-bottom: 10px;\n"], ["\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 20px;\n  margin-bottom: 10px;\n"])));
exports.PaymentAmountEth = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  margin-bottom: 20px;\n\n  label {\n    color: ", ";\n    display: block;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.92px;\n    margin-bottom: 2px;\n    text-transform: uppercase;\n  }\n\n  span {\n    color: ", ";\n  }\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  margin-bottom: 20px;\n\n  label {\n    color: ", ";\n    display: block;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.92px;\n    margin-bottom: 2px;\n    text-transform: uppercase;\n  }\n\n  span {\n    color: ", ";\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_1, elements_1.colors.accent.CIVIL_GRAY_1);
exports.PaymentInputLabel = styled_components_1.default.label(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  color: ", ";\n  display: block;\n  font-size: 13px;\n  line-height: 16px;\n  margin-bottom: 5px;\n"], ["\n  color: ", ";\n  display: block;\n  font-size: 13px;\n  line-height: 16px;\n  margin-bottom: 5px;\n"])), elements_1.colors.accent.CIVIL_GRAY_1);
exports.PaymentWarning = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 13px;\n  line-height: 22px;\n  margin-bottom: 15px;\n\n  svg {\n    vertical-align: sub;\n  }\n"], ["\n  color: ", ";\n  font-size: 13px;\n  line-height: 22px;\n  margin-bottom: 15px;\n\n  svg {\n    vertical-align: sub;\n  }\n"])), function (props) { return (props.redText ? elements_1.colors.accent.CIVIL_RED : elements_1.colors.accent.CIVIL_GRAY_1); });
exports.PaymentModalContain = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  font-family: ", ";\n  overflow: auto;\n  position: relative;\n  max-height: ", ";\n  padding: 20px;\n  width: 400px;\n\n  ", " {\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  ", "\n"], ["\n  font-family: ", ";\n  overflow: auto;\n  position: relative;\n  max-height: ", ";\n  padding: 20px;\n  width: 400px;\n\n  ", " {\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  ", "\n"])), elements_1.fonts.SANS_SERIF, function (props) { return props.maxHeight + "px"; }, elements_1.mediaQueries.MOBILE_SMALL, function (props) { return props.theme.renderContext === context_1.RENDER_CONTEXT.EMBED && "height: 100%; max-height: 100%; width: 100%;"; });
exports.PaymentModalCloseBtn = styled_components_1.default(elements_1.InvertedButton)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 50%;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 32px;\n\n  svg path {\n    transition: fill 0.2s ease;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"], ["\n  border: 1px solid ", ";\n  border-radius: 50%;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 32px;\n\n  svg path {\n    transition: fill 0.2s ease;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), elements_1.colors.accent.CIVIL_GRAY_4, elements_1.colors.basic.WHITE, elements_1.colors.accent.CIVIL_BLUE, function (props) { return props.theme.renderContext === context_1.RENDER_CONTEXT.EMBED && "display: none;"; });
exports.PaymentEthLearnMore = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  background-color: rgba(255, 204, 0, 0.1);\n  border-radius: 5px;\n  display: flex;\n  font-size: 12px;\n  justify-content: center;\n  letter-spacing: -0.07px;\n  line-height: 18px;\n  margin-bottom: 20px;\n  padding: 15px;\n\n  a {\n    cursor: pointer;\n    margin-right: 30px;\n\n    ", " {\n      margin-right: 15px;\n    }\n\n    &:last-of-type {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"], ["\n  background-color: rgba(255, 204, 0, 0.1);\n  border-radius: 5px;\n  display: flex;\n  font-size: 12px;\n  justify-content: center;\n  letter-spacing: -0.07px;\n  line-height: 18px;\n  margin-bottom: 20px;\n  padding: 15px;\n\n  a {\n    cursor: pointer;\n    margin-right: 30px;\n\n    ", " {\n      margin-right: 15px;\n    }\n\n    &:last-of-type {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), elements_1.mediaQueries.MOBILE, elements_1.colors.accent.CIVIL_BLUE);
exports.PaymentRadioBtnContain = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  color: ", ";\n  margin-right: 4%;\n  width: 22%;\n\n  input {\n    display: none;\n  }\n\n  input:checked + button {\n    border: 2px solid ", ";\n  }\n\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  color: ", ";\n  margin-right: 4%;\n  width: 22%;\n\n  input {\n    display: none;\n  }\n\n  input:checked + button {\n    border: 2px solid ", ";\n  }\n\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_0, elements_1.colors.accent.CIVIL_BLUE);
exports.PaymentRadioBtn = styled_components_1.default.button(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 600;\n  height: 75px;\n  outline: none;\n  padding: 10px;\n  transition: border 0.2s ease;\n  width: 100%;\n\n  span {\n    display: block;\n    font-size: 12px;\n    font-weight: 400;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 600;\n  height: 75px;\n  outline: none;\n  padding: 10px;\n  transition: border 0.2s ease;\n  width: 100%;\n\n  span {\n    display: block;\n    font-size: 12px;\n    font-weight: 400;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n  }\n"])), elements_1.colors.basic.WHITE, elements_1.colors.accent.CIVIL_GRAY_3, elements_1.colors.accent.CIVIL_BLUE);
exports.PaymentAmountNewsroom = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  h3 {\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 22px;\n    margin: 0 0 10px;\n  }\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    line-height: 17px;\n    margin: 0 0 15px;\n    text-align: center;\n  }\n"], ["\n  h3 {\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 22px;\n    margin: 0 0 10px;\n  }\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    line-height: 17px;\n    margin: 0 0 15px;\n    text-align: center;\n  }\n"])), elements_1.fonts.SANS_SERIF, elements_1.colors.accent.CIVIL_GRAY_1, elements_1.fonts.SANS_SERIF);
exports.PaymentGhostBtn = styled_components_1.default.button(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: block;\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n  padding: 0;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: block;\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n  padding: 0;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])), elements_1.colors.basic.WHITE, elements_1.colors.accent.CIVIL_BLUE, elements_1.fonts.SANS_SERIF);
exports.PaymentAmountUserInput = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: 20px 0 30px;\n\n  > div {\n    padding: 0;\n  }\n\n  label {\n    display: none;\n  }\n\n  ", " {\n    padding-left: 25px;\n    width: 150px;\n  }\n\n  ", " {\n    left: 9px;\n    top: -40px;\n    width: 18px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: 20px 0 30px;\n\n  > div {\n    padding: 0;\n  }\n\n  label {\n    display: none;\n  }\n\n  ", " {\n    padding-left: 25px;\n    width: 150px;\n  }\n\n  ", " {\n    left: 9px;\n    top: -40px;\n    width: 18px;\n  }\n"])), elements_1.InputBase, elements_1.InputIcon);
exports.PaymentAmountUserOptions = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  display: flex;\n  margin: 20px 0;\n\n  label {\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    margin-right: 8px;\n  }\n"], ["\n  display: flex;\n  margin: 20px 0;\n\n  label {\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    margin-right: 8px;\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_1, elements_1.fonts.SANS_SERIF);
exports.PaymentLoginOrGuestWrapper = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  padding: 20px;\n"], ["\n  padding: 20px;\n"])));
exports.PaymentLoginOrGuestTitle = styled_components_1.default.div(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 22px;\n  margin-bottom: 40px;\n  text-align: center;\n"], ["\n  font-family: ", ";\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 22px;\n  margin-bottom: 40px;\n  text-align: center;\n"])), elements_1.fonts.SANS_SERIF);
exports.PaymentLoginOrGuestOption = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n\n  &:last-of-type {\n    border-bottom: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  button {\n    margin-bottom: 12px;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n\n  &:last-of-type {\n    border-bottom: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  button {\n    margin-bottom: 12px;\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_4);
exports.PaymentLoginOrGuestType = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 19px;\n  margin-bottom: 12px;\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 19px;\n  margin-bottom: 12px;\n"])), elements_1.fonts.SANS_SERIF);
exports.PaymentLoginOrGuestDescription = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 13px;\n  line-height: 16px;\n  margin-bottom: 12px;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: 13px;\n  line-height: 16px;\n  margin-bottom: 12px;\n"])), elements_1.colors.accent.CIVIL_GRAY_0, elements_1.fonts.SANS_SERIF);
exports.PaymentInfoStyled = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 22px;\n  padding: 20px 0;\n\n  span {\n    color: ", ";\n    display: block;\n    font-weight: 700;\n    margin: 0;\n  }\n"], ["\n  border-top: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 22px;\n  padding: 20px 0;\n\n  span {\n    color: ", ";\n    display: block;\n    font-weight: 700;\n    margin: 0;\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_4, elements_1.colors.accent.CIVIL_GRAY_1, elements_1.fonts.SANS_SERIF, elements_1.colors.primary.BLACK);
exports.PaymentExpress = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  color: ", ";\n  display: block;\n  font-family: ", ";\n  font-size: 12px;\n  padding: 20px 0 15px;\n  text-align: center;\n  width: 100%;\n\n  label {\n    line-height: 14px;\n    margin-bottom: 10px;\n  }\n"], ["\n  border-top: 1px solid ", ";\n  color: ", ";\n  display: block;\n  font-family: ", ";\n  font-size: 12px;\n  padding: 20px 0 15px;\n  text-align: center;\n  width: 100%;\n\n  label {\n    line-height: 14px;\n    margin-bottom: 10px;\n  }\n"])), elements_1.colors.accent.CIVIL_GRAY_4, elements_1.colors.accent.CIVIL_GRAY_1, elements_1.fonts.SANS_SERIF);
exports.PaymentOrBorder = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n  height: 1px;\n  margin: 10px 10%;\n  position: relative;\n  width: 90%;\n\n  &:after {\n    content: \"Or\";\n    left: calc(50% - 25px);\n    position: absolute;\n    text-align: center;\n    top: calc(50% - 25px);\n    width: 50px;\n  }\n"], ["\n  height: 1px;\n  margin: 10px 10%;\n  position: relative;\n  width: 90%;\n\n  &:after {\n    content: \"Or\";\n    left: calc(50% - 25px);\n    position: absolute;\n    text-align: center;\n    top: calc(50% - 25px);\n    width: 50px;\n  }\n"])));
exports.PaymentEdit = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  font-size: 15px;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"], ["\n  align-items: center;\n  display: flex;\n  font-size: 15px;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
exports.PaymentHide = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
exports.PaymentBackBtn = styled_components_1.default.button(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  opacity: 0.5;\n  outline: none;\n  padding: 0;\n  transition: color 250ms, opacity 250ms;\n\n  svg {\n    margin-right: 5px;\n    transform: rotate(180deg);\n\n    g {\n      fill: ", ";\n      transition: color 250ms, opacity 250ms;\n    }\n  }\n\n  &:hover {\n    color: ", ";\n    opacity: 1;\n\n    svg g {\n      fill: ", ";\n    }\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 17px;\n  opacity: 0.5;\n  outline: none;\n  padding: 0;\n  transition: color 250ms, opacity 250ms;\n\n  svg {\n    margin-right: 5px;\n    transform: rotate(180deg);\n\n    g {\n      fill: ", ";\n      transition: color 250ms, opacity 250ms;\n    }\n  }\n\n  &:hover {\n    color: ", ";\n    opacity: 1;\n\n    svg g {\n      fill: ", ";\n    }\n  }\n"])), elements_1.colors.basic.WHITE, elements_1.colors.accent.CIVIL_GRAY_1, elements_1.fonts.SANS_SERIF, elements_1.colors.accent.CIVIL_GRAY_1, elements_1.colors.accent.CIVIL_BLUE, elements_1.colors.accent.CIVIL_BLUE);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;
//# sourceMappingURL=PaymentsStyledComponents.js.map