"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 styleConstants_1 = require("../styleConstants");
var Button_1 = require("../Button");
exports.TutorialProgressContain = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 20px 0 50px;\n  width: 100%;\n"], ["\n  padding: 20px 0 50px;\n  width: 100%;\n"])));
exports.TutorialProgressBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 3px;\n  height: 6px;\n  margin: 0 auto;\n  max-width: 900px;\n  position: relative;\n  width: 100%;\n"], ["\n  background-color: ", ";\n  border-radius: 3px;\n  height: 6px;\n  margin: 0 auto;\n  max-width: 900px;\n  position: relative;\n  width: 100%;\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4);
exports.TutorialProgressBarActive = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 3px;\n  height: 6px;\n  width: ", "%;\n"], ["\n  background-color: ", ";\n  border-radius: 3px;\n  height: 6px;\n  width: ", "%;\n"])), styleConstants_1.colors.accent.CIVIL_BLUE, function (props) { return ((props.activeSlide / props.totalSlides) * 100).toString(); });
exports.TutorialProgressBarSlideCount = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: bold;\n  left: calc(\n    ", "% - 25px\n  );\n  position: absolute;\n  text-align: center;\n  top: -20px;\n  width: 50px;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: bold;\n  left: calc(\n    ", "% - 25px\n  );\n  position: absolute;\n  text-align: center;\n  top: -20px;\n  width: 50px;\n"])), styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.fonts.SANS_SERIF, function (props) { return ((props.activeSlide / props.totalSlides) * 100).toString(); });
exports.TutorialContentWrap = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-family: ", ";\n  margin: 0 auto 50px;\n  max-width: 710px;\n  min-height: 500px;\n  position: relative;\n  text-align: ", ";\n\n  svg {\n    display: block;\n    margin: 0 auto;\n  }\n\n  button {\n    padding: 14px 30px;\n    width: auto;\n  }\n"], ["\n  font-family: ", ";\n  margin: 0 auto 50px;\n  max-width: 710px;\n  min-height: 500px;\n  position: relative;\n  text-align: ", ";\n\n  svg {\n    display: block;\n    margin: 0 auto;\n  }\n\n  button {\n    padding: 14px 30px;\n    width: auto;\n  }\n"])), styleConstants_1.fonts.SANS_SERIF, function (props) { return (props.centerContent ? "center" : "left"); });
exports.TutorialSlideContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 540px;\n\n  h2 {\n    font-size: 24px;\n    line-height: 29px;\n  }\n\n  p,\n  li {\n    font-size: 18px;\n    line-height: 33px;\n  }\n"], ["\n  margin: 0 auto;\n  max-width: 540px;\n\n  h2 {\n    font-size: 24px;\n    line-height: 29px;\n  }\n\n  p,\n  li {\n    font-size: 18px;\n    line-height: 33px;\n  }\n"])));
exports.TutorialTopicTitle = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 32px;\n  font-weight: 300;\n  letter-spacing: -0.87px;\n  line-height: 39px;\n  margin-bottom: 50px;\n\n  b {\n    font-weight: 800;\n  }\n"], ["\n  font-size: 32px;\n  font-weight: 300;\n  letter-spacing: -0.87px;\n  line-height: 39px;\n  margin-bottom: 50px;\n\n  b {\n    font-weight: 800;\n  }\n"])));
exports.TutorialTopicInfo = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 21px;\n  font-weight: 300;\n  letter-spacing: -0.11px;\n  line-height: 31px;\n  margin-bottom: 30px;\n"], ["\n  font-size: 21px;\n  font-weight: 300;\n  letter-spacing: -0.11px;\n  line-height: 31px;\n  margin-bottom: 30px;\n"])));
exports.TutorialFooterFull = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  padding: 40px 20px 50px;\n  position: fixed;\n  width: 100%;\n"], ["\n  background-color: ",
    ";\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  padding: 40px 20px 50px;\n  position: fixed;\n  width: 100%;\n"])), function (props) {
    return props.questionResult === "correct"
        ? "rgba(41,203,66,0.2)"
        : props.questionResult === "incorrect"
            ? "#FFE6E8"
            : styleConstants_1.colors.accent.CIVIL_GRAY_4;
});
exports.TutorialFooterWrap = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: ", ";\n  max-width: 900px;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: ", ";\n  max-width: 900px;\n  width: 100%;\n"])), function (props) { return (props.floatRight ? "flex-end" : "space-between"); });
exports.TutorialFooterLeft = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  font-family: ", ";\n\n  svg {\n    margin-right: 15px;\n  }\n\n  h3 {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 28px;\n    margin: 0 0 5px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 22px;\n    margin: 0 0 25px;\n  }\n\n  span {\n    color: ", ";\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n  }\n"], ["\n  align-items: flex-start;\n  display: flex;\n  font-family: ", ";\n\n  svg {\n    margin-right: 15px;\n  }\n\n  h3 {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 28px;\n    margin: 0 0 5px;\n  }\n\n  p {\n    color: ", ";\n    font-size: 14px;\n    line-height: 22px;\n    margin: 0 0 25px;\n  }\n\n  span {\n    color: ", ";\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n  }\n"])), styleConstants_1.fonts.SANS_SERIF, styleConstants_1.colors.accent.CIVIL_GRAY_0, styleConstants_1.colors.accent.CIVIL_RED);
exports.TutorialBtn = styled_components_1.default(Button_1.Button)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-radius: 1px;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0;\n  padding: 14px;\n  text-transform: none;\n  width: 160px;\n"], ["\n  border-radius: 1px;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0;\n  padding: 14px;\n  text-transform: none;\n  width: 160px;\n"])));
exports.TutorialInvertedBtn = styled_components_1.default(Button_1.InvertedButton)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: transparent;\n  border-radius: 1px;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0;\n  padding: 12px;\n  text-transform: none;\n  width: 160px;\n"], ["\n  background-color: transparent;\n  border-radius: 1px;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0;\n  padding: 12px;\n  text-transform: none;\n  width: 160px;\n"])));
exports.TutorialTextBtn = styled_components_1.default(Button_1.InvertedButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  font-size: 13px;\n  font-weight: bold;\n  letter-spacing: 0.3px;\n  line-height: 14px;\n  padding: 12px;\n  text-transform: none;\n  width: 160px;\n\n  &:hover,\n  &:focus {\n    background-color: transparent;\n    color: ", ";\n    text-decoration: underline;\n  }\n"], ["\n  background-color: transparent;\n  border: none;\n  font-size: 13px;\n  font-weight: bold;\n  letter-spacing: 0.3px;\n  line-height: 14px;\n  padding: 12px;\n  text-transform: none;\n  width: 160px;\n\n  &:hover,\n  &:focus {\n    background-color: transparent;\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), styleConstants_1.colors.accent.CIVIL_BLUE);
exports.TutorialQuizName = styled_components_1.default.h2(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 27px;\n  font-weight: 300;\n  letter-spacing: -0.14px;\n  line-height: 30px;\n  margin: 10px 0 40px -65px;\n"], ["\n  font-family: ", ";\n  font-size: 27px;\n  font-weight: 300;\n  letter-spacing: -0.14px;\n  line-height: 30px;\n  margin: 10px 0 40px -65px;\n"])), styleConstants_1.fonts.SANS_SERIF);
exports.TutorialQuizQuestion = styled_components_1.default.h3(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 24px;\n  font-weight: bold;\n  line-height: 29px;\n  position: relative;\n\n  span {\n    font-size: 18px;\n    left: -20px;\n    line-height: 28px;\n    position: absolute;\n    text-align: right;\n    top: 0;\n  }\n"], ["\n  font-family: ", ";\n  font-size: 24px;\n  font-weight: bold;\n  line-height: 29px;\n  position: relative;\n\n  span {\n    font-size: 18px;\n    left: -20px;\n    line-height: 28px;\n    position: absolute;\n    text-align: right;\n    top: 0;\n  }\n"])), styleConstants_1.fonts.SANS_SERIF);
exports.TutorialCompletedHeader = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 28px;\n  font-weight: 700;\n  letter-spacing: -0.58px;\n  line-height: 39px;\n  margin: 30px 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: 28px;\n  font-weight: 700;\n  letter-spacing: -0.58px;\n  line-height: 39px;\n  margin: 30px 0;\n  text-align: center;\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_0, styleConstants_1.fonts.SANS_SERIF);
exports.TutorialCompletedP = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 18px;\n  letter-spacing: -0.12px;\n  line-height: 33px;\n  margin: 30px 0 70px;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: 18px;\n  letter-spacing: -0.12px;\n  line-height: 33px;\n  margin: 30px 0 70px;\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_1, styleConstants_1.fonts.SANS_SERIF);
exports.TutorialRadioBtnCircle = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px ", ";\n  height: 16px;\n  left: 22px;\n  position: absolute;\n  top: 16px;\n  width: 16px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px ", ";\n  height: 16px;\n  left: 22px;\n  position: absolute;\n  top: 16px;\n  width: 16px;\n"])), styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.accent.CIVIL_GRAY_2);
exports.TutorialRadioBtnContain = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 100%;\n\n  input {\n    display: none;\n  }\n\n  input:checked + button {\n    background-color: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 1px solid ", ";\n      box-shadow: 0 0 0 1px ", ";\n    }\n  }\n"], ["\n  width: 100%;\n\n  input {\n    display: none;\n  }\n\n  input:checked + button {\n    background-color: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 1px solid ", ";\n      box-shadow: 0 0 0 1px ", ";\n    }\n  }\n"])), styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.accent.CIVIL_GRAY_0, exports.TutorialRadioBtnCircle, styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.accent.CIVIL_BLUE);
exports.TutorialRadioBtn = styled_components_1.default(Button_1.SecondaryButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 3px;\n  color: ", ";\n  cursor: pointer;\n  display: block;\n  font-family: ", ";\n  font-size: 16px;\n  letter-spacing: 0;\n  line-height: 26px;\n  margin-bottom: 15px;\n  padding: 12px 15px 12px 55px !important;\n  position: relative;\n  text-align: left;\n  text-transform: none;\n  transition: border-color 0.2s ease;\n  width: 100% !important;\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: 1px solid ", ";\n  border-radius: 3px;\n  color: ", ";\n  cursor: pointer;\n  display: block;\n  font-family: ", ";\n  font-size: 16px;\n  letter-spacing: 0;\n  line-height: 26px;\n  margin-bottom: 15px;\n  padding: 12px 15px 12px 55px !important;\n  position: relative;\n  text-align: left;\n  text-transform: none;\n  transition: border-color 0.2s ease;\n  width: 100% !important;\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4, styleConstants_1.colors.accent.CIVIL_GRAY_0, styleConstants_1.fonts.SANS_SERIF, styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.accent.CIVIL_GRAY_0);
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;
//# sourceMappingURL=TutorialStyledComponents.js.map