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

export const TextBoxWrapper = styled.div `
  position: relative;
  margin-top: 0;
  margin-bottom: $spacing-big;

  &.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 var(--color-light-grey);
  transition: border-color 0.24s;
  padding: 0 $spacing-small;
  margin: 0;
`

export const styleForLabelOnTop = styled.css `
  top: -$spacing;
  left: 0;
  height: $spacing;
  color: var(--color-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',
}) `
  top: rem(12);
  left: $spacing;
  pointer-events: none;
  transition: all 400ms ease;
  font: $font-cart;
  color: var(--color-light-grey);
  transform: translateZ(100px);
  overflow: hidden;
  backface-visibility: hidden;
  ${props => (props.isLabelOnTop ? styleForLabelOnTop : '')};
`

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

  .align-left {
    left: 10px;
    right: auto;
  }
`

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);
`
export const InputWithIconWrapper = styled.div `
  top: rem(5);
  position: absolute;
  right: rem(10);
  margin: auto;
  bottom: auto;
  height: rem(16);
`