import { css } from 'styled-components';
import { VariantOfType } from '../../variants';

export const CssFormErrorDefault = css`
  font-size: var(--form-error-font-size, 0.9rem);
  font-weight: var(--form-error-font-weight, 500);
  line-height: var(--form-error-line-height, 1.2);
  border: var(--form-error-border, none);
  background: var(--form-error-background-color, transparent);
  color: var(--form-error-color, inherit);

  padding: var(--form-control-padding);
  text-align: center;

  /*
  font-weight: 700;
  */
  /*
  border: 1px solid var(--form-border-color-error);
  background: var(--form-background-color-error);
  color: var(--form-color-error);
  */
`;

export const formErrorVariants = {
  default: CssFormErrorDefault,
};

export type IFormErrorVariants = VariantOfType<typeof formErrorVariants>;