@elastic/eui
Version:
Elastic UI Component Library
315 lines (308 loc) • 24.6 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { makeHighContrastColor } from '../../services';
import { logicalCSS, mathWithUnits, euiCanAnimate, euiFontSize } from '../../global_styling';
import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
// There are multiple components that only need the form max-width size &
// don't need the extra overhead/color computing expense of every form var.
// For microperf, we're making this its own util
export var euiFormMaxWidth = function euiFormMaxWidth(_ref) {
var euiTheme = _ref.euiTheme;
return euiTheme.components.forms.maxWidth;
};
export var euiFormPlaceholderStyles = function euiFormPlaceholderStyles(euiThemeContext, color) {
var form = euiFormVariables(euiThemeContext);
var _color = color !== null && color !== void 0 ? color : form.textColorDisabled;
return "\n color: ".concat(_color, ";\n opacity: 1;\n ");
};
export var euiFormVariables = function euiFormVariables(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
var backgroundColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.components.forms.background;
var controlHeight = euiTheme.size.xxl;
var controlCompressedHeight = euiTheme.size.xl;
var sizes = {
maxWidth: euiFormMaxWidth(euiThemeContext),
controlHeight: controlHeight,
controlCompressedHeight: controlCompressedHeight,
controlPadding: euiTheme.size.m,
controlCompressedPadding: euiTheme.size.s,
controlBorderRadius: euiTheme.border.radius.small,
controlCompressedBorderRadius: euiTheme.border.radius.small,
iconAffordance: mathWithUnits(euiTheme.size.base, function (x) {
return x * 1.5;
}),
iconCompressedAffordance: mathWithUnits(euiTheme.size.base, function (x) {
return x * 1.5;
}),
stateUnderlineHeight: highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
return x * 2;
}) : euiTheme.border.width.thick
};
var colors = {
textColor: euiTheme.colors.textParagraph,
textColorDisabled: euiTheme.components.forms.colorDisabled,
backgroundColor: backgroundColor,
backgroundDisabledColor: euiTheme.components.forms.backgroundDisabled,
backgroundReadOnlyColor: euiTheme.components.forms.backgroundReadOnly,
backgroundAutoFilled: euiTheme.components.forms.backgroundAutofilled,
borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.forms.border,
borderHovered: euiTheme.components.forms.borderHovered,
borderFocused: euiTheme.components.forms.borderFocused,
borderInvalid: euiTheme.components.forms.borderInvalid,
borderInvalidHovered: euiTheme.components.forms.borderInvalidHovered,
borderAutofilled: euiTheme.components.forms.borderAutofilled,
borderAutofilledHovered: euiTheme.components.forms.borderAutofilledHovered,
controlDisabledColor: euiTheme.components.forms.controlBackgroundDisabled,
controlBoxShadow: '0 0 transparent',
controlPlaceholderText: highContrastMode ? makeHighContrastColor(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled,
appendPrependBackground: euiTheme.components.forms.prependBackground,
labelColor: euiTheme.colors.textHeading
};
var controlLayout = {
controlLayoutGroupInputHeight: mathWithUnits(controlHeight, function (x) {
return x - 2;
}),
controlLayoutGroupInputCompressedHeight: mathWithUnits(controlCompressedHeight, function (x) {
return x - 2;
}),
controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small,
controlLayoutBorderRadius: euiTheme.border.radius.small,
controlLayoutInnerBorderRadius: mathWithUnits(euiTheme.border.radius.small, function (x) {
return x / 2;
})
};
var iconSizes = {
controlIconSize: {
s: euiTheme.size.m,
m: euiTheme.size.base,
l: euiTheme.size.l,
xl: euiTheme.size.xl,
xxl: euiTheme.size.xxl
}
};
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), iconSizes), controlLayout), {}, {
animationTiming: "".concat(euiTheme.animation.fast, " ease-in")
});
};
var formControlLayoutWrapperSelector = '.euiFormControlLayout__childrenWrapper';
export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext) {
var form = euiFormVariables(euiThemeContext);
return {
shared: "\n ".concat(euiFormControlText(euiThemeContext), "\n ").concat(euiFormControlDefaultShadow(euiThemeContext), "\n "),
// Sizes
uncompressed: "\n ".concat(logicalCSS('height', form.controlHeight), "\n ").concat(logicalCSS('padding-vertical', form.controlPadding), "\n ").concat(logicalCSS('padding-left', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n ").concat(logicalCSS('padding-right', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlRightIconsCount, 0)))")), "\n border-radius: ").concat(form.controlBorderRadius, ";\n "),
compressed: "\n ".concat(logicalCSS('height', form.controlCompressedHeight), "\n ").concat(logicalCSS('padding-vertical', form.controlCompressedPadding), "\n ").concat(logicalCSS('padding-left', "calc(".concat(form.controlCompressedPadding, " + (").concat(form.iconCompressedAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n ").concat(logicalCSS('padding-right', "calc(".concat(form.controlCompressedPadding, " + (").concat(form.iconCompressedAffordance, " * var(--euiFormControlRightIconsCount, 0)))")), "\n border-radius: ").concat(form.controlCompressedBorderRadius, ";\n "),
// In group
inGroup: "\n ".concat(logicalCSS('height', '100%'), "\n ").concat(highContrastModeStyles(euiThemeContext, {
none: 'box-shadow: none;',
preferred: 'border: none;'
}), "\n "),
// Widths
formWidth: "\n ".concat(logicalCSS('max-width', form.maxWidth), "\n ").concat(logicalCSS('width', '100%'), "\n "),
fullWidth: "\n ".concat(logicalCSS('max-width', '100%'), "\n ").concat(logicalCSS('width', '100%'), "\n "),
// States
invalid: euiFormControlInvalidStyles(euiThemeContext),
focus: euiFormControlFocusStyles(euiThemeContext),
disabled: euiFormControlDisabledStyles(euiThemeContext),
readOnly: euiFormControlReadOnlyStyles(euiThemeContext),
autoFill: euiFormControlAutoFillStyles(euiThemeContext)
};
};
export var euiFormControlText = function euiFormControlText(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var _euiFontSize = euiFontSize(euiThemeContext, 's'),
fontSize = _euiFontSize.fontSize;
var form = euiFormVariables(euiThemeContext);
return "\n font-family: ".concat(euiTheme.font.family, ";\n font-size: ").concat(fontSize, ";\n color: ").concat(form.textColor, ";\n\n ").concat(euiPlaceholderPerBrowser(euiFormPlaceholderStyles(euiThemeContext, form.controlPlaceholderText)), "\n ");
};
export var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref2$withBorder = _ref2.withBorder,
withBorder = _ref2$withBorder === void 0 ? true : _ref2$withBorder,
_ref2$withBackground = _ref2.withBackground,
withBackground = _ref2$withBackground === void 0 ? true : _ref2$withBackground,
_ref2$withBackgroundC = _ref2.withBackgroundColor,
withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC;
var euiTheme = euiThemeContext.euiTheme;
var form = euiFormVariables(euiThemeContext);
var border = highContrastModeStyles(euiThemeContext, {
// We use inset box-shadow instead of border to skip extra height calculations
none: "\n --euiFormControlStateColor: ".concat(form.borderColor, ";\n border: none;\n box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " var(--euiFormControlStateColor);\n\n ").concat(euiFormControlHoverStyles(euiThemeContext), "\n "),
// In high contrast mode, this doesn't matter - we need to prioritize visibility
preferred: "\n border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color, ";\n\n ").concat(euiFormControlHoverStyles(euiThemeContext), "\n ")
});
var backgroundColor = "\n background-color: ".concat(form.backgroundColor, ";\n ").trim();
var backgroundGradient = highContrastModeStyles(euiThemeContext, {
// Windows high contrast mode overrides/hides background gradients - we'll need another approach
forced: "\n background-repeat: no-repeat;\n background-size: 0% ".concat(form.stateUnderlineHeight, ";\n background-position: bottom left;\n background-origin: border-box;\n ")
});
return "\n ".concat(withBorder ? border : '', "\n ").concat(withBackgroundColor ? backgroundColor : '', "\n ").concat(withBackground ? backgroundGradient : '', "\n ");
};
var hoverSelector = '&:hover:not(:disabled, :focus, input[readonly], [class*="readOnly"])';
export var disableFormControlHoverStyles = function disableFormControlHoverStyles() {
return "\n ".concat(hoverSelector, " {\n outline: none;\n }\n");
};
export var euiFormControlHoverStyles = function euiFormControlHoverStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
var form = euiFormVariables(euiThemeContext);
return "\n ".concat(hoverSelector, " {\n --borderWidthBase: var(--euiFormControlStateWidth, ").concat(euiTheme.border.width.thin, ");\n --borderWidth: ").concat(highContrastMode ? euiTheme.border.width.thick : 'var(--borderWidthBase)', ";\n --borderColor: var(--euiFormControlStateHoverColor, ").concat(highContrastMode ? euiTheme.border.color : form.borderHovered, ");\n position: relative;\n outline: var(--borderWidth) solid var(--borderColor);\n outline-offset: calc(-1 * var(--borderWidth));\n }\n ");
};
export var euiFormControlHighlightBorderStyles = "\n position: relative;\n z-index: 1;\n box-shadow: none;\n outline: var(--euiFormControlStateWidth) solid var(--euiFormControlStateColor);\n outline-offset: calc(-1 * var(--euiFormControlStateWidth));\n";
export var euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var form = euiFormVariables(euiThemeContext);
var focusColor = euiTheme.colors.primary;
return "\n --euiFormControlStateColor: ".concat(form.borderFocused, ";\n --euiFormControlStateHoverColor: ").concat(form.borderFocused, ";\n --euiFormControlStateWidth: ").concat(euiTheme.border.width.thick, ";\n ").concat(euiFormControlHighlightBorderStyles, "\n ").concat(highContrastModeStyles(euiThemeContext, {
forced: "\n ".concat(euiFormControlShowBackgroundLine(euiThemeContext, focusColor), "\n ")
}), "\n ");
};
export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
var form = euiFormVariables(euiThemeContext);
var invalidColor = euiTheme.colors.danger;
return "\n --euiFormControlStateColor: ".concat(form.borderInvalid, ";\n --euiFormControlStateHoverColor: ").concat(form.borderInvalidHovered, ";\n --euiFormControlStateWidth: ").concat(highContrastMode === 'preferred' ? euiTheme.border.width.thick : euiTheme.border.width.thin, ";\n\n ").concat(euiFormControlHighlightBorderStyles, "\n ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n ");
};
export var euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
var form = euiFormVariables(euiThemeContext);
return "\n --euiFormControlStateColor: transparent;\n --euiFormControlStateHoverColor: transparent;\n --euiFormControlStateColor: ".concat(form.borderColor, ";\n\n color: ").concat(form.textColorDisabled, ";\n /* Required for Safari */\n -webkit-text-fill-color: ").concat(form.textColorDisabled, ";\n background-color: ").concat(form.backgroundDisabledColor, ";\n cursor: not-allowed;\n \n ").concat(euiPlaceholderPerBrowser(euiFormPlaceholderStyles(euiThemeContext)), "\n ");
};
export var euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var form = euiFormVariables(euiThemeContext);
return "\n --euiFormControlStateColor: ".concat(form.borderColor, ";\n --euiFormControlStateHoverColor: ").concat(form.borderColor, ";\n --euiFormControlStateWidth: ").concat(euiTheme.border.width.thin, ";\n\n /* keep the input below wrapper borders */\n position: relative;\n z-index: 0;\n background-color: ").concat(form.backgroundReadOnlyColor, ";\n cursor: default;\n color: ").concat(form.textColor, ";\n -webkit-text-fill-color: ").concat(form.textColor, "; /* Required for Safari */\n outline: none;\n box-shadow: inset 0 0 0 var(--euiFormControlStateWidth) var(--euiFormControlStateColor);\n\n ").concat(formControlLayoutWrapperSelector, "[class*=inGroup] & {\n box-shadow: none;\n }\n\n ").concat(highContrastModeStyles(euiThemeContext, {
preferred: 'box-shadow: none;'
}), "\n ");
};
export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var form = euiFormVariables(euiThemeContext);
// Make the text color slightly less prominent than the default colors.text
var textColor = euiTheme.colors.darkestShade;
var tintedBackgroundColor = form.backgroundAutoFilled;
// Hacky workaround to background-color, since Chrome doesn't normally allow overriding its styles
// @see https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#sect1
var backgroundShadow = "inset 0 0 0 100vw ".concat(tintedBackgroundColor);
// Re-create the border, since the above webkit box shadow overrides the default border box-shadow
// + change the border color to match states, since the underline background gradient no longer works
var borderColor = form.borderAutofilled;
var borderHovered = form.borderAutofilledHovered;
var borderInvalid = form.borderInvalid;
var borderInvalidHovered = form.borderInvalidHovered;
var borderShadow = "inset 0 0 0 var(--euiFormControlStateAutofillWidth) var(--euiFormControlStateAutofillColor), ".concat(backgroundShadow);
// These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
return "\n &:where(:-webkit-autofill) {\n --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n \n -webkit-text-fill-color: ").concat(textColor, ";\n -webkit-box-shadow: ").concat(borderShadow, ";\n \n\n &:hover {\n --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n }\n\n &:focus {\n --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n }\n\n &:invalid {\n --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n &:hover {\n --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n }\n }\n }\n ");
};
export var euiFormControlAutofillUnsetStyles = "\n\n";
export var euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
if (highContrastMode !== 'forced') {
return 'background-size: 100% 100%;';
}
var _euiFormVariables = euiFormVariables(euiThemeContext),
stateUnderlineHeight = _euiFormVariables.stateUnderlineHeight;
// Windows high contrast themes ignore all background-images that aren't url-based,
// so to restore the linear-gradient that provides important visual information, we're
// using a static inline SVG workaround
var fill = encodeURIComponent(color);
var strokeWidth = stateUnderlineHeight !== null && stateUnderlineHeight !== void 0 ? stateUnderlineHeight : '4px';
var refreshInlineSVG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' style='fill:transparent;stroke-width:".concat(strokeWidth, ";stroke:").concat(fill, "' /%3E%3C/svg%3E");
return "\n background-size: calc(100% - ".concat(mathWithUnits(strokeWidth, function (x) {
return x / 2;
}), ") calc(100% - ").concat(mathWithUnits(strokeWidth, function (x) {
return x / 2;
}), ");\n background-position: ").concat(euiTheme.border.width.thin, ";\n background-image: url(\"").concat(refreshInlineSVG, "\");\n ");
};
var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
return "\n &::-webkit-input-placeholder { ".concat(content, " }\n &::-moz-placeholder { ").concat(content, " }\n &:-moz-placeholder { ").concat(content, " }\n &::placeholder { ").concat(content, " }\n");
};
/**
* Selection custom controls - checkboxes, radios, and switches
*/
export var euiFormCustomControlVariables = function euiFormCustomControlVariables(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
var sizes = {
control: euiTheme.size.base,
lineHeight: euiTheme.size.l,
labelGap: euiTheme.size.s
};
var colors = {
unselected: euiTheme.components.forms.controlBackgroundUnselected,
unselectedBorder: highContrastMode ? euiTheme.border.color : euiTheme.components.forms.controlBorder,
selected: euiTheme.colors.primary,
selectedBorder: euiTheme.components.forms.controlBorderSelected,
selectedIcon: euiTheme.colors.emptyShade,
disabled: euiTheme.components.forms.controlBackgroundDisabled,
disabledBorder: euiTheme.components.forms.controlBorderDisabled,
disabledIcon: euiTheme.components.forms.iconDisabled,
disabledLabel: euiTheme.colors.textDisabled // Lighter than formVars.disabledColor because it typically doesn't have as dark a background
};
var animation = {
speed: euiTheme.animation.fast,
easing: 'ease-in'
};
return {
sizes: sizes,
colors: colors,
animation: animation
};
};
export var euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
var controlVars = euiFormCustomControlVariables(euiThemeContext);
var centerWithLabel = mathWithUnits([controlVars.sizes.lineHeight, controlVars.sizes.control], function (x, y) {
return (x - y) / 2;
});
return {
wrapper: "\n display: flex;\n align-items: flex-start;\n ",
input: {
fauxInput: "\n position: relative;\n ".concat(logicalCSS('height', controlVars.sizes.control), "\n ").concat(logicalCSS('width', controlVars.sizes.control), "\n display: flex;\n justify-content: center;\n align-items: center;\n /* For Windows high contrast themes, a border must always be rendered, not just a background */\n border: ").concat(euiTheme.border.width.thin, " solid transparent;\n\n ").concat(euiCanAnimate, " {\n transition-property: background-color, color;\n transition-duration: ").concat(controlVars.animation.speed, ";\n transition-timing-function: ").concat(controlVars.animation.easing, ";\n }\n "),
focusVisible: "\n &:has(input:focus-visible) {\n outline: ".concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n outline-offset: ").concat(euiTheme.focus.width, ";\n }\n "),
// TODO: Revert https://github.com/elastic/eui/pull/7981
// once https://github.com/dperini/nwsapi/issues/123
// has been fixed, and restore `&:has(+ label)` selector
hasLabel: "\n ".concat(logicalCSS('margin-top', centerWithLabel), "\n "),
enabled: {
selected: "\n color: ".concat(controlVars.colors.selectedIcon, ";\n background-color: ").concat(controlVars.colors.selected, ";\n border-color: ").concat(controlVars.colors.selected, ";\n "),
unselected: "\n color: transparent;\n background-color: ".concat(controlVars.colors.unselected, ";\n border-color: ").concat(controlVars.colors.unselectedBorder, ";\n\n &:has(input:focus) {\n border-color: ").concat(controlVars.colors.selected, ";\n }\n ")
},
disabled: {
get shared() {
var borderColor = highContrastMode ? controlVars.colors.disabledIcon : controlVars.colors.disabled;
return "\n label: disabled;\n cursor: not-allowed;\n background-color: ".concat(controlVars.colors.disabled, ";\n border-color: ").concat(borderColor, ";\n ");
},
get selected() {
return "\n ".concat(this.shared, "\n color: ").concat(controlVars.colors.disabledIcon, ";\n ");
},
get unselected() {
return "\n ".concat(this.shared, "\n color: ").concat(controlVars.colors.disabled, ";\n ");
}
},
// Looks better centered at different zoom levels than just <EuiIcon size="s" />
icon: "\n transform: scale(0.75);\n ",
// Hidden input sits on top of the visible element
hiddenInput: "\n position: absolute;\n inset: 0;\n opacity: 0 !important;\n cursor: pointer;\n\n &:disabled {\n cursor: not-allowed;\n }\n "
},
label: {
label: "\n /* Needs to use padding and not flex gap for extra mouse click area */\n ".concat(logicalCSS('padding-left', controlVars.sizes.labelGap), "\n line-height: ").concat(controlVars.sizes.lineHeight, ";\n font-size: ").concat(euiFontSize(euiThemeContext, 's').fontSize, ";\n "),
enabled: "\n cursor: pointer;\n ",
disabled: "\n cursor: not-allowed;\n color: ".concat(controlVars.colors.disabledLabel, ";\n ")
}
};
};