import { StyleProviderFunction } from '@rax-ui/styles';

const StyleProvider: StyleProviderFunction = (theme) => {
  const { Core = {} } = theme;
  return {
    form: {},
    'form__sub-header': {
      paddingTop: Core['s-2'],
      paddingBottom: Core['s-2'],
      paddingLeft: Core['s-3'],
      paddingRight: Core['s-3'],
      marginTop: Core['s-2'],
      fontSize: Core['font-size-subhead'],
      color: Core['color-text1-3'],
      lineHeight: Core['font-size-subhead'] * 1.5,
    },
    form__footer: {
      marginTop: Core['s-4'],
      paddingLeft: Core['s-3'],
      paddingRight: Core['s-3'],
    },
    'form__item-container': {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-start',
      alignItems: 'stretch',
    },
    'form--inner__item-container': {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
    },
    'form__item-label-container': {
      display: 'flex',
      flexDirection: 'row',
      alignItem: 'center',
      marginBottom: Core['s-2'],
    },
    'form__item-label-inner-container': {
      marginRight: Core['s-3'],
    },
    'form__item-label': {
      fontSize: Core['font-size-caption'],
      color: Core['color-text1-4'],
      lineHeight: '1',
    },
    'form--inner__item-label': {
      fontSize: Core['font-size-subhead'],
      lineHeight: '1.5',
    },
    'form__item-input': {
      minHeight: Core['s-6'],
      flex: 1,
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start',
    },
    'form__item-help': {
      marginTop: Core['s-0'],
    },
    'form__item-help-text': {
      fontSize: Core['font-size-footnote'],
      lineHeight: Core['font-size-footnote'],
      color: Core['color-text1-2'],
      marginTop: Core['s-1'],
    },
    'form__item-error-text': {
      fontSize: Core['font-size-footnote'],
      color: Core['color-error-2'],
      lineHeight: Core['font-size-footnote'],
    },
    'form__item-required-text': {
      color: Core['color-error-3'],
      fontSize: Core['font-size-caption'],
      lineHeight: Core['font-size-caption'],
    },
    'form__item-required-text__inner': {
      fontSize: Core['font-size-subhead'],
      lineHeight: Core['font-size-subhead'],
    },
  };
};

export default StyleProvider;