"use strict";

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

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

const TextBox_1 = require("@skava/ui/dist/inputs/TextBox");

const Text_1 = require("@skava/ui/dist/components/atoms/Text");

const Heading_1 = require("@skava/ui/dist/components/atoms/Text/Heading");

const Icons_1 = require("@skava/ui/dist/components/atoms/Icons");

const ExpandableCard_1 = require("@skava/ui/dist/components/organisms/ExpandableCard");

const InformationCard_1 = require("@skava/ui/dist/components/organisms/InformationCard");

const StyledLabel = styleh_components_1.styled(Heading_1.H3).attrs({
  'data-qa': 'qa-payment-information'
})`font-size:1.25rem;margin:0;@media (max-width:1023px){font-size:1.125rem;}`;
exports.StyledLabel = StyledLabel;
const StyledButton = styleh_components_1.styled(Heading_1.H3).attrs({
  'data-qa': 'qa-new-payment-method'
})`cursor:pointer;color:var(--color-blue);text-transform:capitalize;font-size:1.125rem;font-weight:500;margin:0;@media (max-width:1023px){font-size:1rem;justify-content:left;margin-top:1rem;}`;
exports.StyledButton = StyledButton;
const ItemWrapper = styleh_components_1.styled.section.attrs({
  'data-qa': 'qa-payment-card-details'
})`display:flex;flex-direction:row;align-items:center;border:0.0625rem solid var(--color-dark-grey);border-radius:0.25rem;margin-bottom:1rem;padding:1.25rem;${props => props.isDefaultPayment && styleh_components_1.styled.css`border-color:var(--color-blue);border-width:0.1875rem;`} @media (max-width:767px){padding:1rem;}&:last-child{margin-bottom:0;}${ExpandableCard_1.ToggleButton}{top:0;right:0;bottom:auto;padding:0;}${ExpandableCard_1.CardWrapper}{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;@media (max-width:1023px){flex-direction:column;align-items:baseline;}}@media (max-width:1023px){flex-direction:column;align-items:baseline;}`;
exports.ItemWrapper = ItemWrapper;
const IconWrapper = styleh_components_1.styled.div`display:flex;flex-direction:row;align-items:center;`;
exports.IconWrapper = IconWrapper;
const NameOnCard = styleh_components_1.styled(Text_1.Heading)`margin:0;margin-bottom:0.25rem;font-size:1.125rem;`;
exports.NameOnCard = NameOnCard;
const CardNumber = styleh_components_1.styled(Text_1.Heading)`margin:0;font-size:1.125rem;font-weight:500;`;
exports.CardNumber = CardNumber;
const CardExpiry = styleh_components_1.styled(Text_1.Text)`font-size:1rem;margin-top:0.3125rem;`;
exports.CardExpiry = CardExpiry;
const CardInformation = styleh_components_1.styled.div`margin-right:0.5rem;@media (max-width:767px){margin-bottom:1.5rem;}`;
exports.CardInformation = CardInformation;
const CardCvv = styleh_components_1.styled(TextBox_1.StyledInput)`width:6.25rem;margin-right:3.3125rem;@media (max-width:1023px){width:8.4375rem;margin-top:0;}`;
exports.CardCvv = CardCvv;
const CardCvvInformation = styleh_components_1.styled.div`display:flex;justify-content:flex-end;flex-direction:row;flex:1;`;
exports.CardCvvInformation = CardCvvInformation;
const StyledPaymentsCardIcon = styleh_components_1.styled(Icons_1.PaymentsCardIcon)`margin:0;flex:0 0 3.125rem;margin-right:0.5rem;height:1.875rem;border:0.0625rem solid #ccc;padding:0.25rem;`;
exports.StyledPaymentsCardIcon = StyledPaymentsCardIcon;
const StyledInformationCard = styleh_components_1.styled(InformationCard_1.InformationCard)`display:flex;`;
exports.StyledInformationCard = StyledInformationCard;