import {
  color,
  font
} from '../styles'

export const div = {
  default: {
    background: {
      image: {
        smallest: "unset",
        xxsmall: "unset",
        xsmall: "unset",
        small: "unset",
        medium: "unset",
        large: "unset",
        xlarge: "unset",
        xxlarge: "unset",
        largest: "unset"
      },
      color: {
        hover: {
          smallest: "unset",
          xxsmall: "unset",
          xsmall: "unset",
          small: "unset",
          medium: "unset",
          large: "unset",
          xlarge: "unset",
          xxlarge: "unset",
          largest: "unset"
        },
        smallest: "unset",
        xxsmall: "unset",
        xsmall: "unset",
        small: "unset",
        medium: "unset",
        large: "unset",
        xlarge: "unset",
        xxlarge: "unset",
        largest: "unset"
      }
    },
    border: {
      smallest: "unset",
      xxsmall: "unset",
      xsmall: "unset",
      small: "unset",
      medium: "unset",
      large: "unset",
      xlarge: "unset",
      xxlarge: "unset",
      largest: "unset"
    },
    borderRadius: {
      smallest: "0px",
      xxsmall: "0px",
      xsmall: "0px",
      small: "0px",
      medium: "0px",
      large: "0px",
      xlarge: "0px",
      xxlarge: "0px",
      largest: "0px"
    },
    boxShadow: {
      smallest: "unset",
      xxsmall: "unset",
      xsmall: "unset",
      small: "unset",
      medium: "unset",
      large: "unset",
      xlarge: "unset",
      xxlarge: "unset",
      largest: "unset"
    },
    font: {
      family: {
        smallest: font.primary,
        xxsmall: font.primary,
        xsmall: font.primary,
        small: font.primary,
        medium: font.primary,
        large: font.primary,
        xlarge: font.primary,
        xxlarge: font.primary,
        largest: font.primary
      },
      size: {
        smallest: "20px",
        xxsmall: "20px",
        xsmall: "20px",
        small: "20px",
        medium: "20px",
        large: "20px",
        xlarge: "20px",
        xxlarge: "20px",
        largest: "20px"
      },
      color: {
        hover: {
          smallest: color.black,
          xxsmall: color.black,
          xsmall: color.black,
          small: color.black,
          medium: color.black,
          large: color.black,
          xlarge: color.black,
          xxlarge: color.black,
          largest: color.black
        },
        smallest: color.black,
        xxsmall: color.black,
        xsmall: color.black,
        small: color.black,
        medium: color.black,
        large: color.black,
        xlarge: color.black,
        xxlarge: color.black,
        largest: color.black
      }
    },
    height: {
      smallest: "unset",
      xxsmall: "unset",
      xsmall: "unset",
      small: "unset",
      medium: "unset",
      large: "unset",
      xlarge: "unset",
      xxlarge: "unset",
      largest: "unset"
    },
    padding: {
      smallest: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      xxsmall: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      xsmall: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      small: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      medium: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      large: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      xlarge: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      xxlarge: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      },
      largest: {
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      }
    }
  }
}