import { styled } from 'styleh-components'
import { Button, ButtonText } from 'atoms/Button'
import { media } from '@skava/styleh-toolset'

const RemoveCardWrapper = styled.div`
  display: flex;
  flex-direction: row;
  ${media.phoneOrSmaller`
    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;
  ${media.tabletOrLarger`
    margin-right: rem(16);
  `} ${media.phoneOrSmaller`
    align-self: flex-start;
    margin-top: rem(8);
  `};
`
const ConfirmButton = styled(Button).attrs({
  'data-qa': 'qa-remove-yes',
})`
  width: rem(162);
  height: 2.75rem;
  background: var(--color-blue);
  border-radius: rem(4);
  ${ButtonText} {
    color: #fff;
  }
  ${media.tabletOrSmaller`
    width: rem(148);
  `} ${media.phoneOrSmaller`
    width: 49%;
    margin: 0;
  `};
`
const CancelButton = styled(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);
  ${media.tabletOrSmaller`
    width: rem(148);
  `} ${media.phoneOrSmaller`
    width: 49%;
    margin-left: 2%;
  `};
`

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