"use strict";

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

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

const Placeholder_1 = require("../../../../atoms/Placeholder");

const InputSpacing = styleh_components_1.styled.css`padding:0 0.25rem;margin-bottom:1.5rem;`;
const ContainerStyles = styleh_components_1.styled.css`display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;margin-left:-0.25rem;margin-right:-0.25rem;`;
const StyledLabel = styleh_components_1.styled.withComponent(Placeholder_1.TextPlaceholder)`display:flex;width:40%;height:0.75rem;margin-bottom:0.5rem;`;
exports.StyledLabel = StyledLabel;
const StyledInput = styleh_components_1.styled.withComponent(Placeholder_1.RectanglePlaceholder)`display:flex;width:100%;height:2.5rem;`;
exports.StyledInput = StyledInput;
const StyledButton = styleh_components_1.styled.withComponent(Placeholder_1.RectanglePlaceholder)`height:2.75rem;border-radius:0.25rem;`;
const StyledAddSaveButton = styleh_components_1.styled.withComponent(StyledButton)`width:16.5rem;@media (max-width:1023px){width:9.375rem;}@media (max-width:767px){width:50%;margin-right:0.625rem;}`;
exports.StyledAddSaveButton = StyledAddSaveButton;
const StyledCancelButton = styleh_components_1.styled.withComponent(StyledButton)`width:10.125rem;@media (max-width:1023px){width:9.375rem;}@media (max-width:767px){width:50%;}`;
exports.StyledCancelButton = StyledCancelButton;
const ButtonContainer = styleh_components_1.styled.div`display:flex;justify-content:space-between;`;
exports.ButtonContainer = ButtonContainer;
/**
 * Billing Address Styles
 */

const StyledTitle = styleh_components_1.styled.withComponent(Placeholder_1.TextPlaceholder)`display:flex;width:18.75rem;height:1.25rem;margin-bottom:1.5rem;@media (max-width:767px){width:9.375rem;}`;
exports.StyledTitle = StyledTitle;
const StyledZipCode = styleh_components_1.styled.div`flex:0 0 25%;${InputSpacing};@media (max-width:1023px){flex:0 0 30%;}`;
exports.StyledZipCode = StyledZipCode;
const StyledState = styleh_components_1.styled.div`flex:0 0 25%;${InputSpacing};@media (max-width:1023px){flex:0 0 70%;}`;
exports.StyledState = StyledState;
/**
 * Toggle Button Styles
 */

const CheckboxLabel = styleh_components_1.styled.withComponent(Placeholder_1.TextPlaceholder)`display:flex;width:15rem;height:0.875rem;`;
exports.CheckboxLabel = CheckboxLabel;
const Checkbox = styleh_components_1.styled.withComponent(Placeholder_1.RectanglePlaceholder)`display:flex;width:1.125rem;height:1.125rem;margin-right:1rem;`;
exports.Checkbox = Checkbox;
/**
 * PaymentMethod Styles
 */

const StyledSecurity = styleh_components_1.styled.div`flex:0 0 10%;${InputSpacing};@media (max-width:1023px){flex:0 0 20%;}@media (max-width:767px){flex:0 0 40%;}`;
exports.StyledSecurity = StyledSecurity;
const StyledYear = styleh_components_1.styled.div`flex:0 0 10%;${InputSpacing};@media (max-width:1023px){flex:0 0 16%;}@media (max-width:767px){flex:0 0 50%;}`;
exports.StyledYear = StyledYear;
const StyledMonth = styleh_components_1.styled.div`flex:0 0 10%;${InputSpacing};@media (max-width:1023px){flex:0 0 16%;}@media (max-width:767px){flex:0 0 50%;}`;
exports.StyledMonth = StyledMonth;
const StyledCardNumber = styleh_components_1.styled.div`flex:0 0 30%;${InputSpacing};@media (max-width:1023px){flex:0 0 68%;}@media (max-width:767px){flex:0 0 100%;}`;
exports.StyledCardNumber = StyledCardNumber;
const StyledFields = styleh_components_1.styled.div`flex:0 0 50%;${InputSpacing};@media (max-width:1023px){flex:0 0 100%;}`;
exports.StyledFields = StyledFields;
const Row = styleh_components_1.styled.div`flex:0 0 100%;${InputSpacing};display:flex;flex-direction:row;align-items:center;`;
exports.Row = Row;
const BillingFormContainer = styleh_components_1.styled.div`${ContainerStyles};${props => props.isVisible === false && styleh_components_1.styled.css`display:none;`};`;
exports.BillingFormContainer = BillingFormContainer;
const ToggleContainer = styleh_components_1.styled.div`${ContainerStyles};`;
exports.ToggleContainer = ToggleContainer;
const PaymentMethodContainer = styleh_components_1.styled.div`${ContainerStyles};`;
exports.PaymentMethodContainer = PaymentMethodContainer;
const StyledWrapper = styleh_components_1.styled.section``;
exports.StyledWrapper = StyledWrapper; //# sourceMappingURL=styled.js.map