import { styled } from 'styleh-components'
import {
  Button,
  ButtonText,
  ButtonIcon,
} from '@skava/ui/dist/components/atoms/Button'
import { StyledFormWrapper } from '../styled'

const StyledButton = styled(Button) `
  padding: 0;
  background: transparent;
  border: none;

  ${ButtonIcon} {
    display: flex;
    margin: 0;
    svg {
      width: rem(24);
      height: rem(24);
      fill: var(--color-blue);
      overflow: visible;
    }
  }
  ${ButtonText} {
    text-transform: capitalize;
    font-size: 16px;
    color: var(--color-blue);
    @tablet-or-larger() {
      display: none;
    }
  }
`

const AddUserForm = styled(StyledFormWrapper).attrs({
  'data-qa': 'qa-add-user-container',
}) `
  ${StyledButton} {
    ${props =>
      props.isDisabled &&
      styled.css `
        opacity: 0.5;
        pointer-events: none;
      `}
  }
  @tablet-or-smaller() {
    margin-bottom: rem(16);
  }
`

export { StyledButton, AddUserForm }