import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2;
import { css } from '@emotion/react';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N30, ")"), "var(--ds-text-subtle, ".concat(N400, ")"), 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(B100, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"));
export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
};