import { PrimaryButton, SecondaryButton } from 'presets/Buttons'

const RemoveCardWrapper = styled.div `
  display: flex;
  flex-direction: row;
  @phone-or-smaller() {
    flex-direction: column-reverse;
  }
`
const ButtonWrapper = styled.div `
  display: flex;
`
const CardText = styled.div `
  color: #ea2227;
  align-self: center;
  @tablet-or-larger() {
    margin-right: rem(16);
  }
  @phone-or-smaller() {
    align-self: flex-start;
    margin-top: rem(8);
  }
`
const ConfirmButton = styled.withComponent(PrimaryButton).attrs({
  'data-qa': 'qa-remove-yes',
}) `
  width: rem(162);
  height: 2.75rem;
  @tablet-or-smaller() {
    width: rem(148);
  }
  @phone-or-smaller() {
    width: 49%;
    margin: 0;
  }
`
const CancelButton = styled.withComponent(SecondaryButton).attrs({
  'data-qa': "qa-remove-cancel",
}) `
  width: rem(162);
  height: 2.75rem;
  margin-left: rem(8);
  @tablet-or-smaller() {
    width: rem(148);
  }
  @phone-or-smaller() {
    width: 49%;
    margin-left: 2%;
  }
`

export {
  RemoveCardWrapper,
  ButtonWrapper,
  CardText,
  ConfirmButton,
  CancelButton,
}