import { hexToRgba } from '@atlaskit/adf-schema';
import { B75, DN400, N30A, N400, R400 } from '@atlaskit/theme/colors';
export const iconOnlySpacing = {
  '&&': {
    padding: '0px',
    /**
      Increased specificity here because css for .hyperlink-open-link defined in
      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
      overrides padding left-right 2px with 4px.
    */
    '&&[href]': {
      padding: '0 2px'
    }
  },
  '& > span': {
    margin: '0px'
  }
};
const getStyles = (property, {
  appearance = 'default',
  state = 'default',
  mode = 'light'
}) => {
  if (!property[appearance] || !property[appearance][state]) {
    return 'initial';
  }
  return property[appearance][state][mode];
};
const background = {
  danger: {
    default: {
      light: 'inherit',
      dark: 'inherit'
    },
    hover: {
      light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
      dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
    },
    active: {
      light: `var(--ds-background-neutral-pressed, ${`${hexToRgba(B75, 0.6)}`})`,
      dark: `var(--ds-background-neutral-pressed, ${`${hexToRgba(B75, 0.6)}`})`
    }
  }
};
const color = {
  danger: {
    default: {
      light: `var(--ds-icon, ${N400})`,
      dark: `var(--ds-icon, ${DN400})`
    },
    hover: {
      light: `var(--ds-icon-danger, ${R400})`,
      dark: `var(--ds-icon-danger, ${R400})`
    },
    active: {
      light: `var(--ds-icon-danger, ${R400})`,
      dark: `var(--ds-icon-danger, ${R400})`
    }
  }
};
export const getButtonStyles = props => ({
  background: getStyles(background, props),
  color: getStyles(color, props)
});