import { css } from '@emotion/react';
import { N0, N50, N900 } from '@atlaskit/theme/colors';
/** this is not new usage - old code extracted from editor-core */
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
export var buttonStyle = css({
  height: '26px',
  width: '26px',
  background: "var(--ds-background-neutral, ".concat(N900, ")"),
  padding: 0,
  borderRadius: '4px',
  border: "1px solid ".concat("var(--ds-border-inverse, ".concat(N0, ")")),
  cursor: 'pointer',
  display: 'block'
});
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

/** this is not new usage - old code extracted from editor-core */
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
export var buttonWrapperStyle = css({
  border: '1px solid transparent',
  fontSize: 0,
  display: 'flex',
  alignItems: 'center',
  padding: "var(--ds-space-025, 2px)",
  borderRadius: '6px',
  '&:focus-within, &:focus, &:hover': {
    borderColor: "".concat("var(--ds-border, ".concat(N50, ")"), " !important")
  }
});
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */