"use strict";

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

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

const state_1 = require("@skava/state");

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 Text_1 = require("../../../atoms/Text");

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

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

const MaterialIcon_1 = require("../../../atoms/MaterialIcon");

const Toggle_1 = require("../../../molecules/Toggle");

const ConfirmationCard_1 = require("../../../organisms/ConfirmationCard");

const Item_1 = require("../../../abstractions/ShoppingList/Item");

const ProductList_1 = require("./ProductList");

const deviceSpecific = state_1.application.isMobile ? 296 : 184 * 3;
const StyledText = Text_1.StyledBaseText.as('span');
const StyledGhostButton = styleh_components_1.styled.withComponent(Buttons_1.GhostButton)`border:0;width:auto;height:1.25rem;padding:0;${Button_1.ButtonLabel}{margin:0;color:var(--color-black);}`;
const StyledListDetails = styleh_components_1.styled.withComponent(StyledGhostButton).attrs({
  'data-qa': 'qa-list-details'
})`height:1.875rem;@media (max-width:767px){height:1.25rem;}${Button_1.ButtonIcon}{margin:0 0 0 0.3125rem;.arrow-wrapper{width:auto;height:auto;}}${props => props.isConfirming === true && styleh_components_1.styled.css`opacity:0.3;`};`;
exports.StyledListDetails = StyledListDetails;
const StyledTextBoxPlugin = styleh_components_1.styled.withComponent(TextPlugin_1.TextBoxPlugin)`align-item:center;height:1.5rem;padding:0;margin:0;${inputs_1.StyledInput}{border:0;border-bottom:1px solid transparent;width:11.875rem;height:1.5rem;border-radius:0;padding:0;font-size:1.125rem;font-weight:700;text-overflow:ellipsis;&:active,&:focus{border-bottom:1px solid var(--color-light-grey);}&:focus{outline:none;}}${inputs_1.StyledLabelText}{display:none;}`;
exports.StyledTextBoxPlugin = StyledTextBoxPlugin;
const StyledListName = styleh_components_1.styled.withComponent(StyledText).attrs({
  'data-qa': 'qa-list-name'
})`color:var(--color-black);font-weight:700;font-size:1.125rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:1.5rem;`;
exports.StyledListName = StyledListName;
const StyledListCount = styleh_components_1.styled.withComponent(StyledText)`margin:0 0 0 0.5rem;font-size:1.125rem;flex:1;`;
exports.StyledListCount = StyledListCount;
const ListNameWrapper = styleh_components_1.styled.div`display:flex;flex-direction:row;align-items:baseline;width:12.5rem;margin-right:1.5rem;@media (max-width:1023px){border-bottom:1px solid transparent;margin:0 0 0.5rem 0;}@media (max-width:767px){width:11.875rem;}${props => props.isActive === false && styleh_components_1.styled.css`&:hover{border-bottom:1px solid var(--color-light-grey);}`};${props => props.isConfirming === true && styleh_components_1.styled.css`opacity:0.3;pointer-events:none;`};`;
exports.ListNameWrapper = ListNameWrapper;
const StyledRemoveIcon = styleh_components_1.styled.withComponent(MaterialIcon_1.MaterialIcon).attrs({
  'data-qa': 'qa-delete-button'
})`width:1.375rem;height:1.375rem;cursor:pointer;margin-right:1.5rem;@media (max-width:767px){margin-right:1rem;}`;
exports.StyledRemoveIcon = StyledRemoveIcon;
const StyledToggleSwitch = styleh_components_1.styled.withComponent(Toggle_1.Toggle)`${Toggle_1.IconWrapper}{margin-right:0;}${Toggle_1.SwitchIconWrapper}{align-items:center;}${Toggle_1.StyledSwitchIcon}{order:1;}${Toggle_1.SwitchLabel}{margin:0 1.25rem 0 0;color:var(--color-black);text-transform:capitalize;@media (max-width:767px){margin-right:1rem;}}`;
exports.StyledToggleSwitch = StyledToggleSwitch;
const StyledConfirmationCard = styleh_components_1.styled.withComponent(ConfirmationCard_1.ConfirmationCard)`${ConfirmationCard_1.ConfirmButton}{margin:0 1.125rem 0 0;}${ConfirmationCard_1.CancelButton}{border:1px solid var(--color-light-grey);background-color:transparent;${Button_1.ButtonLabel}{color:var(--color-light-grey);}}${ConfirmationCard_1.CardText}{margin-right:1.125rem;@media (max-width:767px){order:1;align-self:flex-end;margin:0 0 1.5rem 0;}}${ConfirmationCard_1.ConfirmButton},${ConfirmationCard_1.CancelButton}{@media (max-width:1023px){width:7.5rem;}@media (max-width:767px){width:100%;}}@media (max-width:1023px){justify-content:flex-end;flex:0 0 100%;}@media (max-width:767px){width:100%;}@media (max-width:1023px){align-self:flex-end;}`;
exports.StyledConfirmationCard = StyledConfirmationCard;
const StyledProductListWrapper = styleh_components_1.styled.section`padding:0.5rem 0.5rem 0;border:1px solid transparent;max-height:${deviceSpecific}px;overflow-y:auto;${Item_1.ProductItemWrapper}{padding:1.125rem 0;@media (max-width:767px){padding:1rem 0;}&:first-child{padding-top:0;}}@media (max-width:767px){padding:0.25rem 0.25rem 0;}${props => props.isConfirming === true && styleh_components_1.styled.css`opacity:0.5;pointer-events:none;border:1px solid var(--color-light-grey);`};`;
exports.StyledProductListWrapper = StyledProductListWrapper;
const StyledProductList = styleh_components_1.styled.withComponent(ProductList_1.ProductList).attrs({
  'data-qa': 'qa-product-container'
})``;
exports.StyledProductList = StyledProductList; //# sourceMappingURL=styled.js.map