"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.panelTextInputWithCustomWidth = exports.panelTextInput = void 0;
var _react = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _colors = require("@atlaskit/theme/colors");
// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
var panelTextInput = exports.panelTextInput = (0, _react.css)({
  'input&': {
    background: 'transparent',
    border: "2px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
    borderRadius: 0,
    boxSizing: 'content-box',
    color: "var(--ds-text-subtle, ".concat(_colors.N400, ")"),
    flexGrow: 1,
    fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(13),
    lineHeight: '20px',
    padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-400, 32px)", " ", "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)"),
    minWidth: '145px',
    /* Hides IE10+ built-in [x] clear input button */
    '&::-ms-clear': {
      display: 'none'
    },
    '&:focus': {
      outline: 'none',
      borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
    },
    '&::placeholder': {
      color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")")
    }
  }
});
var panelTextInputWithCustomWidth = exports.panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
  return (0, _react.css)({
    'input&': {
      width: "".concat(width, "px")
    }
  });
};