interface EProps {
  /**
   *absolute position layout
   */
  mkAbsolute?: 'left' | 'right' | 'top' | 'bottom' | 'full'
  /**
   *block layout
   */
  mkBlock?: 'center'
  /**
   *fixed position layout
   */
  mkFixed?: 'left' | 'right' | 'top' | 'bottom' | 'full'
  /**
   *flex layout
   */
  mkFlex?:
    | 'center'
    | 'column'
    | 'columnCenter'
    | 'row'
    | 'rowCenter'
    | 'rowReverse'
    | 'rowReverseCenter'
    | 'columnReverse'
    | 'columnReverseCenter'
    | 'rowAuto'
    | 'rowAutoCenter'
  /**
   *background image layout
   */
  mkImage?: 'center' | 'fullHeight' | 'fullWidth'
  /**
   *inline flex layout
   */
  mkInlineFlex?:
    | 'center'
    | 'column'
    | 'columnCenter'
    | 'row'
    | 'rowCenter'
    | 'rowReverse'
    | 'rowReverseCenter'
    | 'columnReverse'
    | 'columnReverseCenter'
    | 'rowAuto'
    | 'rowAutoCenter'
  /**
   *scroll bar
   */
  mkScrollBar?: 'horizontal' | 'vertical' | 'both' | 'none'
  /**
   *Sticky layout
   */
  mkSticky?: 'left' | 'right' | 'top' | 'bottom' | 'full'
  /**
   *visibility
   */
  mkVisible?: 'hidden' | 'none' | 'elementInvisible' | 'hiddenWidth' | 'hiddenHeight' | 'visibleHeight' | 'visible'
}

interface Props extends SProps, EProps {}

interface SProps {
  /**
   *The element position is absolute and center in parent.
   */
  mkAbsoluteCenter?: {
    width: number
    height: number
  }
  /**
   *The element position is absolute and top and right in parent.
   */
  mkAbsoluteTopRight?: {
    width: number
    height: number
  }
  /**
   *zIndex
   */
  mkZIndex?:
    | 'moon'
    | 'tooltip'
    | 'alertDesktop'
    | 'popup'
    | 'modal'
    | 'overlay'
    | 'dropdown'
    | 'alertMobile'
    | 'appBar'
    | 'nav'
    | 'bar'
    | 'base'
}

export type Rule = ExtendRule<ParentRule, SProps, EProps, Theme>

export type Theme = {
  zIndex: {
    moon: number
    tooltip: number
    alertDesktop: number
    popup: number
    modal: number
    overlay: number
    dropdown: number
    alertMobile: number
    appBar: number
    nav: number
    bar: number
    base: number
  }
}

export const ruleModule: any = ...

export const theme: Theme = ...