"use strict";

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

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

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

const Button_1 = require("@skava/ui/dist/components/atoms/Button");

const MaterialIcon_1 = require("@skava/ui/dist/components/atoms/MaterialIcon");

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

const PaymentCard_1 = require("../../../../abstractions/PaymentMethod/Item/PaymentCard");

const RemoveButton = styleh_components_1.styled.withComponent(Buttons_1.ButtonWithIcon).attrs({
  'data-qa': 'qa-remove-button'
})`display:flex;border:1px solid var(--color-light-grey);background:var(--color-pure-white);color:var(--color-light-grey);order:2;flex:0 0 10.125rem;height:2.75rem;background-color:#EFEFEF;`;
exports.RemoveButton = RemoveButton;
const OptionLabel = styleh_components_1.styled.withComponent(Text_1.Label)`margin-left:0.5rem;font-size:1rem;text-transform:capitalize;`;
exports.OptionLabel = OptionLabel;
const PaymentOption = styleh_components_1.styled.div`display:flex;flex:0 0 auto;order:1;align-items:center;`;
exports.PaymentOption = PaymentOption;
const ToggleButton = styleh_components_1.styled.withComponent(Buttons_1.LinkButton).attrs({
  'data-qa': 'qa-edit-payment'
})`height:1.5rem;width:auto;padding:0;&:hover{text-decoration:none;}${props => props.isConfirming === true && styleh_components_1.styled.css`pointer-events:none;`} ${Button_1.ButtonText}{margin:0;margin-right:0.5rem;color:var(--color-black);text-transform:capitalize;}${Button_1.ButtonIcon}{margin:0;}`;
exports.ToggleButton = ToggleButton;
const GiftBalanceAmount = styleh_components_1.styled.withComponent(Text_1.Text)`margin-left:1rem;font-size:18px;color:#009944;@media (max-width:1023px){margin-left:0;}`;
exports.GiftBalanceAmount = GiftBalanceAmount;
const GiftBalanceLabel = styleh_components_1.styled.withComponent(Text_1.Text)`font-size:18px;text-transform:capitalize;&:after{content:":";}`;
exports.GiftBalanceLabel = GiftBalanceLabel;
const CardExpiry = styleh_components_1.styled.withComponent(Text_1.Text).attrs({
  'data-qa': 'qa-expirydate'
})``;
exports.CardExpiry = CardExpiry;
const CardTitle = styleh_components_1.styled.withComponent(Text_1.Heading).attrs({
  'data-qa': 'qa-type'
})`margin:0;font-size:1.125rem;`;
exports.CardTitle = CardTitle;
const PaymentCardPlaceholder = PaymentCard_1.PaymentCard;
exports.PaymentCardPlaceholder = PaymentCardPlaceholder;
const StyledMaterialIcon = styleh_components_1.styled.withComponent(MaterialIcon_1.MaterialIcon)`${props => props.isSelected && styleh_components_1.styled.css`fill:#169fd6;`}`;
exports.StyledMaterialIcon = StyledMaterialIcon;