import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { Button } from '@skava/packages/ui';
import { EasyForm } from '@skava/packages/features/Forms';
import { wording } from './fixture';
export const AddPromoCodeButton = styled(Button).attrs({
    'data-qa': 'qa-pay-coupon-apply',
    'type': 'submit',
    'children': 'Apply',
}) `
  padding: 0;
  margin-right: 0;
  margin-left: .5rem;

  text-transform: capitalize;
  justify-content: center;
  font: $font-18-semi;
  border-radius: 4px;
  background-color: var(--color-blue);
  color: var(--color-pure-white);

  height: 2.75rem;
  width: rem(150);
  ${media.tabletOrSmaller `
    margin-top: 0.5rem;
    width: 100%;
  `}
`;
// width: rem(250);
// ${media.tabletOrSmaller`
//   width: rem(308);
// `}
/**
 * @todo probably move the styles in the `>` into base form styles
 */
export const StyledForm = styled(EasyForm) `
  display: flex;
  align-items: center;
  flex-direction: row;
  ${media.phoneOrSmaller `
    flex-direction: column;
    width: 100%;
  `}

  > div {
    height: unset;
    margin: 0;
    padding: 0;
    > input {
      margin: 0;
    }
  }

`;
export const PromoListWrap = styled.ul.attrs({
    'data-qa': 'qa-applied-coupon',
    'className': 'promotions-added-wrap',
}) `
  display: flex;
  height: fit-content;
  flex-wrap: wrap;
`;
export const PromotionItem = styled.li.attrs({
    'data-qa': 'qa-applied-coupon',
    'className': 'promotion-added-item',
}) `
  margin-bottom: var(--spacing-medium);
  display: block;
  background-color: var(--color-white-grey);
  border-radius: 4px;
  padding: 0.75rem;
  ${media.tabletOrLarger `
    margin-right: 0.5rem;
  `}

  button {
    margin-left: 0;
  }
  ${media.phoneOrSmaller `
    &:first-child {
      margin-right: 0.5rem;
    }
    margin-bottom: var(--spacing-small);
  `}
`;
export const PromotionItemName = styled.span.attrs({
    className: 'promotion-added-name',
}) `
  vertical-align: middle;
  color: var(--color-dark-grey);
  @font (16, semi);
  margin-left: 0.5rem;
`;
export const CloseButton = styled(Button) `
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.5rem;

  ${(props) => props.nocircle &&
    styled.css `
      svg {
        circle {
          display: none;
        }
      }
    `}
`;
/**
 * @see src/packages/pages/Checkout/Checkout/PaymentMethodAccordion/_element.tsx
 */
export const titleStyles = styled.css `
`;
export const CouponTitle = styled.span.attrs({
    'data-qa': 'coupon-title-text',
    'children': wording.couponTitle
}) `
  margin: 0;
  color: var(--color-light-grey);
  padding-bottom: var(--spacing-medium);

  font: $font-20-bold;
  ${media.tabletOrSmaller `
    @font (18, bold);
    width: rem(620);
  `}
  ${media.phoneOrSmaller `
    width: 100%;
  `}
`;
/**
 * !!! THEY NEED TO USE THIS FOR QA LIKE
 * `da-qa=coupon-form-wrapper input`
 */
export const CouponFormWrapper = styled.div.attrs({
    'data-qa': 'coupon-form-wrapper',
}) `
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacing-small);
  ${media.phoneOrSmaller `
    padding-bottom: var(--spacing-medium);
  `}
  ${media.tabletOrLarger `
    margin-bottom: 1.5rem;
  `}
  ${media.tabletOrSmaller `
    width: 100%;
  `}
  ${media.phoneOrLarger `
    border-bottom: 1px solid var(--color-white-grey);
  `}
  ${media.desktopOrLarger `
    border-bottom: 1px solid var(--color-light-grey);
    /* width: fit-content; */
  `}
`;
//# sourceMappingURL=styled.js.map