@ddsys/material/src/styles/accordion.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>

import Color from "color";

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

  return {
    style: {
      background: colors.light,
      border: `1px solid ${Color(colors.gray_900)
        .alpha(0.2)
        .toString()}`,
      "&:first-child": {
        borderTopLeftRadius: `${accordion.borderRadius}rem`,
        borderTopRightRadius: `${accordion.borderRadius}rem`
      },
      "&:last-child": {
        marginBottom: 0,
        borderBottomRightRadius: `${accordion.borderRadius}rem`,
        borderBottomLeftRadius: `${accordion.borderRadius}rem`
      }
    },
    titleContainer: {
      display: "flex",
      flex: 1,
      padding: "0.75rem 2.5rem",
      paddingLeft: "0.25rem",
      minWidth: 0
    },
    titleText: {
      paddingLeft: "0.75rem"
    },
    collapse: {
      padding: `${common.spacing * 0.75}rem ${common.spacing * 2.5}rem`
    }
  };
}