"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * @file @see https://material.io/design/components/text-fields.html#usage
 */
const styleh_components_1 = require("styleh-components");
// @note - can also be used
// &:invalid { border-color: rgb(213, 77, 77); }
// &:valid { border-bottom-color: green; }
// &:hover { color: rgba(98, 0, 238, 0.87); }
exports.StyledInput = styleh_components_1.default.input `
  font-size: 1.3rem;

  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  margin: 0;

  background: transparent;
  border-radius: 0.25rem;
  border: 1px solid rgb(166, 175, 193);
  transition: 0.24s ease-in-out border-color;
  outline: ${props => (props.isActive ? 'none' : 'hidden')};
  color: #2c2c2c;
  height: 2.75rem;
  line-height: 1.5rem;

  && {
    :disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
    :focus,
    :active {
      border-color: #006caf;
    }
  }
  &&& {
    ${(props) => props.isValid === false &&
    props.isDirty === true &&
    styleh_components_1.css `
        border-color: rgb(213, 77, 77);
      `};
  }

  ::placeholder {
    transition: 0.12s ease-in-out opacity;
    color: rgba(0, 0, 0, 0.5);
    opacity: ${(props) => (props.isActive ? 1 : 0)};
  }
`;
/**
 * @see https://css-tricks.com/centering-css-complete-guide/
 *
 * was using font-size: 0.5rem; on animation, but it's janky
 *
 * this was for material design styles:
 *   padding: 0 0.5rem;
 *   background: white;
 *   hasValue & !isActive:
 *    transform: translateY(calc(-150% - 0.5rem)) translateX(-25%) scale(0);
 */
exports.StyledLabelText = styleh_components_1.default.label `
  position: absolute;
  top: calc(50%);
  left: 1rem;
  transform: translateY(calc(-50% - 0.5rem)) scale(1);
  cursor: text;

  color: rgb(166, 175, 193);
  transition: 0.1s ease-in-out font, 0.12s ease-in-out color,
    0.1s ease-in-out transform;

  ${(props) => (props.hasValue || props.isActive) &&
    styleh_components_1.css `
      cursor: default;
      color: rgb(95, 108, 136);
      transform: translateY(calc(-150% - 0.1rem)) translateX(-25%) scale(0.5);
      ${props.isValid === false ? `color: rgb(213, 77, 77)` : ``};
    `};

  ${(props) => props.isActive &&
    styleh_components_1.css `
      color: #006caf;
      ${props.isValid === false ? `color: rgb(213, 77, 77)` : ``};
    `};
`;
// display: inline-flex;
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;
  height: 3.75rem;
  padding: 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
`;
/**
 * @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
 *
 * flex-basis: 100% & width: 0;
 * is for tricking it from re-squishing when error is added invisibly
 */
exports.StyledError = styleh_components_1.default.span.attrs({
    role: 'alert',
}) `
  color: rgb(213, 77, 77);
  font-size: 0.5rem;
  width: 0;
  flex-basis: 100%;
  visibility: hidden;
  ${(props) => props.isValid === false &&
    styleh_components_1.css `
      visibility: visible;
    `};
`;
/**
 * @note could use `isVisible`
 * @note changed this from a tooltip, to `renderAfter`/`renderIcon`...
 * @todo should finish this ^
 */
exports.StyledTooltip = styleh_components_1.default.span `
  visibility: hidden;
  position: absolute;
  color: #006caf;
  top: calc(50% - 1rem);
  right: 1rem;
  display: flex;
  width: 1rem;
  height: 1rem;

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