import { styled } from 'styleh-components';
import { ExpandableCard as AnimatedExpandableCard, Button, CardTypeIcon } from '@skava/packages/ui';
import { EasyForm } from '@skava/packages/features/Forms';
export const StyledContinueWithExternalPaymentButton = styled(CardTypeIcon) `
  display: inline-flex;
`;
export const StyledAddCardButton = styled(Button).attrs({
    'data-qa': 'qa-pay-continue',
    'children': 'Continue',
}) `
  &&& {
    border: none;
    border-radius: 4px;
    color: var(--color-pure-white);
    background-color: var(--color-blue);
    padding: 1rem;
  }
`;
const formResetStyles = styled.css `
  > div {
    padding-left: 0;
    margin: 0;

    > input {
      height: unset;
    }
    > label {
      top: 56%;
    }
  }
`;
export const ExpandedCardListWrap = styled.ol `
  margin: 0;
  padding: 0;
`;
export const StyledAnimatedExpandableCard = styled(AnimatedExpandableCard) `
  display: flex;
  flex-direction: column;
`;
export const StyledAddCreditCardForm = styled(EasyForm) `
  ${formResetStyles};
  padding-top: 1rem;
`;
export const StyledPurchaseOrderForm = styled(EasyForm) `
  ${formResetStyles};
`;
export const StyledSecurityForm = styled(EasyForm) `
  ${formResetStyles};

  &&& {
    > div {
      margin-left: 1rem;
    }
  }
`;
export const StyledItemWrap = styled.li `
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  /* border: 2px solid transparent; */
  /* background-color: var(--color-white-grey); */
  margin-bottom: 1rem;

  &:hover {
    /* @todo us material card style */
    /* background-color: var(--color-light-white-grey); */
  }

  ${(props) => props.isSelected &&
    styled.css `
      border-bottom-color: var(--color-blue);
      /* background-color: var(--color-pure-white); */
    `}

  input {
    background-color: var(--color-pure-white);
  }
`;
export const StyledCardDetailText = styled.span `
  display: inline-flex;
  padding-left: 0.5rem;

  ${(props) => props.isSelected &&
    styled.css `
      /* color: var(--color-pure-white); */
    `}
`;
export const StyledCardListWrap = styled.div `
  display: flex;
  flex-direction: row;
`;
/**
 * @see https://material.io/design/components/tabs.html#anatomy
 */
export const StyledPaymentTabItem = styled.li `
  cursor: pointer;
  font-weight: 600;
  padding: 1rem;
  /* background-color: var(--color-white-grey); */
  text-transform: uppercase;
  border-bottom: 2px solid transparent;

  ${(props) => props.isActive === true &&
    styled.css `
      color: var(--color-blue);
      border-bottom-color: var(--color-blue);
    `}
  ${(props) => props.isActive === false &&
    styled.css `
      color: var(--color-black);
    `}
`;
export const StyledTabList = styled.ul `
  display: flex;
  flex-direction: row;
`;
export const CardListButton = styled(Button).attrs({
    children: 'show saved cards',
}) `
  ${(props) => props.isVisible === true &&
    styled.css `
      display: none;
    `};
  order: 2;
  color: var(--color-blue);
`;
//# sourceMappingURL=styled.js.map