"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 __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var styleConstants_1 = require("../styleConstants");
var Button_1 = require("../Button");
var Tokens_1 = require("./Tokens");
var logos_1 = require("../icons/logos");
exports.TokenAccountOuter = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  padding: 20px 20px 50px;\n  width: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  padding: 20px 20px 50px;\n  width: 100%;\n"])), styleConstants_1.colors.accent.CIVIL_BLUE_FADED_2);
exports.TokenSection = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 30px;\n"], ["\n  margin-bottom: 30px;\n"])));
var PAYPAL_BLUE = "rgba(43,86,255,0.5)";
var PAYPAL_BLUE_DARK = "#2b56ff";
exports.PaypalDonateContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  border: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  border: 1px solid ", ";\n"])), PAYPAL_BLUE);
exports.PaypalDonateIconContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 18px 12px;\n  border-right: 1px solid ", ";\n"], ["\n  padding: 18px 12px;\n  border-right: 1px solid ", ";\n"])), PAYPAL_BLUE);
exports.PaypalDonateIconButtonContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
exports.PaypalLogoContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 18px;\n"], ["\n  padding: 18px;\n"])));
exports.PaypalDonateIconButton = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: #fff;\n  box-shadow: 0px 0px 0px transparent;\n  border: 0px solid transparent;\n  text-shadow: 0px 0px 0px transparent;\n  color: ", ";\n  padding: 20px;\n  border-left: 1px solid ", ";\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n  outline: none;\n  font-weight: bold;\n\n  &:hover {\n    background: ", ";\n    color: #fff;\n    box-shadow: 0px 0px 0px transparent;\n    border: 0px solid transparent;\n    text-shadow: 0px 0px 0px transparent;\n  }\n"], ["\n  background: #fff;\n  box-shadow: 0px 0px 0px transparent;\n  border: 0px solid transparent;\n  text-shadow: 0px 0px 0px transparent;\n  color: ", ";\n  padding: 20px;\n  border-left: 1px solid ", ";\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n  outline: none;\n  font-weight: bold;\n\n  &:hover {\n    background: ", ";\n    color: #fff;\n    box-shadow: 0px 0px 0px transparent;\n    border: 0px solid transparent;\n    text-shadow: 0px 0px 0px transparent;\n  }\n"])), PAYPAL_BLUE_DARK, PAYPAL_BLUE, PAYPAL_BLUE_DARK);
exports.PaypalDonate = function () { return (React.createElement("form", { action: "https://www.paypal.com/cgi-bin/webscr", method: "post", target: "_blank" },
    React.createElement(exports.PaypalDonateContainer, null,
        React.createElement(exports.PaypalLogoContainer, null,
            React.createElement(logos_1.PaypalLogoIcon, null)),
        React.createElement(exports.PaypalDonateIconButtonContainer, null,
            React.createElement(exports.PaypalDonateIconButton, { type: "submit", value: "Donate" }))),
    React.createElement("input", { type: "hidden", name: "cmd", value: "_s-xclick" }),
    React.createElement("input", { type: "hidden", name: "hosted_button_id", value: "7MGFAU85AUA46" }),
    React.createElement("img", { src: "https://www.paypal.com/en_US/i/scr/pixel.gif", width: "1", height: "1" }))); };
exports.TokenAccountInner = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  max-width: 1200px;\n"], ["\n  max-width: 1200px;\n"])));
exports.TokenBtns = styled_components_1.default(Button_1.Button)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border-radius: 1px;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.3px;\n  text-transform: none;\n"], ["\n  border-radius: 1px;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.3px;\n  text-transform: none;\n"])));
exports.TokenBtnsInverted = styled_components_1.default(Button_1.InvertedButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-radius: 1px;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.3px;\n  text-transform: none;\n"], ["\n  border-radius: 1px;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.3px;\n  text-transform: none;\n"])));
exports.FlexColumns = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n\n  ", " {\n    display: block;\n  }\n"], ["\n  display: flex;\n\n  ", " {\n    display: block;\n  }\n"])), styleConstants_1.mediaQueries.MOBILE);
exports.FlexColumnsPrimary = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin-right: 30px;\n  width: calc(100% - 380px);\n\n  ", " {\n    margin-right: 0;\n    width: auto;\n  }\n"], ["\n  margin-right: 30px;\n  width: calc(100% - 380px);\n\n  ", " {\n    margin-right: 0;\n    width: auto;\n  }\n"])), styleConstants_1.mediaQueries.MOBILE);
exports.FlexColumnsPrimaryModule = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  background-color: ", ";\n  margin-bottom: 30px;\n  ", ";\n"], ["\n  border: 1px solid ", ";\n  background-color: ", ";\n  margin-bottom: 30px;\n  ", ";\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4, styleConstants_1.colors.basic.WHITE, function (props) { return (props.padding ? "padding: 30px 0" : ""); });
exports.FlexColumnsSecondary = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  width: 350px;\n\n  ", " {\n    width: auto;\n  }\n"], ["\n  width: 350px;\n\n  ", " {\n    width: auto;\n  }\n"])), styleConstants_1.mediaQueries.MOBILE);
exports.FlexColumnsSecondaryModule = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border-top: 1px solid ", ";\n  font-family: ", ";\n  margin-bottom: 30px;\n  padding: 20px 30px;\n\n  h3 {\n    color: ", ";\n    font-size: 18px;\n    line-height: 28px;\n    margin: 0 0 25px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 16px;\n    line-height: 26px;\n\n    a {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"], ["\n  background-color: ", ";\n  border-top: 1px solid ", ";\n  font-family: ", ";\n  margin-bottom: 30px;\n  padding: 20px 30px;\n\n  h3 {\n    color: ", ";\n    font-size: 18px;\n    line-height: 28px;\n    margin: 0 0 25px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 16px;\n    line-height: 26px;\n\n    a {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.accent.CIVIL_GRAY_4, styleConstants_1.fonts.SANS_SERIF, styleConstants_1.colors.accent.CIVIL_GRAY_0, styleConstants_1.colors.accent.CIVIL_GRAY_1, styleConstants_1.colors.accent.CIVIL_BLUE);
exports.TokenHeader = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  padding: 30px 30px 40px;\n  text-align: center;\n\n  h2 {\n    font-size: 27px;\n    line-height: 39px;\n    margin-bottom: 25px;\n  }\n\n  p {\n    font-size: 24px;\n    line-height: 29px;\n    margin-bottom: 60px;\n  }\n"], ["\n  color: ", ";\n  font-family: ", ";\n  padding: 30px 30px 40px;\n  text-align: center;\n\n  h2 {\n    font-size: 27px;\n    line-height: 39px;\n    margin-bottom: 25px;\n  }\n\n  p {\n    font-size: 24px;\n    line-height: 29px;\n    margin-bottom: 60px;\n  }\n"])), styleConstants_1.colors.primary.BLACK, styleConstants_1.fonts.SANS_SERIF);
exports.TokenAccountSectionHeader = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  font-family: ", ";\n  margin: 0 0 30px;\n  padding: 0 25px 30px;\n  text-align: center;\n\n  h3 {\n    color: ", ";\n    font-size: 20px;\n    font-weight: 700;\n    line-height: 32px;\n    margin: 0 0 8px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 18px;\n    letter-spacing: -0.12px;\n    line-height: 33px;\n    margin: 0;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  font-family: ", ";\n  margin: 0 0 30px;\n  padding: 0 25px 30px;\n  text-align: center;\n\n  h3 {\n    color: ", ";\n    font-size: 20px;\n    font-weight: 700;\n    line-height: 32px;\n    margin: 0 0 8px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 18px;\n    letter-spacing: -0.12px;\n    line-height: 33px;\n    margin: 0;\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4, styleConstants_1.fonts.SANS_SERIF, styleConstants_1.colors.primary.BLACK, styleConstants_1.colors.accent.CIVIL_GRAY_0);
exports.TokenRequirement = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  margin: 0 30px 0 50px;\n  padding: ", ";\n  position: relative;\n\n  h3 {\n    color: ", ";\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: ", ";\n    ", ";\n    line-height: 33px;\n    margin: ", ";\n  }\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 16px;\n    line-height: 26px;\n    margin: 0 0 30px;\n  }\n"], ["\n  margin: 0 30px 0 50px;\n  padding: ",
    ";\n  position: relative;\n\n  h3 {\n    color: ",
    ";\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: ", ";\n    ", ";\n    line-height: 33px;\n    margin: ", ";\n  }\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 16px;\n    line-height: 26px;\n    margin: 0 0 30px;\n  }\n"])), function (props) {
    return props.step === "completed" ? "0 20px 0 35px" : "5px 20px 20px 35px";
}, function (props) {
    return props.step === "completed" ? styleConstants_1.colors.primary.BLACK : styleConstants_1.colors.accent.CIVIL_GRAY_1;
}, styleConstants_1.fonts.SANS_SERIF, function (props) { return (props.step === "completed" ? "400" : "600"); }, function (props) { return (props.step === "completed" ? "letter-spacing: -0.12px;" : ""); }, function (props) { return (props.step === "completed" ? "0" : "0 0 5px"); }, styleConstants_1.colors.accent.CIVIL_GRAY_1, styleConstants_1.fonts.SANS_SERIF);
exports.TokenRequirementIcon = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 50%;\n  display: flex;\n  height: 38px;\n  justify-content: center;\n  left: -21px;\n  position: absolute;\n  top: 0;\n  width: 38px;\n  z-index: 1;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ",
    ";\n  border-radius: 50%;\n  display: flex;\n  height: 38px;\n  justify-content: center;\n  left: -21px;\n  position: absolute;\n  top: 0;\n  width: 38px;\n  z-index: 1;\n"])), styleConstants_1.colors.basic.WHITE, function (props) {
    return props.step === Tokens_1.TOKEN_PROGRESS.DISABLED
        ? "1px solid" + styleConstants_1.colors.accent.CIVIL_GRAY_3
        : "1px solid" + styleConstants_1.colors.accent.CIVIL_BLUE;
});
exports.TokenCheckIcon = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  left: -21px;\n  position: absolute;\n  top: 0;\n  z-index: 1;\n"], ["\n  left: -21px;\n  position: absolute;\n  top: 0;\n  z-index: 1;\n"])));
exports.TokenBuySection = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-family: ", ";\n  padding: 0 30px 5px;\n\n  h4 {\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 26px;\n    margin: 0;\n  }\n\n  h3 {\n    font-size: 20px;\n    font-weight: 700;\n    line-height: 32px;\n    margin: 0;\n  }\n\n  p {\n    color: ", ";\n    font-size: 16px;\n    line-height: 24px;\n    margin: 0 0 15px;\n  }\n\n  button {\n    border-radius: 1px;\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.3px;\n    text-transform: none;\n  }\n"], ["\n  font-family: ", ";\n  padding: 0 30px 5px;\n\n  h4 {\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 26px;\n    margin: 0;\n  }\n\n  h3 {\n    font-size: 20px;\n    font-weight: 700;\n    line-height: 32px;\n    margin: 0;\n  }\n\n  p {\n    color: ", ";\n    font-size: 16px;\n    line-height: 24px;\n    margin: 0 0 15px;\n  }\n\n  button {\n    border-radius: 1px;\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.3px;\n    text-transform: none;\n  }\n"])), styleConstants_1.fonts.SANS_SERIF, styleConstants_1.colors.accent.CIVIL_GRAY_0);
exports.TokenBuyIntro = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  padding: 0 0 15px;\n  margin: 0 0 25px;\n\n  span {\n    color: ", ";\n    display: block;\n    font-size: 14px;\n    line-height: 24px;\n    margin: 0 0 15px;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  padding: 0 0 15px;\n  margin: 0 0 25px;\n\n  span {\n    color: ", ";\n    display: block;\n    font-size: 14px;\n    line-height: 24px;\n    margin: 0 0 15px;\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_2, styleConstants_1.colors.accent.CIVIL_GRAY_0);
exports.TokenAirswapSection = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  padding: 15px 30px 0 30px;\n  text-align: center;\n  ", " {\n    padding-right: 10px;\n    padding-left: 10px;\n  }\n\n  button {\n    diplay: block;\n    width: 100%;\n  }\n"], ["\n  padding: 15px 30px 0 30px;\n  text-align: center;\n  ", " {\n    padding-right: 10px;\n    padding-left: 10px;\n  }\n\n  button {\n    diplay: block;\n    width: 100%;\n  }\n"])), styleConstants_1.mediaQueries.MOBILE);
exports.TokenSellSection = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 450px;\n\n  button {\n    margin-top: 50px;\n  }\n"], ["\n  margin: 0 auto;\n  max-width: 450px;\n\n  button {\n    margin-top: 50px;\n  }\n"])));
exports.TokenOrBreak = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin: 50px 0;\n  position: relative;\n\n  p {\n    background-color: ", ";\n    color: ", ";\n    font-size: 14px;\n    left: calc(50% - 50px);\n    letter-spacing: 0.88px;\n    line-height: 1;\n    margin: 0;\n    position: absolute;\n    text-transform: uppercase;\n    top: -5px;\n    width: 100px;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin: 50px 0;\n  position: relative;\n\n  p {\n    background-color: ", ";\n    color: ", ";\n    font-size: 14px;\n    left: calc(50% - 50px);\n    letter-spacing: 0.88px;\n    line-height: 1;\n    margin: 0;\n    position: absolute;\n    text-transform: uppercase;\n    top: -5px;\n    width: 100px;\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4, styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.accent.CIVIL_GRAY_3);
exports.TokenProgressContain = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  margin-bottom: 10px;\n\n  h3 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 26px;\n    margin: 0 0 8px;\n\n    svg {\n      margin-right: 8px;\n      vertical-align: text-bottom;\n    }\n  }\n\n  p {\n    color: ", ";\n    font-size: 13px;\n    font-weight: 500;\n    letter-spacing: -0.14px;\n    line-height: 21px;\n  }\n\n  span {\n    margin-right: 15px;\n  }\n\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  div {\n    align-items: flex-start;\n  }\n\n  button {\n    margin: 0 0 0 10px;\n  }\n"], ["\n  margin-bottom: 10px;\n\n  h3 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 26px;\n    margin: 0 0 8px;\n\n    svg {\n      margin-right: 8px;\n      vertical-align: text-bottom;\n    }\n  }\n\n  p {\n    color: ", ";\n    font-size: 13px;\n    font-weight: 500;\n    letter-spacing: -0.14px;\n    line-height: 21px;\n  }\n\n  span {\n    margin-right: 15px;\n  }\n\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  div {\n    align-items: flex-start;\n  }\n\n  button {\n    margin: 0 0 0 10px;\n  }\n"])), styleConstants_1.colors.primary.BLACK, styleConstants_1.colors.accent.CIVIL_GRAY_2, styleConstants_1.colors.accent.CIVIL_BLUE);
exports.TokenFAQCollapse = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  padding: 20px 30px;\n\n  h3 {\n    font-size: 14px;\n    font-weight: bold;\n    line-height: 32px;\n    margin: 0;\n  }\n\n  li {\n    margin-bottom: 15px;\n  }\n"], ["\n  border-top: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  padding: 20px 30px;\n\n  h3 {\n    font-size: 14px;\n    font-weight: bold;\n    line-height: 32px;\n    margin: 0;\n  }\n\n  li {\n    margin-bottom: 15px;\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4, styleConstants_1.colors.accent.CIVIL_GRAY_1, styleConstants_1.fonts.SANS_SERIF);
exports.TokenFAQImg = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n\n  img {\n    margin-left: 50px;\n    max-width: 250px;\n    width: 50%;\n  }\n"], ["\n  align-items: flex-start;\n  display: flex;\n\n  img {\n    margin-left: 50px;\n    max-width: 250px;\n    width: 50%;\n  }\n"])));
exports.TokenFAQLineBreak = styled_components_1.default.hr(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 20px 0;\n  width: 15px;\n"], ["\n  background-color: ", ";\n  margin: 20px 0;\n  width: 15px;\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4);
exports.CloseBtn = styled_components_1.default(Button_1.InvertedButton)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  border: none;\n  padding: 0;\n  height: 40px;\n  position: absolute;\n  right: 50px;\n  top: 45px;\n  width: 40px;\n\n  svg path {\n    transition: fill 0.2s ease;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: transparent;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  border: none;\n  padding: 0;\n  height: 40px;\n  position: absolute;\n  right: 50px;\n  top: 45px;\n  width: 40px;\n\n  svg path {\n    transition: fill 0.2s ease;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: transparent;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), styleConstants_1.colors.accent.CIVIL_BLUE);
exports.TokenExchangeSection = styled_components_1.default.div(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  button {\n    background-color: transparent;\n    border: 1px solid ", ";\n    color: ", ";\n    transition: all 0.2s ease;\n\n    &:hover,\n    &:focus {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  button {\n    background-color: transparent;\n    border: 1px solid ", ";\n    color: ", ";\n    transition: all 0.2s ease;\n\n    &:hover,\n    &:focus {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.basic.WHITE);
exports.TokenCalcCVL = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  color: ", ";\n  margin: 70px 0 0;\n  text-align: center;\n\n  span {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 22px;\n  }\n\n  h4 {\n    font-size: 28px;\n    font-weight: 500;\n    letter-spacing: -0.58px;\n    line-height: 39px;\n  }\n\n  p {\n    font-size: 14px;\n    line-height: 22px;\n  }\n"], ["\n  color: ", ";\n  margin: 70px 0 0;\n  text-align: center;\n\n  span {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 22px;\n  }\n\n  h4 {\n    font-size: 28px;\n    font-weight: 500;\n    letter-spacing: -0.58px;\n    line-height: 39px;\n  }\n\n  p {\n    font-size: 14px;\n    line-height: 22px;\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_0);
exports.TokenBuySellComplete = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  margin-bottom: 35px;\n  text-align: center;\n\n  & > svg {\n    margin 0 auto 5px;\n  }\n\n  h3 {\n    font-size: 20px;\n    font-weight: bold;\n    line-height: 32px;\n    margin-bottom: 14px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n    margin-bottom: 17px;\n  }\n\n  a {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"], ["\n  margin-bottom: 35px;\n  text-align: center;\n\n  & > svg {\n    margin 0 auto 5px;\n  }\n\n  h3 {\n    font-size: 20px;\n    font-weight: bold;\n    line-height: 32px;\n    margin-bottom: 14px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n    margin-bottom: 17px;\n  }\n\n  a {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_1, styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.accent.CIVIL_BLUE);
exports.TokenUnlock = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  background-color: #fff7f8;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 20px;\n\n  h4 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 26px;\n    margin-bottom: 10px;\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n\n    b {\n      font-weight: 700;\n    }\n  }\n\n  a {\n    border: 1px solid ", ";\n    border-radius: 2px;\n    padding: 16px 40px;\n  }\n"], ["\n  background-color: #fff7f8;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 20px;\n\n  h4 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 26px;\n    margin-bottom: 10px;\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n\n    b {\n      font-weight: 700;\n    }\n  }\n\n  a {\n    border: 1px solid ", ";\n    border-radius: 2px;\n    padding: 16px 40px;\n  }\n"])), styleConstants_1.colors.accent.CIVIL_RED_FADED, styleConstants_1.colors.accent.CIVIL_GRAY_0, styleConstants_1.colors.accent.CIVIL_GRAY_1, styleConstants_1.colors.accent.CIVIL_BLUE);
exports.TokenBuySellTab = styled_components_1.default.li(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  background-color: ", ";\n  border-top: 1px solid ", ";\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: -0.12px;\n  line-height: 33px;\n  padding: 20px 0;\n  text-align: center;\n  text-decoration: none;\n  transition: border-color 500ms;\n  width: 50%;\n\n  ", " {\n    &:hover {\n      border-color: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  border-top: 1px solid ", ";\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: -0.12px;\n  line-height: 33px;\n  padding: 20px 0;\n  text-align: center;\n  text-decoration: none;\n  transition: border-color 500ms;\n  width: 50%;\n\n  ", " {\n    &:hover {\n      border-color: ",
    ";\n    }\n  }\n"])), function (props) { return (props.isActive ? "transparent" : styleConstants_1.colors.accent.CIVIL_GRAY_4); }, function (props) { return (props.isActive ? styleConstants_1.colors.accent.CIVIL_BLUE : "transparent"); }, styleConstants_1.colors.primary.CIVIL_GRAY_1, styleConstants_1.fonts.SANS_SERIF, styleConstants_1.mediaQueries.HOVER, function (props) {
    return props.isActive ? styleConstants_1.colors.accent.CIVIL_BLUE : styleConstants_1.colors.accent.CIVIL_GRAY_3;
});
exports.TokenBuySellTabsNav = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  height: 80px;\n  margin: -31px 0 50px;\n"], ["\n  height: 80px;\n  margin: -31px 0 50px;\n"])));
exports.ComingSoon = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  text-align: center;\n\n  h3 {\n    margin-bottom: 10px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n\n    a {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"], ["\n  text-align: center;\n\n  h3 {\n    margin-bottom: 10px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n\n    a {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_1, styleConstants_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;
//# sourceMappingURL=TokensStyledComponents.js.map