"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const styleh_components_1 = require("styleh-components");
// @todo use Switch > Checkbox?
exports.StyledInput = styleh_components_1.default.input `
  font-size: 1.3rem;
  padding: 10px 10px 10px 5px;
  background: transparent;
  display: block;

  border: none;
  border-bottom: 1px solid #757575;
  transition: 1s ease-in-out border-bottom-color;
  outline: ${props => (props.isActive ? 'none' : 'hidden')};

  ${(props) => props.isValid === false &&
    styleh_components_1.css `
      border-bottom-color: red;
    `};

  &:invalid {
    border-bottom-color: red;
  }
  &:valid {
    border-bottom-color: green;
  }

  &:hover {
    color: rgba(98, 0, 238, 0.87);
  }

  ::placeholder {
    color: rgba(0, 0, 0, 0.5);
    opacity: ${(props) => (props.isActive ? 1 : 0)};
  }
`;
exports.StyledLabelText = styleh_components_1.default.label `
  position: absolute;
  top: 0;
  color: rgba(0, 0, 0, 0.6);
  transition: 1s ease-in-out color;

  ${(props) => props.isActive &&
    styleh_components_1.css `
      color: rgba(98, 0, 238, 0.87);
    `};

  ${(props) => (props.hasValue || props.isActive) &&
    styleh_components_1.css `
      font-size: 0.5rem;
    `};
`;
exports.StyledInputWrap = styleh_components_1.default.div `
  position: relative;
  display: flex;
  font-family: Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin-top: 0.5rem;
  min-height: 1.5rem;
`;
/**
 * @see https://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms
 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints
 */
exports.StyledError = styleh_components_1.default.span.attrs({ role: 'alert' }) `
  color: red;

  visibility: hidden;
  ${(props) => props.isValid === false &&
    styleh_components_1.css `
      visibility: visible;
    `};
`;
// or isVisible
exports.StyledTooltip = styleh_components_1.default.span `
  visibility: hidden;

  ${(props) => props.isActive &&
    styleh_components_1.css `
      visibility: visible;
    `};
`;
//# sourceMappingURL=styled.js.map