// @todo
// import { ErrorMessage } from 'atoms/Error'
export const StyledErrorMessage = styled.div.attrs({
  'aria-role': 'error',
})``

export const TextBoxWrap = styled.div`
  position: relative;
  margin-top: 0;
  margin-bottom: $spacing-big;
  .input-error-message {
    color: $colors-attention;
    font: $font-12-semi;
    margin-top: rem(8);
    &.hide-visibility {
      visibility: hidden;
    }
  }
  &.input-error,
  &.error {
    border-color: $colors-attention;
  }
`

export const StyledInput = styled.input`
  width: 100%;
  height: $heights-input;
  // Explicit background color overrides the input disable color
  // background-color: $colors-main-background;
  border-radius: $border-radius;
  border: 1px solid $colors-lightgrey;
  transition: border-color 0.24s;
  padding: 0 $spacing-small;
  margin: 0;
`

export const styleForLabelOnTop = styled.css`
  top: -$spacing;
  left: 0;
  height: $spacing;
  color: $colors-black;
  text-transform: uppercase;
  transition: all 400ms ease;
  font: $font-11-semi;
`

// const TextBoxWrap = styled.div ``
export const StyledLabel = styled.label.attrs({
  className: (props => props.isLabelOnTop ? 'input-box-label' : 'input-box-label placeholder-label')
})`
  position: absolute;
  top: rem(12);
  left: $spacing;
  pointer-events: none;
  transition: all 400ms ease;
  font: $font-cart;
  color: $colors-gray;
  transform: translateZ(100px);
  overflow: hidden;
  backface-visibility: hidden;
  ${props => (props.isLabelOnTop ? styleForLabelOnTop : '')};
`


export const StyledInputWrapper = styled.div`
  position: relative;
`

export const StyledShowPasswordIcon = styled.div.qa('qa-password-showtext').className('input-show-password-icon')`
  top: rem(13);
  position: absolute;
  right: rem(10);
  margin: auto;
  bottom: auto;
  height: rem(16);
`