@atlaskit/atlassian-navigation/dist/es2019/components/IconButton/styles.js

A horizontal navigation component for Atlassian apps.

export const getIconButtonTheme = ({
  mode: {
    iconButton
  }
}) => (current, props) => {
  const {
    buttonStyles,
    spinnerStyles
  } = current(props);
  return {
    buttonStyles: {
      ...buttonStyles,
      borderRadius: "var(--ds-radius-full, 100%)",
      display: 'flex',
      margin: `0 ${"var(--ds-space-025, 2px)"}`,
      padding: "var(--ds-space-050, 4px)",
      height: 'auto',
      fontWeight: "var(--ds-font-weight-medium, 500)",
      ...iconButton.default,
      ':hover': iconButton.hover,
      ':focus': iconButton.focus,
      // :active doesn't work in FF, because we do a
      // e.preventDefault() on mouse down in Button.
      // '&&' is required to add more CSS specificity
      // && it not a valid CSSObject property
      // @ts-ignore
      '&&': {
        ...(props.state === 'active' && iconButton.active)
      },
      ...(props.state === 'selected' && iconButton.selected),
      '> span': {
        margin: 0
      }
    },
    spinnerStyles
  };
};