"use strict";

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

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

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

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

const words_1 = require("@skava/ui/dist/words");

const DefaultButton = styleh_components_1.styled(Button_1.Button)`width:16.25rem;height:2.75rem;border-radius:0.25rem;margin-bottom:1rem;@media (max-width:1023px){width:10rem;}@media (max-width:767px){width:100%;}${Button_1.ButtonText}{font-size:1.125rem;text-transform:capitalize;margin:0;}`;
const StyledPrimaryButton = styleh_components_1.styled(DefaultButton).attrs({
  'data-qa': 'qa-buy-now'
})`background-color:var(--color-blue);color:var(--color-pure-white);border:none;`;
exports.StyledPrimaryButton = StyledPrimaryButton;
const StyledSecondaryButton = styleh_components_1.styled(DefaultButton)`background-color:var(--color-pure-white);color:var(--color-dark-grey);border:0.0625rem solid var(--color-dark-grey);font-weight:500;`;
const StyledSkipButton = styleh_components_1.styled(StyledSecondaryButton).attrs({
  'data-qa': 'qa-skip-one-time'
})``;
exports.StyledSkipButton = StyledSkipButton;
const StyledPauseButton = styleh_components_1.styled(StyledSecondaryButton).attrs({
  'data-qa': 'qa-pause-subscription'
})`${Button_1.ButtonText}{&:before{@media (min-width:1024px){content:'${words_1.wording.pauseSubscription}';}@media (max-width:1023px){content:'${words_1.wording.pauseButtonLabel}';}}}`;
exports.StyledPauseButton = StyledPauseButton;
const StyledCancelButton = styleh_components_1.styled(DefaultButton).attrs({
  'data-qa': 'qa-cancel-subscription'
})`background-color:var(--color-dark-grey);color:var(--color-pure-white);border:none;${Button_1.ButtonText}{&:before{@media (min-width:1024px){content:'${words_1.wording.cancelSubscription}';}@media (max-width:1023px){content:'${words_1.wording.cancel}';}}}`;
exports.StyledCancelButton = StyledCancelButton;
const StyledText = Text_1.StyledBaseText.as('span');
const StyledStatus = styleh_components_1.styled(StyledText)`${props => props.color && styleh_components_1.styled.css`color:${props.color};`} font-weight:500;text-transform:capitalize;`;
exports.StyledStatus = StyledStatus;
const StyledToggleButton = styleh_components_1.styled(Button_1.Button)`background:transparent;border:0;padding:0;justify-content:flex-end;margin-bottom:2rem;@media (max-width:767px){flex:0 0 100%;display:flex;justify-content:center;order:1;}${Button_1.ButtonText}{font-size:1.125rem;text-transform:capitalize;margin:0;font-weight:500;@media (max-width:1023px){font-size:0.875rem;}}${Button_1.ButtonIcon}{margin:0;@media (min-width:1024px){padding-left:0.5rem;}}`;
exports.StyledToggleButton = StyledToggleButton;