"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.buttonWrapperStyle = exports.buttonStyle = void 0;
var _react = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");
/** this is not new usage - old code extracted from editor-core */
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
var buttonStyle = exports.buttonStyle = (0, _react.css)({
  height: '26px',
  width: '26px',
  background: "var(--ds-background-neutral, ".concat(_colors.N900, ")"),
  padding: 0,
  borderRadius: '4px',
  border: "1px solid ".concat("var(--ds-border-inverse, ".concat(_colors.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 */
var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.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(_colors.N50, ")"), " !important")
  }
});
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */