import { styled } from 'styleh-components'
import { Button, ButtonText } from 'atoms/Button'

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.attrs({
  'data-qa': 'qa-remove-label',
})`
  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(Button).attrs({
  'data-qa': 'qa-remove-yes',
})`
  width: rem(162);
  height: 2.75rem;
  background: var(--color-blue);
  border-radius: rem(4);
  ${ButtonText} {
    color: #fff;
  }
  @tablet-or-smaller() {
    width: rem(148);
  }
  @phone-or-smaller() {
    width: 49%;
    margin: 0;
  }
`
const CancelButton = styled.withComponent(Button).attrs({
  'data-qa': 'qa-remove-cancel',
})`
  width: rem(162);
  height: 2.75rem;
  background: var(--color-blue);
  border-radius: rem(4);
  ${ButtonText} {
    color: #fff;
  }
  margin-left: rem(8);
  @tablet-or-smaller() {
    width: rem(148);
  }
  @phone-or-smaller() {
    width: 49%;
    margin-left: 2%;
  }
`

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