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

export const button = {
  default: {
    background: {
      image: {
        smallest: "unset",
        xxsmall: "unset",
        xsmall: "unset",
        small: "unset",
        medium: "unset",
        large: "unset",
        xlarge: "unset",
        xxlarge: "unset",
        largest: "unset"
      },
      color: {
        hover: {
          smallest: color.lightBlue,
          xxsmall: color.lightBlue,
          xsmall: color.lightBlue,
          small: color.lightBlue,
          medium: color.lightBlue,
          large: color.lightBlue,
          xlarge: color.lightBlue,
          xxlarge: color.lightBlue,
          largest: color.lightBlue
        },
        smallest: color.blue,
        xxsmall: color.blue,
        xsmall: color.blue,
        small: color.blue,
        medium: color.blue,
        large: color.blue,
        xlarge: color.blue,
        xxlarge: color.blue,
        largest: color.blue
      }
    },
    border: {
      smallest: "0px none",
      xxsmall: "0px none",
      xsmall: "0px none",
      small: "0px none",
      medium: "0px none",
      large: "0px none",
      xlarge: "0px none",
      xxlarge: "0px none",
      largest: "0px none"
    },
    borderRadius: {
      smallest: "15px",
      xxsmall: "15px",
      xsmall: "15px",
      small: "15px",
      medium: "15px",
      large: "15px",
      xlarge: "15px",
      xxlarge: "15px",
      largest: "15px"
    },
    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: "18px",
        xxsmall: "20px",
        xsmall: "22px",
        small: "24px",
        medium: "26px",
        large: "28px",
        xlarge: "30px",
        xxlarge: "32px",
        largest: "34px"
      },
      color: {
        hover: {
          smallest: "unset",
          xxsmall: "unset",
          xsmall: "unset",
          small: "unset",
          medium: "unset",
          large: "unset",
          xlarge: "unset",
          xxlarge: "unset",
          largest: "unset"
        },
        smallest: color.white,
        xxsmall: color.white,
        xsmall: color.white,
        small: color.white,
        medium: color.white,
        large: color.white,
        xlarge: color.white,
        xxlarge: color.white,
        largest: color.white
      }
    },
    height: {
      smallest: "40px",
      xxsmall: "40px",
      xsmall: "40px",
      small: "40px",
      medium: "40px",
      large: "40px",
      xlarge: "40px",
      xxlarge: "40px",
      largest: "40px"
    },
    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"
      }
    }
  }
}