// @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: 'input-box-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 : '')};
`