"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const OneForm_1 = require("@skava/forms/build/dist/src/new-forms/OneForm/OneForm");

const TextPlugin_1 = require("@skava/forms/build/dist/src/new-forms/plugins/TextPlugin");

const inputs_1 = require("@skava/forms/build/dist/src/new-forms/inputs");

const Header_1 = require("../../../abstractions/ShoppingList/Header");

const Text_1 = require("../../../atoms/Text");

const Buttons_1 = require("../../Buttons");

const Button_1 = require("../../../atoms/Button");

const SubmitButton = styleh_components_1.styled.withComponent(Buttons_1.PrimaryButton).attrs({
  'data-qa': 'qa-create-list-save-button'
})`width:10rem;margin:0 1rem;@media (max-width:767px){flex:0 0 calc(50% - 8px);width:auto;}`;
exports.SubmitButton = SubmitButton;
const CancelButton = styleh_components_1.styled.withComponent(Buttons_1.GhostButton).attrs({
  'data-qa': 'qa-create-list-cancel-button'
})`width:10rem;border:0.0625rem solid var(--color-dark-grey);${Button_1.ButtonLabel}{color:var(--color-dark-grey);font:500 1.125rem "Roboto",Arial,Helvetica,sans-serif;}@media (max-width:767px){flex:0 0 calc(50% - 8px);width:auto;}`;
exports.CancelButton = CancelButton;
const ButtonGroup = styleh_components_1.styled.div`display:flex;justify-content:flex-end;@media (max-width:767px){width:100%;}`;
exports.ButtonGroup = ButtonGroup;
const StyledTextBoxPlugin = styleh_components_1.styled.withComponent(TextPlugin_1.TextBoxPlugin)`align-items:center;flex:1;margin:0;height:auto;label{text-transform:capitalize;font-size:1.125rem;top:2rem;}${inputs_1.StyledInput}{width:100%;font-size:1.125rem;padding-top:1rem;}@media (max-width:767px){width:100%;padding:0;}`;
exports.StyledTextBoxPlugin = StyledTextBoxPlugin;
const StyledObserverForm = styleh_components_1.styled.withComponent(OneForm_1.OneObserverForm)`display:flex;flex-direction:row;align-items:center;flex:1;@media (max-width:767px){width:100%;flex-direction:column;}`;
exports.StyledObserverForm = StyledObserverForm;
const StyledPrimaryButton = styleh_components_1.styled.withComponent(Buttons_1.PrimaryButton).attrs({
  'data-qa': 'qa-create-list'
})`${Header_1.buttonStyle};label{font:500 1.125rem "Roboto",Arial,Helvetica,sans-serif;}`;
exports.StyledPrimaryButton = StyledPrimaryButton;
const StyledLabel = styleh_components_1.styled.withComponent(Text_1.Label)`margin-top:1rem;color:var(--color-black);flex:0 0 100%;font-size:1.25rem;@media (max-width:1023px){font-size:1rem;margin-top:1.5rem;}`;
exports.StyledLabel = StyledLabel;
const StyledHeading = styleh_components_1.styled.withComponent(Text_1.Heading).attrs({
  'data-qa': 'qa-list-title'
})`margin:0;margin-left:0.5rem;text-transform:capitalize;color:var(--color-black);@media (max-width:1023px){font-size:1.25rem;}`;
exports.StyledHeading = StyledHeading;
const HeaderPlaceholder = styleh_components_1.styled.withComponent(Header_1.Header)`@media (max-width:1023px){${props => props.shouldWrap === true && styleh_components_1.styled.css`flex-direction:column;`} ${props => props.shouldWrap === false && styleh_components_1.styled.css`align-items:center;`}}`;
exports.HeaderPlaceholder = HeaderPlaceholder; //# sourceMappingURL=styled.js.map