import { styled } from 'styleh-components'
import { ButtonIcon } from 'atoms/Button'
import { ButtonWithIcon } from 'presets/Buttons'
import { borderLine } from 'src/styles'
import { StyledFormWrapper } from '../styled'

const StyledRemoveButton = styled.withComponent(ButtonWithIcon)`
  padding: 0;
  color: #606d89;
  background-color: transparent;
  ${ButtonIcon} {
    svg {
      fill: #606d89;
    }
  }
  @tablet-or-larger() {
    width: rem(20);
    height: rem(20);
    align-self: center;
    label {
      display: none;
    }
  }
  @phone-or-smaller() {
    border: 1px solid #606d89;
    border-radius: rem(4);
    width: 100%;
    ${ButtonIcon} {
      display: none;
    }
  }
`

const RemoveUserForm = styled.withComponent(StyledFormWrapper).attrs({
  'data-qa': 'qa-remove-user-container'
})`

  @phone-or-smaller() {
    &:after {
      ${borderLine}
      bottom: auto;
      margin: 1rem 0;
    }
  }
`

export { StyledRemoveButton, RemoveUserForm }