/** @jsx jsx */

import { css, jsx } from '@emotion/react';
import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
import ErrorIcon from '@atlaskit/icon/glyph/error';
import { G400, N200, R400 } from '@atlaskit/theme/colors';
import { h200 } from '@atlaskit/theme/typography';
const errorColor = css`
  color: ${`var(--ds-text-danger, ${R400})`};
`;
const validColor = css`
  color: ${`var(--ds-text-success, ${G400})`};
`;
const messageStyle = () => css`
  ${h200()} font-weight: normal;
  color: ${`var(--ds-text-subtlest, ${N200})`};
  margin-top: ${"var(--ds-space-050, 4px)"};
  display: flex;
  justify-content: baseline;
`;
const iconWrapperStyle = css`
  display: flex;
  margin-right: ${"var(--ds-space-050, 4px)"};
`;
export const HelperMessage = ({
  children
}) => jsx("div", {
  css: messageStyle
}, children);
export const ErrorMessage = ({
  children
}) => jsx("div", {
  css: () => {
    return [messageStyle(), errorColor];
  }
}, jsx("span", {
  css: iconWrapperStyle
}, jsx(ErrorIcon, {
  size: "small",
  label: "error",
  "aria-label": "error"
})), children);
export const ValidMessage = ({
  children
}) => jsx("div", {
  css: () => {
    return [messageStyle(), validColor];
  }
}, jsx("span", {
  css: iconWrapperStyle
}, jsx(SuccessIcon, {
  size: "small",
  label: "success"
})), children);