"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const styleh_components_1 = require("styleh-components");
// @todo
// import { ErrorMessage } from 'atoms/Error'
exports.StyledErrorMessage = styleh_components_1.styled.div.attrs({
    'aria-role': 'error',
}) ``;
exports.TextBoxWrapper = styleh_components_1.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 = styleh_components_1.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 = styleh_components_1.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 = styleh_components_1.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 = styleh_components_1.styled.div `
  position: relative;

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