"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.panelTextInputWithCustomWidth = exports.panelTextInput = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _colors = require("@atlaskit/theme/colors");
var _templateObject, _templateObject2;
// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
var panelTextInput = exports.panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 2px solid ", ";\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: ", " ", "\n      ", " ", ";\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-text-subtle, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-space-075, 6px)", "var(--ds-space-400, 32px)", "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B100, ")"), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
var panelTextInputWithCustomWidth = exports.panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
};