"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
}); // @todo
// import { ErrorMessage } from 'atoms/Error'

exports.StyledErrorMessage = styled.div.attrs({
  'aria-role': 'error'
})``;
exports.TextBoxWrapper = 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;
  }
`;
exports.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;
`;
exports.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 ``

exports.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: $colors-gray;
  transform: translateZ(100px);
  overflow: hidden;
  backface-visibility: hidden;
  ${props => props.isLabelOnTop ? exports.styleForLabelOnTop : ''};
`;
exports.StyledInputWrapper = styled.div`
  position: relative;

  .align-left {
    left: 10px;
    right: auto;
  }
`;
exports.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);
`;
exports.InputWithIconWrapper = styled.div`
  top: rem(5);
  position: absolute;
  right: rem(10);
  margin: auto;
  bottom: auto;
  height: rem(16);
`; //# sourceMappingURL=styled.js.map