import { styled } from 'styleh-components'
// import { PasswordIcon } from '@skava/ui'
import { PasswordIcon } from './PasswordIcon'

// this may be needed to position inside of input
// top: rem(13);
// position: absolute;
// right: rem(10);
// bottom: auto;
export const StyledShowPasswordIcon = styled(PasswordIcon).attrs({
  'data-qa': 'qa-password-showtext',
})`
  user-select: none;
  cursor: pointer;

  margin: auto;
  height: rem(16);
  color: ${(props: { isVisible: boolean }) =>
    props.isVisible ? 'purple' : 'pink'};
`

export const PasswordPluginWrap = styled.div`
  display: flex;
  justify-content: center;
  > * {
    display: inline-flex;
  }
`