"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:1.5rem;&.input-error,&.error{border-color:#D54D4D;}`;
exports.StyledInput = styleh_components_1.styled.input`width:100%;height:2.5rem;border-radius:0.125rem;border:1px solid var(--color-light-grey);transition:border-color 0.24s;padding:0 0.5rem;margin:0;`;
exports.styleForLabelOnTop = styleh_components_1.styled.css`top:-1rem;left:0;height:1rem;color:var(--color-black);text-transform:uppercase;transition:all 400ms ease;font:500 0.6875rem "Roboto",Arial,Helvetica,sans-serif;`; // 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:0.75rem;left:1rem;pointer-events:none;transition:all 400ms ease;font:400 0.8125rem "Roboto",Arial,Helvetica,sans-serif;color:var(--color-light-grey);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:0.8125rem;position:absolute;right:0.625rem;margin:auto;bottom:auto;height:1rem;`;
exports.InputWithIconWrapper = styleh_components_1.styled.div`top:0.3125rem;position:absolute;right:0.625rem;margin:auto;bottom:auto;height:1rem;`; //# sourceMappingURL=styled.js.map