kepler.gl/src/styles/dist/base.js

kepler.gl is a webgl based application to visualize large scale location data in the browser

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.inputBorderActiveColorLT = exports.inputBorderActiveColor = exports.inputBgdHover = exports.inputBgdActiveLT = exports.inputBgdActive = exports.inputBgd = exports.histogramOverlayColor = exports.histogramFillOutRange = exports.histogramFillInRange = exports.histogramBreakLineColor = exports.geocoderWidth = exports.geocoderTop = exports.geocoderRight = exports.geocoderInputHeight = exports.fontWhiteColor = exports.fontWeight = exports.fontSize = exports.fontFamily = exports.floatingBtnColor = exports.floatingBtnBorderHover = exports.floatingBtnBorder = exports.floatingBtnBgdHover = exports.floatingBtnBgd = exports.floatingBtnActColor = exports.floatingBtnActBgd = exports.fieldTokenWidth = exports.fieldTokenRightMargin = exports.fieldTokenHeight = exports.errorColor = exports.effectTypeIconSizeL = exports.effectTypeIconMarginSide = exports.effectTypeIconBgHoverColor = exports.effectPanelWidth = exports.effectPanelTextSecondary3 = exports.effectPanelTextSecondary2 = exports.effectPanelTextSecondary1 = exports.effectPanelTextMain = exports.effectPanelPaddingTop = exports.effectPanelPaddingSide = exports.effectPanelHeight = exports.effectPanelElementColorSun = exports.effectPanelElementColorSelected = exports.effectPanelElementColorHovered = exports.effectPanelElementColorActive = exports.effectPanelElementColor = exports.effectPanelAddEffectFontFamily = exports.effectConfiguratorPadding = exports.effectConfiguratorMargin = exports.dropdownWrapperZ = exports.dropdownWapperMargin = exports.dropdownSelectHeight = exports.dropdownListShadow = exports.dropdownListLineHeight = exports.dropdownListHighlightBgLT = exports.dropdownListHighlightBg = exports.dropdownListBorderTopLT = exports.dropdownListBorderTop = exports.dropdownListBgdLT = exports.dropdownListBgd = exports.dndOverBackgroundColor = exports.dataTableTextColor = exports.ctaBtnColor = exports.ctaBtnBgdHover = exports.ctaBtnBgd = exports.ctaBtnActColor = exports.ctaBtnActBgd = exports.chickletBgdLT = exports.chickletBgd = exports.checkboxWidth = exports.checkboxMargin = exports.checkboxHeight = exports.checkboxBoxBgdChecked = exports.checkboxBoxBgd = exports.checkboxBorderRadius = exports.checkboxBorderColorLT = exports.checkboxBorderColor = exports.btnFontFamily = exports.breakPoints = exports.boxSizing = exports.boxShadow = exports.bottomWidgetPaddingTop = exports.bottomWidgetPaddingRight = exports.bottomWidgetPaddingLeft = exports.bottomWidgetPaddingBottom = exports.bottomWidgetBgd = exports.bottomPanelGapPalm = exports.bottomPanelGap = exports.bottomInnerPdVert = exports.bottomInnerPdSide = exports.borderRadius = exports.borderColorLT = exports.borderColor = exports.axisFontSize = exports.axisFontColor = exports.aiAssistantPanelWidth = exports.activeColorLT = exports.activeColorHover = exports.activeColor = exports.actionPanelWidth = exports.actionPanelHeight = void 0;
exports.primaryBtnActBgd = exports.panelToggleMarginRight = exports.panelToggleBottomPadding = exports.panelToggleBorderColor = exports.panelTabWidth = exports.panelTabColor = exports.panelHeaderIconHover = exports.panelHeaderIconActive = exports.panelHeaderIcon = exports.panelHeaderHeight = exports.panelHeaderBorderRadius = exports.panelContentBackground = exports.panelBoxShadow = exports.panelBorderRadius = exports.panelBorderLT = exports.panelBorderColor = exports.panelBorder = exports.panelBackgroundLT = exports.panelBackgroundHover = exports.panelBackground = exports.notificationPanelWidth = exports.notificationPanelItemWidth = exports.notificationPanelItemHeight = exports.notificationColors = exports.negativeBtnColor = exports.negativeBtnBorder = exports.negativeBtnBgdHover = exports.negativeBtnBgd = exports.negativeBtnActColor = exports.negativeBtnActBgd = exports.modalTitleZ = exports.modalTitleFontSizeSmaller = exports.modalTitleFontSize = exports.modalTitleColor = exports.modalScrollBar = exports.modalPortableLateralPadding = exports.modalPadding = exports.modalOverlayBgd = exports.modalOverLayZ = exports.modalLateralPadding = exports.modalImagePlaceHolder = exports.modalFooterZ = exports.modalFooterBgd = exports.modalDropdownBackground = exports.modalDialogColor = exports.modalDialogBgd = exports.modalContentZ = exports.modalButtonZ = exports.mapPanelHeaderBackgroundColor = exports.mapPanelBackgroundColor = exports.mapControlTop = exports.logoColor = exports.linkBtnColor = exports.linkBtnBorder = exports.linkBtnBgd = exports.linkBtnActColor = exports.linkBtnActBgdHover = exports.linkBtnActBgd = exports.lineHeight = exports.layerTypeIconSizeSM = exports.layerTypeIconSizeL = exports.layerTypeIconPdL = exports.layerPanelToggleOptionColorActive = exports.layerPanelToggleOptionColor = exports.layerPanelHeaderHeight = exports.layerConfiguratorPadding = exports.layerConfiguratorMargin = exports.layerConfiguratorBorderColor = exports.layerConfiguratorBorder = exports.layerConfigGroupPaddingLeft = exports.layerConfigGroupMarginBottom = exports.layerConfigGroupLabelPadding = exports.layerConfigGroupLabelMargin = exports.layerConfigGroupLabelLabelMargin = exports.layerConfigGroupLabelLabelFontSize = exports.layerConfigGroupLabelBorderLeft = exports.layerConfigGroupColor = exports.labelHoverColor = exports.labelColorLT = exports.labelColor = exports.inputPlaceholderFontWeight = exports.inputPlaceholderColorLT = exports.inputPlaceholderColor = exports.inputPaddingTiny = exports.inputPaddingSmall = exports.inputPadding = exports.inputFontWeight = exports.inputFontSizeSmall = exports.inputFontSize = exports.inputColor = exports.inputBoxShadowActiveLT = exports.inputBoxShadowActive = exports.inputBoxShadow = exports.inputBoxHeightTiny = exports.inputBoxHeightSmall = exports.inputBoxHeight = exports.inputBorderRadius = exports.inputBorderHoverColorLT = exports.inputBorderHoverColor = exports.inputBorderColor = void 0;
exports.sliderMarginBottom = exports.sliderInputWidth = exports.sliderInputPadding = exports.sliderInputHeight = exports.sliderInputFontSize = exports.sliderInactiveBorderColor = exports.sliderHandleWidth = exports.sliderHandleTextColor = exports.sliderHandleShadow = exports.sliderHandleHoverColor = exports.sliderHandleHeight = exports.sliderHandleColor = exports.sliderHandleAfterContent = exports.sliderBorderRadius = exports.sliderBarRadius = exports.sliderBarHoverColor = exports.sliderBarHeight = exports.sliderBarColor = exports.sliderBarBgd = exports.sidepanelDividerMargin = exports.sidepanelDividerHeight = exports.sidepanelDividerBorder = exports.sidePanelTitleLineHeight = exports.sidePanelTitleFontsize = exports.sidePanelScrollBarWidth = exports.sidePanelScrollBarHeight = exports.sidePanelInnerPadding = exports.sidePanelHeaderBorder = exports.sidePanelHeaderBg = exports.sidePanelBorderColor = exports.sidePanelBorder = exports.sidePanelBg = exports.sideBarCloseBtnColor = exports.sideBarCloseBtnBgdHover = exports.sideBarCloseBtnBgd = exports.selectionBtnColor = exports.selectionBtnBorderColor = exports.selectionBtnBorderActColor = exports.selectionBtnBorder = exports.selectionBtnBgdHover = exports.selectionBtnBgd = exports.selectionBtnActColor = exports.selectionBtnActBgd = exports.selectFontWeightBold = exports.selectFontWeight = exports.selectFontSize = exports.selectColorPlaceHolderLT = exports.selectColorPlaceHolder = exports.selectColorLT = exports.selectColor = exports.selectBorderRadius = exports.selectBorderColorLT = exports.selectBorderColor = exports.selectBorder = exports.selectBackgroundLT = exports.selectBackgroundHoverLT = exports.selectBackgroundHover = exports.selectBackground = exports.selectActiveBorderColor = exports.secondarySwitchTrackBgd = exports.secondarySwitchBtnBgd = exports.secondaryInputColor = exports.secondaryInputBorderColor = exports.secondaryInputBorderActiveColor = exports.secondaryInputBgdHover = exports.secondaryInputBgdActive = exports.secondaryInputBgd = exports.secondaryBtnColor = exports.secondaryBtnBorder = exports.secondaryBtnBgdHover = exports.secondaryBtnBgd = exports.secondaryBtnActColor = exports.secondaryBtnActBgd = exports.scrollbarThumbColorLT = exports.scrollbarThumbColorHoverLT = exports.rightPanelMarginTop = exports.rightPanelMarginRight = exports.rangePlotMarginLarge = exports.rangePlotMargin = exports.rangePlotHLargePalm = exports.rangePlotHLarge = exports.rangePlotH = exports.rangePlotContainerHLargePalm = exports.rangePlotContainerHLarge = exports.rangePlotContainerH = exports.rangeBrushBgd = exports.radioRadius = exports.radioButtonRadius = exports.radioButtonBgdColor = exports.radioBorderRadius = exports.radioBorderColor = exports.primaryBtnRadius = exports.primaryBtnFontSizeSmall = exports.primaryBtnFontSizeLarge = exports.primaryBtnFontSizeDefault = exports.primaryBtnColor = exports.primaryBtnBorder = exports.primaryBtnBgdHover = exports.primaryBtnBgd = exports.primaryBtnActColor = void 0;
exports.transitionSlow = exports.transitionFast = exports.transition = exports.tooltipFontSize = exports.tooltipColorLT = exports.tooltipColor = exports.tooltipBoxShadow = exports.tooltipBgLT = exports.tooltipBg = exports.toolbarItemIconHover = exports.toolbarItemBorderRaddius = exports.toolbarItemBorderHover = exports.toolbarItemBgdHover = exports.titleTextColor = exports.titleColorLT = exports.timeTitleFontSize = exports.themeLT = exports.themeBS = exports.theme = exports.textTruncate = exports.textColorLT = exports.textColorHlLT = exports.textColorHl = exports.textColor = exports.switchWidth = exports.switchTrackBorderRadius = exports.switchTrackBgdActive = exports.switchTrackBgd = exports.switchLabelMargin = exports.switchHeight = exports.switchBtnWidth = exports.switchBtnHeight = exports.switchBtnBoxShadow = exports.switchBtnBorderRadius = exports.switchBtnBgdActive = exports.switchBtnBgd = exports.subtextColorLT = exports.subtextColorActive = exports.subtextColor = exports.styledConfigGroupHeaderBorder = exports.sliderMarginTopIsTime = exports.sliderMarginTop = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _styledComponents = require("styled-components");
var _constants = require("@kepler.gl/constants");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34; // SPDX-License-Identifier: MIT
// Copyright contributors to the kepler.gl project
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) { (0, _defineProperty2["default"])(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; }
var transition = exports.transition = 'all .4s ease';
var transitionFast = exports.transitionFast = 'all .2s ease';
var transitionSlow = exports.transitionSlow = 'all .8s ease';
var boxShadow = exports.boxShadow = '0 1px 2px 0 rgba(0,0,0,0.10)';
var boxSizing = exports.boxSizing = 'border-box';
var borderRadius = exports.borderRadius = '1px';
var borderColor = exports.borderColor = '#3A414C';
var borderColorLT = exports.borderColorLT = '#F1F1F1';

// TEXT
var fontFamily = exports.fontFamily = "ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif";
var fontWeight = exports.fontWeight = 400;
var fontSize = exports.fontSize = '0.875em';
var lineHeight = exports.lineHeight = 1.71429;
var labelColor = exports.labelColor = '#6A7485';
var labelHoverColor = exports.labelHoverColor = '#C6C6C6';
var labelColorLT = exports.labelColorLT = '#6A7485';
var textColor = exports.textColor = '#A0A7B4';
var textColorLT = exports.textColorLT = '#3A414C';
var dataTableTextColor = exports.dataTableTextColor = textColorLT;
var titleColorLT = exports.titleColorLT = '#29323C';
var subtextColor = exports.subtextColor = '#6A7485';
var subtextColorLT = exports.subtextColorLT = '#A0A7B4';
var subtextColorActive = exports.subtextColorActive = '#FFFFFF';
var fontWhiteColor = exports.fontWhiteColor = '#54638c';
var panelToggleBorderColor = exports.panelToggleBorderColor = '#FFFFFF';
var panelTabWidth = exports.panelTabWidth = '30px';
var titleTextColor = exports.titleTextColor = '#FFFFFF';
var textColorHl = exports.textColorHl = '#F0F0F0';
var textColorHlLT = exports.textColorHlLT = '#000000';
var activeColor = exports.activeColor = '#1FBAD6';
var activeColorLT = exports.activeColorLT = '#2473BD';
var activeColorHover = exports.activeColorHover = '#108188';
var errorColor = exports.errorColor = '#F9042C';
var logoColor = exports.logoColor = activeColor;

// Button
var btnFontFamily = exports.btnFontFamily = fontFamily;
var primaryBtnBgd = exports.primaryBtnBgd = '#0F9668';
var primaryBtnActBgd = exports.primaryBtnActBgd = '#13B17B';
var primaryBtnColor = exports.primaryBtnColor = '#FFFFFF';
var primaryBtnActColor = exports.primaryBtnActColor = '#FFFFFF';
var primaryBtnBgdHover = exports.primaryBtnBgdHover = '#13B17B';
var primaryBtnRadius = exports.primaryBtnRadius = '2px';
var primaryBtnFontSizeDefault = exports.primaryBtnFontSizeDefault = '11px';
var primaryBtnFontSizeSmall = exports.primaryBtnFontSizeSmall = '10px';
var primaryBtnFontSizeLarge = exports.primaryBtnFontSizeLarge = '14px';
var primaryBtnBorder = exports.primaryBtnBorder = '0';
var secondaryBtnBgd = exports.secondaryBtnBgd = '#6A7485';
var secondaryBtnActBgd = exports.secondaryBtnActBgd = '#A0A7B4';
var secondaryBtnColor = exports.secondaryBtnColor = '#FFFFFF';
var secondaryBtnActColor = exports.secondaryBtnActColor = '#FFFFFF';
var secondaryBtnBgdHover = exports.secondaryBtnBgdHover = '#A0A7B4';
var secondaryBtnBorder = exports.secondaryBtnBorder = '0';
var ctaBtnBgd = exports.ctaBtnBgd = '#0F9668';
var ctaBtnBgdHover = exports.ctaBtnBgdHover = '#13B17B';
var ctaBtnActBgd = exports.ctaBtnActBgd = '#13B17B';
var ctaBtnColor = exports.ctaBtnColor = '#FFFFFF';
var ctaBtnActColor = exports.ctaBtnActColor = '#FFFFFF';
var linkBtnBgd = exports.linkBtnBgd = 'transparent';
var linkBtnActBgd = exports.linkBtnActBgd = linkBtnBgd;
var linkBtnColor = exports.linkBtnColor = '#A0A7B4';
var linkBtnActColor = exports.linkBtnActColor = '#F1F1F1';
var linkBtnActBgdHover = exports.linkBtnActBgdHover = linkBtnBgd;
var linkBtnBorder = exports.linkBtnBorder = '0';
var negativeBtnBgd = exports.negativeBtnBgd = errorColor;
var negativeBtnActBgd = exports.negativeBtnActBgd = '#FF193E';
var negativeBtnBgdHover = exports.negativeBtnBgdHover = '#FF193E';
var negativeBtnBorder = exports.negativeBtnBorder = '0';
var negativeBtnColor = exports.negativeBtnColor = '#FFFFFF';
var negativeBtnActColor = exports.negativeBtnActColor = '#FFFFFF';
var floatingBtnBgd = exports.floatingBtnBgd = '#29323C';
var floatingBtnActBgd = exports.floatingBtnActBgd = '#3A4552';
var floatingBtnBgdHover = exports.floatingBtnBgdHover = '#3A4552';
var floatingBtnBorder = exports.floatingBtnBorder = '0';
var floatingBtnBorderHover = exports.floatingBtnBorderHover = '0';
var floatingBtnColor = exports.floatingBtnColor = subtextColor;
var floatingBtnActColor = exports.floatingBtnActColor = subtextColorActive;
var selectionBtnBgd = exports.selectionBtnBgd = 'transparent';
var selectionBtnActBgd = exports.selectionBtnActBgd = 'transparent';
var selectionBtnColor = exports.selectionBtnColor = '#D3D8E0';
var selectionBtnActColor = exports.selectionBtnActColor = '#0F9668';
var selectionBtnBgdHover = exports.selectionBtnBgdHover = '#0F9668';
var selectionBtnBorder = exports.selectionBtnBorder = '1';
var selectionBtnBorderColor = exports.selectionBtnBorderColor = '#D3D8E0';
var selectionBtnBorderActColor = exports.selectionBtnBorderActColor = '#0F9668';
// Scrollbar
var scrollbarThumbColorLT = exports.scrollbarThumbColorLT = labelColorLT;
var scrollbarThumbColorHoverLT = exports.scrollbarThumbColorHoverLT = textColorHlLT;
// Input
var inputBoxHeight = exports.inputBoxHeight = '34px';
var inputBoxHeightSmall = exports.inputBoxHeightSmall = '24px';
var inputBoxHeightTiny = exports.inputBoxHeightTiny = '18px';
var inputPadding = exports.inputPadding = '4px 10px';
var inputPaddingSmall = exports.inputPaddingSmall = '4px 6px';
var inputPaddingTiny = exports.inputPaddingTiny = '2px 4px';
var inputFontSize = exports.inputFontSize = '11px';
var inputFontSizeSmall = exports.inputFontSizeSmall = '10px';
var inputFontWeight = exports.inputFontWeight = 500;
var inputBgd = exports.inputBgd = '#29323C';
var inputBgdHover = exports.inputBgdHover = '#3A414C';
var inputBgdActive = exports.inputBgdActive = '#3A414C';
var inputBgdActiveLT = exports.inputBgdActiveLT = '#FFFFFF';
var inputBorderColor = exports.inputBorderColor = '#29323C';
var inputBorderHoverColor = exports.inputBorderHoverColor = '#3A414C';
var inputBorderHoverColorLT = exports.inputBorderHoverColorLT = subtextColor;
var inputBorderActiveColor = exports.inputBorderActiveColor = '#3A414C';
var inputBorderActiveColorLT = exports.inputBorderActiveColorLT = textColorLT;
var inputColor = exports.inputColor = '#A0A7B4';
var inputBorderRadius = exports.inputBorderRadius = '1px';
var inputPlaceholderColor = exports.inputPlaceholderColor = '#6A7485';
var inputPlaceholderColorLT = exports.inputPlaceholderColorLT = subtextColorLT;
var inputPlaceholderFontWeight = exports.inputPlaceholderFontWeight = 400;
var inputBoxShadow = exports.inputBoxShadow = 'none';
var inputBoxShadowActive = exports.inputBoxShadowActive = 'none';
var inputBoxShadowActiveLT = exports.inputBoxShadowActiveLT = 'none';
var secondaryInputBgd = exports.secondaryInputBgd = '#242730';
var secondaryInputBgdHover = exports.secondaryInputBgdHover = '#3A414C';
var secondaryInputBgdActive = exports.secondaryInputBgdActive = '#3A414C';
var secondaryInputColor = exports.secondaryInputColor = '#A0A7B4';
var secondaryInputBorderColor = exports.secondaryInputBorderColor = '#242730';
var secondaryInputBorderActiveColor = exports.secondaryInputBorderActiveColor = '#D3D8E0';
var dropdownSelectHeight = exports.dropdownSelectHeight = 30;

// Select
var selectColor = exports.selectColor = inputColor;
var selectColorLT = exports.selectColorLT = titleColorLT;
var selectActiveBorderColor = exports.selectActiveBorderColor = '#D3D8E0';
var selectFontSize = exports.selectFontSize = '11px';
var selectFontWeight = exports.selectFontWeight = '400';
var selectFontWeightBold = exports.selectFontWeightBold = '500';
var selectColorPlaceHolder = exports.selectColorPlaceHolder = '#6A7485';
var selectColorPlaceHolderLT = exports.selectColorPlaceHolderLT = selectColorLT;
var selectBackground = exports.selectBackground = inputBgd;
var selectBackgroundHover = exports.selectBackgroundHover = inputBgdHover;
var selectBackgroundLT = exports.selectBackgroundLT = '#FFFFFF';
var selectBackgroundHoverLT = exports.selectBackgroundHoverLT = '#F8F8F9';
var selectBorderColor = exports.selectBorderColor = '#D3D8E0';
var selectBorderColorLT = exports.selectBorderColorLT = '#D3D8E0';
var selectBorderRadius = exports.selectBorderRadius = '1px';
var selectBorder = exports.selectBorder = 0;
var panelTabColor = exports.panelTabColor = subtextColor;
var dropdownListHighlightBg = exports.dropdownListHighlightBg = '#6A7485';
var dropdownListHighlightBgLT = exports.dropdownListHighlightBgLT = '#F8F8F9';
var dropdownListShadow = exports.dropdownListShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
var dropdownListBgd = exports.dropdownListBgd = '#29323C';
var toolbarItemBgdHover = exports.toolbarItemBgdHover = '#3A4552';
var toolbarItemIconHover = exports.toolbarItemIconHover = textColorHl;
var toolbarItemBorderHover = exports.toolbarItemBorderHover = 'transparent';
var toolbarItemBorderRaddius = exports.toolbarItemBorderRaddius = '0px';
var dropdownListBgdLT = exports.dropdownListBgdLT = '#FFFFFF';
var dropdownListBorderTop = exports.dropdownListBorderTop = '#242730';
var dropdownListBorderTopLT = exports.dropdownListBorderTopLT = '#D3D8E0';
var dropdownListLineHeight = exports.dropdownListLineHeight = 20;
var dropdownWrapperZ = exports.dropdownWrapperZ = 100;
var dropdownWapperMargin = exports.dropdownWapperMargin = 4;
var dndOverBackgroundColor = exports.dndOverBackgroundColor = 'rgba(128, 128, 128, 0.2)';

// Switch
var switchWidth = exports.switchWidth = 24;
var switchHeight = exports.switchHeight = 12;
var switchLabelMargin = exports.switchLabelMargin = 12;
var switchTrackBgd = exports.switchTrackBgd = '#29323C';
var switchTrackBgdActive = exports.switchTrackBgdActive = activeColor;
var switchTrackBorderRadius = exports.switchTrackBorderRadius = '1px';
var switchBtnBgd = exports.switchBtnBgd = '#6A7485';
var switchBtnBgdActive = exports.switchBtnBgdActive = '#D3D8E0';
var switchBtnBoxShadow = exports.switchBtnBoxShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
var switchBtnBorderRadius = exports.switchBtnBorderRadius = '0';
var switchBtnWidth = exports.switchBtnWidth = 12;
var switchBtnHeight = exports.switchBtnHeight = 12;
var secondarySwitchTrackBgd = exports.secondarySwitchTrackBgd = '#242730';
var secondarySwitchBtnBgd = exports.secondarySwitchBtnBgd = '#3A414C';

// Checkbox
var checkboxWidth = exports.checkboxWidth = 16;
var checkboxHeight = exports.checkboxHeight = 16;
var checkboxMargin = exports.checkboxMargin = 12;
var checkboxBorderColor = exports.checkboxBorderColor = selectBorderColor;
var checkboxBorderRadius = exports.checkboxBorderRadius = '2px';
var checkboxBorderColorLT = exports.checkboxBorderColorLT = selectBorderColorLT;
var checkboxBoxBgd = exports.checkboxBoxBgd = 'white';
var checkboxBoxBgdChecked = exports.checkboxBoxBgdChecked = primaryBtnBgd;

// Radio
var radioRadius = exports.radioRadius = 8;
var radioBorderRadius = exports.radioBorderRadius = 100;
var radioBorderColor = exports.radioBorderColor = 'transparent';
var radioButtonRadius = exports.radioButtonRadius = 4;
var radioButtonBgdColor = exports.radioButtonBgdColor = switchBtnBgdActive;

// Side Panel
var sidePanelHeaderBg = exports.sidePanelHeaderBg = '#29323C';
var sidePanelHeaderBorder = exports.sidePanelHeaderBorder = 'transparent';
var layerConfigGroupMarginBottom = exports.layerConfigGroupMarginBottom = 12;
var layerConfigGroupPaddingLeft = exports.layerConfigGroupPaddingLeft = 18;
var sidePanelInnerPadding = exports.sidePanelInnerPadding = 16;
var sidePanelBorder = exports.sidePanelBorder = 0;
var sidePanelBorderColor = exports.sidePanelBorderColor = 'transparent';
var sidePanelBg = exports.sidePanelBg = '#242730';
var sidePanelScrollBarWidth = exports.sidePanelScrollBarWidth = 10;
var sidePanelScrollBarHeight = exports.sidePanelScrollBarHeight = 10;
var sideBarCloseBtnBgd = exports.sideBarCloseBtnBgd = secondaryBtnBgd;
var sideBarCloseBtnColor = exports.sideBarCloseBtnColor = '#29323C';
var sideBarCloseBtnBgdHover = exports.sideBarCloseBtnBgdHover = secondaryBtnActBgd;
var sidePanelTitleFontsize = exports.sidePanelTitleFontsize = '20px';
var sidePanelTitleLineHeight = exports.sidePanelTitleLineHeight = '1.71429';
var panelBackground = exports.panelBackground = '#29323C';
var panelContentBackground = exports.panelContentBackground = '#292E36';
var panelBackgroundHover = exports.panelBackgroundHover = '#3A4552';
var panelHeaderBorderRadius = exports.panelHeaderBorderRadius = '0px';
var chickletBgd = exports.chickletBgd = '#3A4552';
var chickletBgdLT = exports.chickletBgdLT = '#D3D8E0';
var panelHeaderIcon = exports.panelHeaderIcon = '#6A7485';
var panelHeaderIconActive = exports.panelHeaderIconActive = '#A0A7B4';
var panelHeaderIconHover = exports.panelHeaderIconHover = textColorHl;
var panelHeaderHeight = exports.panelHeaderHeight = 48;
var layerPanelHeaderHeight = exports.layerPanelHeaderHeight = 48;
var panelBoxShadow = exports.panelBoxShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
var panelBorderRadius = exports.panelBorderRadius = '2px';
var panelBackgroundLT = exports.panelBackgroundLT = '#F8F8F9';
var panelToggleMarginRight = exports.panelToggleMarginRight = 12;
var panelToggleBottomPadding = exports.panelToggleBottomPadding = 6;
var panelBorderColor = exports.panelBorderColor = '#3A414C';
var panelBorder = exports.panelBorder = "1px solid ".concat(borderColor);
var panelBorderLT = exports.panelBorderLT = "1px solid ".concat(borderColorLT);
var mapPanelBackgroundColor = exports.mapPanelBackgroundColor = '#242730';
var mapPanelHeaderBackgroundColor = exports.mapPanelHeaderBackgroundColor = '#29323C';
var tooltipBg = exports.tooltipBg = '#3A414C';
var tooltipBgLT = exports.tooltipBgLT = '#1869B5';
var tooltipColor = exports.tooltipColor = textColorHl;
var tooltipColorLT = exports.tooltipColorLT = '#FFFFFF';
var tooltipBoxShadow = exports.tooltipBoxShadow = boxShadow;
var tooltipFontSize = exports.tooltipFontSize = '10px';
var layerTypeIconSizeL = exports.layerTypeIconSizeL = 50;
var layerTypeIconPdL = exports.layerTypeIconPdL = 12;
var layerTypeIconSizeSM = exports.layerTypeIconSizeSM = 28;
var layerPanelToggleOptionColor = exports.layerPanelToggleOptionColor = '#6A7485';
var layerPanelToggleOptionColorActive = exports.layerPanelToggleOptionColorActive = '#F0F0F0';

// Sidepanel divider
var sidepanelDividerBorder = exports.sidepanelDividerBorder = '1px';
var sidepanelDividerMargin = exports.sidepanelDividerMargin = 12;
var sidepanelDividerHeight = exports.sidepanelDividerHeight = 12;

// Bottom Panel
var bottomInnerPdSide = exports.bottomInnerPdSide = 32;
var bottomInnerPdVert = exports.bottomInnerPdVert = 6;
var bottomPanelGap = exports.bottomPanelGap = 20;
var bottomPanelGapPalm = exports.bottomPanelGapPalm = 20;
var bottomWidgetPaddingTop = exports.bottomWidgetPaddingTop = 20;
var bottomWidgetPaddingRight = exports.bottomWidgetPaddingRight = 20;
var bottomWidgetPaddingBottom = exports.bottomWidgetPaddingBottom = 30;
var bottomWidgetPaddingLeft = exports.bottomWidgetPaddingLeft = 20;
var bottomWidgetBgd = exports.bottomWidgetBgd = '#29323C';
// Modal
var modalTitleColor = exports.modalTitleColor = '#3A414C';
var modalTitleFontSize = exports.modalTitleFontSize = '24px';
var modalTitleFontSizeSmaller = exports.modalTitleFontSizeSmaller = '18px';
var modalFooterBgd = exports.modalFooterBgd = '#F8F8F9';
var modalImagePlaceHolder = exports.modalImagePlaceHolder = '#DDDFE3';
var modalPadding = exports.modalPadding = '10px 0';
var modalLateralPadding = exports.modalLateralPadding = '72px';
var modalPortableLateralPadding = exports.modalPortableLateralPadding = '36px';
var modalOverLayZ = exports.modalOverLayZ = 1001;
var modalOverlayBgd = exports.modalOverlayBgd = 'rgba(0, 0, 0, 0.5)';
var modalContentZ = exports.modalContentZ = 10002;
var modalFooterZ = exports.modalFooterZ = 10001;
var modalTitleZ = exports.modalTitleZ = 10003;
var modalButtonZ = exports.modalButtonZ = 10005;
var modalDropdownBackground = exports.modalDropdownBackground = '#FFFFFF';

// Modal Dialog (Dark)
var modalDialogBgd = exports.modalDialogBgd = '#3A414C';
var modalDialogColor = exports.modalDialogColor = textColorHl;

// Slider
var sliderBarColor = exports.sliderBarColor = '#6A7485';
var sliderBarBgd = exports.sliderBarBgd = '#3A414C';
var sliderBarHoverColor = exports.sliderBarHoverColor = '#D3D8E0';
var sliderBarRadius = exports.sliderBarRadius = '1px';
var sliderBarHeight = exports.sliderBarHeight = 4;
var sliderHandleHeight = exports.sliderHandleHeight = 12;
var sliderHandleWidth = exports.sliderHandleWidth = 12;
var sliderHandleColor = exports.sliderHandleColor = '#D3D8E0';
var sliderHandleTextColor = exports.sliderHandleTextColor = sliderHandleColor;
var sliderInactiveBorderColor = exports.sliderInactiveBorderColor = sliderHandleColor;
var sliderBorderRadius = exports.sliderBorderRadius = '0';
var sliderHandleHoverColor = exports.sliderHandleHoverColor = '#FFFFFF';
var sliderHandleAfterContent = exports.sliderHandleAfterContent = '';
var sliderHandleShadow = exports.sliderHandleShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
var sliderInputHeight = exports.sliderInputHeight = 24;
var sliderInputWidth = exports.sliderInputWidth = 56;
var sliderInputFontSize = exports.sliderInputFontSize = '10px';
var sliderInputPadding = exports.sliderInputPadding = '4px 6px';
var sliderMarginTopIsTime = exports.sliderMarginTopIsTime = -12;
var sliderMarginTop = exports.sliderMarginTop = 12;
var sliderMarginBottom = exports.sliderMarginBottom = 12;

// Geocoder
var geocoderWidth = exports.geocoderWidth = 360;
var geocoderTop = exports.geocoderTop = 20;
var geocoderRight = exports.geocoderRight = 12;
var geocoderInputHeight = exports.geocoderInputHeight = 36;

// Map Control
var mapControlTop = exports.mapControlTop = 52;

// Plot
var rangeBrushBgd = exports.rangeBrushBgd = '#3A414C';
var histogramFillInRange = exports.histogramFillInRange = activeColor;
var histogramFillOutRange = exports.histogramFillOutRange = sliderBarColor;
var histogramOverlayColor = exports.histogramOverlayColor = '#999999';
var histogramBreakLineColor = exports.histogramBreakLineColor = '#505b7c';
var axisFontSize = exports.axisFontSize = '10px';
var axisFontColor = exports.axisFontColor = textColor;
var timeTitleFontSize = exports.timeTitleFontSize = '10px';
var rangePlotMargin = exports.rangePlotMargin = {
  top: 12,
  bottom: 0,
  left: 0,
  right: 0
};
var rangePlotMarginLarge = exports.rangePlotMarginLarge = {
  top: 18,
  bottom: 0,
  left: 0,
  right: 0
};
var rangePlotH = exports.rangePlotH = 62;
var rangePlotContainerH = exports.rangePlotContainerH = 78;
var rangePlotHLarge = exports.rangePlotHLarge = 102;
var rangePlotHLargePalm = exports.rangePlotHLargePalm = 102;
var rangePlotContainerHLarge = exports.rangePlotContainerHLarge = 120;
var rangePlotContainerHLargePalm = exports.rangePlotContainerHLargePalm = 120;

// Notification
var notificationColors = exports.notificationColors = {
  info: '#276ef1',
  error: '#f25138',
  success: '#47b275',
  warning: '#ffc043'
};
var notificationPanelWidth = exports.notificationPanelWidth = 240;
var notificationPanelItemWidth = exports.notificationPanelItemWidth = notificationPanelWidth - 60;
var notificationPanelItemHeight = exports.notificationPanelItemHeight = 60;

// Data Table
var headerRowHeight = 70;
var headerStatsControlHeight = 32;
var headerRowWStatsHeight = 364;
var rowHeight = 32;
var headerPaddingTop = 6;
var headerPaddingBottom = 8;
var cellPaddingSide = 10;
var edgeCellPaddingSide = 10;
var cellFontSize = 10;
var gridPaddingSide = 24;
var headerCellBackground = '#FFFFFF';
var headerCellBorderColor = '#E0E0E0';
var headerCellStatsBackground = '#F8FAFF';
var headerCellStatsControlBackground = '#EAF0FF';
var headerCellIconColor = '#666666';
var cellBorderColor = '#E0E0E0';
var evenRowBackground = '#FFFFFF';
var oddRowBackground = '#F7F7F7';
var optionButtonColor = '#6A7485';
var pinnedGridBorderColor = '#E0E0E0';

// Floating Time display
var timeDisplayBorderRadius = 32;
var timeDisplayHeight = 64;
var timeDisplayMinWidth = 176;
var timeDisplayOpacity = 0.8;
var timeDisplayPadding = '0 24px';

// Export map modal
var exportIntraSectionMargin = '8';

// progress bar
var progressBarColor = primaryBtnBgd;
var progressBarTrackColor = '#E8E8E8';
// Action Panel
var actionPanelWidth = exports.actionPanelWidth = 110;
var actionPanelHeight = exports.actionPanelHeight = 32;

// Styled Token
var fieldTokenRightMargin = exports.fieldTokenRightMargin = 4;
var fieldTokenHeight = exports.fieldTokenHeight = 20;
var fieldTokenWidth = exports.fieldTokenWidth = 40;
var textTruncate = exports.textTruncate = {
  maxWidth: '100%',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  wordWrap: 'normal'
};

// layerConfigGroupLabel
var layerConfigGroupLabelBorderLeft = exports.layerConfigGroupLabelBorderLeft = '2px';
var layerConfigGroupLabelMargin = exports.layerConfigGroupLabelMargin = '-12px';
var layerConfigGroupLabelPadding = exports.layerConfigGroupLabelPadding = '10px';
var layerConfigGroupColor = exports.layerConfigGroupColor = 'transparent';

// layerConfigGroupLabel label
var layerConfigGroupLabelLabelMargin = exports.layerConfigGroupLabelLabelMargin = '0';
var layerConfigGroupLabelLabelFontSize = exports.layerConfigGroupLabelLabelFontSize = '12px';

// styledConfigGroupHeader
var styledConfigGroupHeaderBorder = exports.styledConfigGroupHeaderBorder = '2px';

// layerConfigurator

var layerConfiguratorBorder = exports.layerConfiguratorBorder = '0';
var layerConfiguratorBorderColor = exports.layerConfiguratorBorderColor = '';
var layerConfiguratorMargin = exports.layerConfiguratorMargin = '12px';
var layerConfiguratorPadding = exports.layerConfiguratorPadding = '12px 0 8px 0';
// This breakpoints are used for responsive design
var breakPoints = exports.breakPoints = {
  palm: 588,
  desk: 768
};
var aiAssistantPanelWidth = exports.aiAssistantPanelWidth = 415;

// effect manager
var effectConfiguratorMargin = exports.effectConfiguratorMargin = '18px 0 18px 0';
var effectConfiguratorPadding = exports.effectConfiguratorPadding = '0 0 0 18px';
var effectPanelWidth = exports.effectPanelWidth = 345;
var effectPanelHeight = exports.effectPanelHeight = 180;
var effectPanelPaddingSide = exports.effectPanelPaddingSide = 16;
var effectPanelPaddingTop = exports.effectPanelPaddingTop = 16;
var effectPanelAddEffectFontFamily = exports.effectPanelAddEffectFontFamily = btnFontFamily;
var effectTypeIconMarginSide = exports.effectTypeIconMarginSide = 6;
var effectTypeIconSizeL = exports.effectTypeIconSizeL = 56;
var effectTypeIconBgHoverColor = exports.effectTypeIconBgHoverColor = '#262D40';
var effectPanelTextMain = exports.effectPanelTextMain = '#F7F7F7';
var effectPanelTextSecondary1 = exports.effectPanelTextSecondary1 = '#A0A7B4';
var effectPanelTextSecondary2 = exports.effectPanelTextSecondary2 = '#6A7485';
var effectPanelTextSecondary3 = exports.effectPanelTextSecondary3 = '#5A6475';
var effectPanelElementColor = exports.effectPanelElementColor = inputBgd;
var effectPanelElementColorActive = exports.effectPanelElementColorActive = '#323843';
var effectPanelElementColorHovered = exports.effectPanelElementColorHovered = inputBgdHover;
var effectPanelElementColorSelected = exports.effectPanelElementColorSelected = '#454e5d';
var effectPanelElementColorSun = exports.effectPanelElementColorSun = '#F7B26B';

// right panel
var rightPanelMarginTop = exports.rightPanelMarginTop = 12;
var rightPanelMarginRight = exports.rightPanelMarginRight = 12;

// theme is passed to kepler.gl when it's mounted,
// it is used by styled-components to pass along to
// all child components

var input = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  &::placeholder {\n    color: ", ";\n    font-weight: ", ";\n  }\n\n  /* Disable Arrows on Number Inputs */\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  caret-color: ", ";\n  color: ", ";\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  font-family: ", ";\n  height: ", ";\n  justify-content: space-between;\n  outline: none;\n  overflow: hidden;\n  padding: ", ";\n  text-overflow: ellipsis;\n  transition: ", ";\n  white-space: nowrap;\n  width: 100%;\n  word-wrap: normal;\n  pointer-events: ", ";\n  opacity: ", ";\n  box-shadow: ", ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:active,\n  &:focus,\n  &.focus,\n  &.active {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (props) {
  return props.theme.inputPlaceholderColor;
}, function (props) {
  return props.theme.inputPlaceholderFontWeight;
}, function (props) {
  return props.theme.inputBgd;
}, function (props) {
  return props.active ? props.theme.inputBorderActiveColor : props.error ? props.theme.errorColor : props.theme.inputBgd;
}, function (props) {
  return props.theme.inputBorderActiveColor;
}, function (props) {
  return props.theme.inputColor;
}, function (props) {
  return ['small', 'tiny'].includes(props.size) ? props.theme.inputFontSizeSmall : props.theme.inputFontSize;
}, function (props) {
  return props.theme.inputFontWeight;
}, function (props) {
  return props.theme.fontFamily;
}, function (props) {
  return props.size === 'small' ? props.theme.inputBoxHeightSmall : props.size === 'tiny' ? props.theme.inputBoxHeightTiny : props.theme.inputBoxHeight;
}, function (props) {
  return props.size === 'small' ? props.theme.inputPaddingSmall : props.size === 'tiny' ? props.theme.inputPaddingTiny : props.theme.inputPadding;
}, function (props) {
  return props.theme.transition;
}, function (props) {
  return props.disabled ? 'none' : 'all';
}, function (props) {
  return props.disabled ? 0.5 : 1;
}, function (props) {
  return props.theme.inputBoxShadow;
}, function (props) {
  return props.type === 'number' || props.type === 'text' ? 'text' : 'pointer';
}, function (props) {
  return props.active ? props.theme.inputBgdActive : props.theme.inputBgdHover;
}, function (props) {
  return props.active ? props.theme.inputBorderActiveColor : props.theme.inputBorderHoverColor;
}, function (props) {
  return props.theme.inputBgdActive;
}, function (props) {
  return props.theme.inputBorderActiveColor;
}, function (props) {
  return props.theme.inputBoxShadowActive;
});
var inputLT = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  &::placeholder {\n    color: ", ";\n    font-weight: 400;\n  }\n  ", "\n\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  color: ", ";\n  caret-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    cursor: ", ";\n    border-color: ", ";\n  }\n\n  &:active,\n  &:focus,\n  &.focus,\n  &.active {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (props) {
  return props.theme.inputPlaceholderColorLT;
}, input, function (props) {
  return props.theme.selectBackgroundLT;
}, function (props) {
  return props.active ? props.theme.selectActiveBorderColor : props.error ? props.theme.errorColor : props.theme.selectBorderColorLT;
}, function (props) {
  return props.theme.selectColorLT;
}, function (props) {
  return props.theme.inputBorderActiveColorLT;
}, function (props) {
  return props.theme.inputBgdActiveLT;
}, function (props) {
  return ['number', 'text'].includes(props.type) ? 'text' : 'pointer';
}, function (props) {
  return props.active ? props.theme.inputBorderActiveColorLT : props.theme.inputBorderHoverColorLT;
}, function (props) {
  return props.theme.inputBgdActiveLT;
}, function (props) {
  return props.theme.inputBorderActiveColorLT;
}, function (props) {
  return props.theme.inputBoxShadowActiveLT;
});
var secondaryInput = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  color: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:active,\n  &:focus,\n  &.focus,\n  &.active {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
  return props.theme.input;
}, function (props) {
  return props.theme.secondaryInputColor;
}, function (props) {
  return props.theme.secondaryInputBgd;
}, function (props) {
  return props.error ? props.theme.errorColor : props.theme.secondaryInputBorderColor;
}, function (props) {
  return props.theme.secondaryInputBgdHover;
}, function (props) {
  return props.theme.secondaryInputBgdHover;
}, function (props) {
  return props.theme.secondaryInputBgdActive;
}, function (props) {
  return props.theme.secondaryInputBorderActiveColor;
});
var chickletedInputContainer = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  flex-wrap: wrap;\n  height: auto;\n  justify-content: start;\n  margin-bottom: 2px;\n  padding: 0px 7px 0px 4px;\n  white-space: normal;\n\n  .chickleted-input__placeholder {\n    line-height: 24px;\n    margin: 4px;\n  }\n"])));
var chickletedInput = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " ", ";\n"])), function (props) {
  return props.theme.input;
}, function (props) {
  return props.theme.chickletedInputContainer;
});
var chickletedInputLT = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " ", ";\n"])), function (props) {
  return props.theme.inputLT;
}, function (props) {
  return props.theme.chickletedInputContainer;
});
var secondaryChickletedInput = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " ", ";\n"])), function (props) {
  return props.theme.secondaryInput;
}, function (props) {
  return props.theme.chickletedInputContainer;
});
var inlineInput = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " color: ", ";\n  font-size: 13px;\n  letter-spacing: 0.43px;\n  line-height: 18px;\n  height: 24px;\n  font-weight: 400;\n  padding-left: 4px;\n  margin-left: -4px;\n  background-color: transparent;\n  border: 1px solid transparent;\n\n  &:hover {\n    height: 24px;\n    cursor: text;\n    background-color: transparent;\n    border: 1px solid ", ";\n  }\n\n  &:active,\n  .active,\n  &:focus {\n    background-color: transparent;\n    border: 1px solid ", ";\n  }\n"])), function (props) {
  return props.theme.input;
}, function (props) {
  return props.theme.textColor;
}, function (props) {
  return props.theme.labelColor;
}, function (props) {
  return props.theme.inputBorderActiveColor;
});
var switchTrack = (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  position: absolute;\n  top: 0;\n  left: ", "px;\n  content: '';\n  display: block;\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", ";\n"])), function (props) {
  return props.checked ? props.theme.switchTrackBgdActive : props.theme.switchTrackBgd;
}, function (props) {
  return -props.theme.switchLabelMargin;
}, function (props) {
  return props.theme.switchWidth;
}, function (props) {
  return props.theme.switchHeight;
}, function (props) {
  return props.theme.switchTrackBorderRadius;
});
var switchButton = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  transition: ", ";\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  content: '';\n  display: block;\n  height: ", "px;\n  width: ", "px;\n  background: ", ";\n  box-shadow: ", ";\n  border-radius: ", ";\n"])), function (props) {
  return props.theme.transition;
}, function (props) {
  return (props.theme.switchHeight - props.theme.switchBtnHeight) / 2;
}, function (props) {
  return (props.checked ? props.theme.switchWidth / 2 : (props.theme.switchHeight - props.theme.switchBtnHeight) / 2) - props.theme.switchLabelMargin;
}, function (props) {
  return props.theme.switchBtnHeight;
}, function (props) {
  return props.theme.switchBtnWidth;
}, function (props) {
  return props.checked ? props.theme.switchBtnBgdActive : props.theme.switchBtnBgd;
}, function (props) {
  return props.theme.switchBtnBoxShadow;
}, function (props) {
  return props.theme.switchBtnBorderRadius;
});
var inputSwitch = (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  user-select: none;\n  cursor: pointer;\n  line-height: ", "px;\n  font-weight: 500;\n  font-size: 12px;\n  color: ", ";\n  position: relative;\n  display: inline-block;\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: ", "px;\n\n  &:before {\n    ", ";\n  }\n\n  &:after {\n    ", ";\n  }\n"])), function (props) {
  return props.theme.switchHeight;
}, function (props) {
  return props.theme.labelColor;
}, function (props) {
  return props.theme.switchWidth;
}, function (props) {
  return props.theme.switchTrack;
}, function (props) {
  return props.theme.switchButton;
});

// This is a light version checkbox
var checkboxBox = (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", "px;\n  height: ", "px;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  content: '';\n"])), function (props) {
  return props.theme.checkboxWidth;
}, function (props) {
  return props.theme.checkboxHeight;
}, function (props) {
  return props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBoxBgd;
}, function (props) {
  return props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBorderColor;
});
var checkboxCheck = (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 10px;\n  height: 5px;\n  border-bottom: 2px solid white;\n  border-left: 2px solid white;\n  top: 4px;\n  left: 3px;\n  transform: rotate(-45deg);\n  display: block;\n  position: absolute;\n  opacity: ", ";\n  content: '';\n"])), function (props) {
  return props.checked ? 1 : 0;
});
var inputCheckbox = (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  position: relative;\n  padding-left: 32px;\n  margin-bottom: 24px;\n  line-height: 20px;\n  vertical-align: middle;\n  cursor: pointer;\n  font-size: 12px;\n  color: ", ";\n  margin-left: -", "px;\n\n  &:before {\n    ", ";\n  }\n\n  &:after {\n    ", ";\n  }\n"])), function (props) {
  return props.theme.labelColor;
}, function (props) {
  return props.theme.switchLabelMargin;
}, function (props) {
  return props.theme.checkboxBox;
}, function (props) {
  return props.theme.checkboxCheck;
});
var radioTrack = (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  background-color: ", ";\n  border-color: ", ";\n"])), function (props) {
  return props.theme.checkboxBox;
}, function (props) {
  return props.theme.radioRadius * 2;
}, function (props) {
  return props.theme.radioRadius * 2;
}, function (props) {
  return props.theme.radioBorderRadius;
}, function (props) {
  return props.theme.switchTrackBgd;
}, function (props) {
  return props.theme.radioBorderColor;
});
var radioButton = (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  border: 0;\n  display: table;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  background-color: ", ";\n"])), function (props) {
  return props.theme.radioRadius - props.theme.radioButtonRadius;
}, function (props) {
  return props.theme.radioRadius - props.theme.radioButtonRadius;
}, function (props) {
  return props.theme.radioButtonRadius * 2;
}, function (props) {
  return props.theme.radioButtonRadius * 2;
}, function (props) {
  return props.theme.radioButtonRadius * 2;
}, function (props) {
  return props.theme.radioButtonBgdColor;
});
var inputRadio = (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  padding-left: ", "px;\n  margin-bottom: 0;\n  margin-left: 0;\n  line-height: ", "px;\n  color: ", ";\n  cursor: pointer;\n\n  &:before {\n    ", "\n  }\n\n  &:after {\n    ", "\n  }\n"])), function (props) {
  return props.theme.inputCheckbox;
}, function (props) {
  return props.theme.radioRadius * 2 + 8;
}, function (props) {
  return props.theme.radioRadius * 2;
}, function (props) {
  return props.theme.textColorHl;
}, function (props) {
  return props.theme.radioTrack;
}, function (props) {
  return props.theme.radioButton;
});
var secondaryRadio = (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n\n  &:before {\n    ", " background: ", ";\n  }\n\n  &:after {\n    ", "\n    background: ", ";\n  }\n"])), function (props) {
  return props.theme.inputRadio;
}, function (props) {
  return props.theme.radioTrack;
}, function (props) {
  return props.theme.secondarySwitchTrackBgd;
}, function (props) {
  return props.theme.radioButton;
}, function (props) {
  return props.checked ? props.theme.switchBtnBgdActive : props.theme.secondarySwitchBtnBgd;
});
var secondarySwitch = (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n\n  &:before {\n    ", " background: ", ";\n  }\n\n  &:after {\n    ", "\n    background: ", ";\n  }\n"])), function (props) {
  return props.theme.inpu