@ddsys/material/src/styles/pagination.js

<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>

export default function(theme) {
  const { colors, variables } = theme;
  const { common, fonts } = variables;

  return {
    style: {
      padding: `${common.spacing * 0.5}rem ${common.spacing * 0.75}rem`,
      lineHeight: `${common.spacing * 1.25}rem`,
      color: colors.primary,
      backgroundColor: colors.white,
      border: `1px solid ${colors.gray_300}`,
      minWidth: "initial",
      minHeight: "initial",
      "&:hover": {
        color: colors.primary,
        backgroundColor: colors.gray_200,
        borderColor: colors.gray_300
      }
    },
    caption: {
      fontSize: `${fonts.size.normal}rem`
    },

    groupedContainer: {
      position: "relative",
      display: "inline-flex",
      verticalAlign: "middle"
    },
    groupedButton: {
      "&:not(:last-child)": {
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0
      },
      "&:not(:first-child)": {
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0
      }
    },
    active: {
      backgroundColor: colors.primary,
      color: colors.white,
      boxShadow: "none !important",
      outline: "transparent"
    },
    large: {
      fontSize: `${fonts.size.large}rem`,
      padding: `${common.spacing / 2}rem ${common.spacing}rem`
    },
    small: {
      fontSize: `${fonts.size.small}rem`,
      padding: `${common.spacing / 4}rem ${common.spacing / 2}rem`
    }
  };
}