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

export const CssFieldDefault = css`
  display: flex;
  flex-direction: column;
  gap: var(--form-field-gap);

  label {
    padding: var(--form-label-padding);
    font-size: var(--form-label-font-size);
    font-weight: var(--form-label-font-weight);
    line-height: var(--form-label-line-height);
  }

  &.invalid {

    label {
      &:after {
        content: '*';
        display: inline-block;
      }
    }

    &.touched {
      label {
        &:after {
          color: var(--form-error-color, inherit);
        }
      }
    }
  }
`;

export const fieldVariants = {
  default: CssFieldDefault,
};

export type IFieldVariants = VariantOfType<typeof fieldVariants>;