text: // Copyright (c) 2020 Uber Technologies, Inc.
  //
  // Permission is hereby granted, free of charge, to any person obtaining a copy
  // of this software and associated documentation files (the "Software"), to deal
  // in the Software without restriction, including without limitation the rights
  // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  // copies of the Software, and to permit persons to whom the Software is
  // furnished to do so, subject to the following conditions:
  //
  // The above copyright notice and this permission notice shall be included in
  // all copies or substantial portions of the Software.
  //
  // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  // THE SOFTWARE.
  
  import {css} from 'styled-components';
  import {DIMENSIONS} from 'constants/default-settings';
  
  export const transition = 'all .4s ease';
  export const transitionFast = 'all .2s ease';
  export const transitionSlow = 'all .8s ease';
  
  export const boxShadow = '0 1px 2px 0 rgba(0,0,0,0.10)';
  export const boxSizing = 'border-box';
  export const borderRadius = '1px';
  export const borderColor = '#3A414C';
  export const borderColorLT = '#F1F1F1';
  
  // TEXT
  export const fontFamily = `ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif`;
  export const fontWeight = 400;
  export const fontSize = '0.875em';
  export const lineHeight = 1.71429;
  export const labelColor = '#6A7485';
  export const labelHoverColor = '#C6C6C6';
  export const labelColorLT = '#6A7485';
  
  export const textColor = '#A0A7B4';
  export const textColorLT = '#3A414C';
  export const dataTableTextColor = textColorLT;
  export const titleColorLT = '#29323C';
  
  export const subtextColor = '#6A7485';
  export const subtextColorLT = '#A0A7B4';
  export const subtextColorActive = '#FFFFFF';
  export const panelToggleBorderColor = '#FFFFFF';
  export const panelTabWidth = '30px';
  
  export const titleTextColor = '#FFFFFF';
  export const textColorHl = '#F0F0F0';
  export const textColorHlLT = '#000000';
  export const activeColor = '#1FBAD6';
  export const activeColorLT = '#2473BD';
  export const activeColorHover = '#108188';
  export const errorColor = '#F9042C';
  export const logoColor = activeColor;
  
  // Button
  export const btnFontFamily = fontFamily;
  export const primaryBtnBgd = '#0F9668';
  export const primaryBtnActBgd = '#13B17B';
  export const primaryBtnColor = '#FFFFFF';
  export const primaryBtnActColor = '#FFFFFF';
  export const primaryBtnBgdHover = '#13B17B';
  export const primaryBtnRadius = '2px';
  export const primaryBtnFontSizeDefault = '11px';
  export const primaryBtnFontSizeSmall = '10px';
  export const primaryBtnFontSizeLarge = '14px';
  export const primaryBtnBorder = '0';
  
  export const secondaryBtnBgd = '#6A7485';
  export const secondaryBtnActBgd = '#A0A7B4';
  export const secondaryBtnColor = '#FFFFFF';
  export const secondaryBtnActColor = '#FFFFFF';
  export const secondaryBtnBgdHover = '#A0A7B4';
  export const secondaryBtnBorder = '0';
  
  export const ctaBtnBgd = '#0F9668';
  export const ctaBtnBgdHover = '#13B17B';
  export const ctaBtnActBgd = '#13B17B';
  export const ctaBtnColor = '#FFFFFF';
  export const ctaBtnActColor = '#FFFFFF';
  
  export const linkBtnBgd = 'transparent';
  export const linkBtnActBgd = linkBtnBgd;
  export const linkBtnColor = '#A0A7B4';
  export const linkBtnActColor = '#F1F1F1';
  export const linkBtnActBgdHover = linkBtnBgd;
  export const linkBtnBorder = '0';
  
  export const negativeBtnBgd = errorColor;
  export const negativeBtnActBgd = '#FF193E';
  export const negativeBtnBgdHover = '#FF193E';
  export const negativeBtnColor = '#FFFFFF';
  export const negativeBtnActColor = '#FFFFFF';
  
  export const floatingBtnBgd = '#29323C';
  export const floatingBtnActBgd = '#3A4552';
  export const floatingBtnBgdHover = '#3A4552';
  export const floatingBtnBorder = '0';
  export const floatingBtnBorderHover = '0';
  export const floatingBtnColor = subtextColor;
  export const floatingBtnActColor = subtextColorActive;
  
  export const selectionBtnBgd = 'transparent';
  export const selectionBtnActBgd = 'transparent';
  export const selectionBtnColor = '#D3D8E0';
  export const selectionBtnActColor = '#0F9668';
  export const selectionBtnBgdHover = '#0F9668';
  export const selectionBtnBorder = '1';
  export const selectionBtnBorderColor = '#D3D8E0';
  export const selectionBtnBorderActColor = '#0F9668';
  
  // Input
  export const inputBoxHeight = '34px';
  export const inputBoxHeightSmall = '24px';
  export const inputBoxHeightTiny = '18px';
  export const inputPadding = '4px 10px';
  export const inputPaddingSmall = '4px 6px';
  export const inputPaddingTiny = '2px 4px';
  export const inputFontSize = '11px';
  export const inputFontSizeSmall = '10px';
  export const inputFontWeight = 500;
  export const inputBgd = '#29323C';
  export const inputBgdHover = '#3A414C';
  export const inputBgdActive = '#3A414C';
  export const inputBgdActiveLT = '#FFFFFF';
  
  export const inputBorderColor = '#29323C';
  export const inputBorderHoverColor = '#3A414C';
  export const inputBorderHoverColorLT = subtextColor;
  export const inputBorderActiveColor = '#3A414C';
  export const inputBorderActiveColorLT = textColorLT;
  
  export const inputColor = '#A0A7B4';
  export const inputBorderRadius = '1px';
  export const inputPlaceholderColor = '#6A7485';
  export const inputPlaceholderColorLT = subtextColorLT;
  export const inputPlaceholderFontWeight = 400;
  export const inputBoxShadow = 'none';
  export const inputBoxShadowActive = 'none';
  export const secondaryInputBgd = '#242730';
  export const secondaryInputBgdHover = '#3A414C';
  export const secondaryInputBgdActive = '#3A414C';
  export const secondaryInputColor = '#A0A7B4';
  export const secondaryInputBorderColor = '#242730';
  export const secondaryInputBorderActiveColor = '#D3D8E0';
  export const dropdownSelectHeight = 30;
  
  // Select
  export const selectColor = inputColor;
  export const selectColorLT = titleColorLT;
  
  export const selectActiveBorderColor = '#D3D8E0';
  export const selectFontSize = '11px';
  export const selectFontWeight = '400';
  export const selectFontWeightBold = '500';
  
  export const selectColorPlaceHolder = '#6A7485';
  export const selectColorPlaceHolderLT = selectColorLT;
  export const selectBackground = inputBgd;
  export const selectBackgroundHover = inputBgdHover;
  export const selectBackgroundLT = '#FFFFFF';
  export const selectBackgroundHoverLT = '#F8F8F9';
  export const selectBorderColor = '#D3D8E0';
  export const selectBorderColorLT = '#D3D8E0';
  export const selectBorderRadius = '1px';
  export const selectBorder = 0;
  export const panelTabColor = subtextColor;
  export const dropdownListHighlightBg = '#6A7485';
  export const dropdownListHighlightBgLT = '#F8F8F9';
  export const dropdownListShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
  export const dropdownListBgd = '#29323C';
  export const toolbarItemBgdHover = '#3A4552';
  export const toolbarItemIconHover = textColorHl;
  export const toolbarItemBorderHover = 'transparent';
  export const toolbarItemBorderRaddius = '0px';
  export const dropdownListBgdLT = '#FFFFFF';
  export const dropdownListBorderTop = '#242730';
  export const dropdownListBorderTopLT = '#D3D8E0';
  export const dropdownListLineHeight = 20;
  export const dropdownWrapperZ = 100;
  export const dropdownWapperMargin = 4;
  
  // Switch
  export const switchWidth = 24;
  export const switchHeight = 12;
  export const switchLabelMargin = 12;
  
  export const switchTrackBgd = '#29323C';
  export const switchTrackBgdActive = activeColor;
  export const switchTrackBorderRadius = '1px';
  export const switchBtnBgd = '#6A7485';
  export const switchBtnBgdActive = '#D3D8E0';
  export const switchBtnBoxShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
  export const switchBtnBorderRadius = '0';
  export const switchBtnWidth = 12;
  export const switchBtnHeight = 12;
  
  export const secondarySwitchTrackBgd = '#242730';
  export const secondarySwitchBtnBgd = '#3A414C';
  
  // Checkbox
  export const checkboxWidth = 16;
  export const checkboxHeight = 16;
  export const checkboxMargin = 12;
  export const checkboxBorderColor = selectBorderColor;
  export const checkboxBorderRadius = '2px';
  export const checkboxBorderColorLT = selectBorderColorLT;
  export const checkboxBoxBgd = 'white';
  export const checkboxBoxBgdChecked = primaryBtnBgd;
  
  // Radio
  export const radioRadius = 8;
  export const radioBorderRadius = 100;
  export const radioBorderColor = 'transparent';
  export const radioButtonRadius = 4;
  export const radioButtonBgdColor = switchBtnBgdActive;
  
  // Side Panel
  export const sidePanelHeaderBg = '#29323C';
  export const sidePanelHeaderBorder = 'transparent';
  export const layerConfigGroupMarginBottom = 12;
  export const layerConfigGroupPaddingLeft = 18;
  
  export const sidePanelInnerPadding = 16;
  export const sidePanelBorder = 0;
  export const sidePanelBorderColor = 'transparent';
  export const sidePanelBg = '#242730';
  export const sidePanelScrollBarWidth = 10;
  export const sidePanelScrollBarHeight = 10;
  export const sideBarCloseBtnBgd = secondaryBtnBgd;
  export const sideBarCloseBtnColor = '#29323C';
  export const sideBarCloseBtnBgdHover = secondaryBtnActBgd;
  export const sidePanelTitleFontsize = '20px';
  export const sidePanelTitleLineHeight = '1.71429';
  export const panelBackground = '#29323C';
  export const panelContentBackground = '#292E36';
  export const panelBackgroundHover = '#3A4552';
  export const panelHeaderBorderRadius = '0px';
  export const chickletBgd = '#3A4552';
  export const chickletBgdLT = '#D3D8E0';
  export const panelHeaderIcon = '#6A7485';
  export const panelHeaderIconActive = '#A0A7B4';
  export const panelHeaderIconHover = textColorHl;
  export const panelHeaderHeight = 48;
  export const layerPanelHeaderHeight = 48;
  export const panelBoxShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
  export const panelBorderRadius = '2px';
  export const panelBackgroundLT = '#F8F8F9';
  export const panelToggleMarginRight = 12;
  export const panelToggleBottomPadding = 6;
  
  export const panelBorderColor = '#3A414C';
  export const panelBorder = `1px solid ${borderColor}`;
  export const panelBorderLT = `1px solid ${borderColorLT}`;
  
  export const mapPanelBackgroundColor = '#242730';
  export const mapPanelHeaderBackgroundColor = '#29323C';
  export const tooltipBg = '#3A414C';
  export const tooltipColor = textColorHl;
  export const tooltipBoxShadow = boxShadow;
  export const tooltipFontSize = '10px';
  
  export const layerTypeIconSizeL = 50;
  export const layerTypeIconPdL = 12;
  export const layerTypeIconSizeSM = 28;
  
  // Sidepanel divider
  export const sidepanelDividerBorder = '1px';
  export const sidepanelDividerMargin = 12;
  export const sidepanelDividerHeight = 12;
  
  // Bottom Panel
  export const bottomInnerPdSide = 32;
  export const bottomInnerPdVert = 6;
  export const bottomPanelGap = 20;
  export const bottomWidgetPaddingTop = 20;
  export const bottomWidgetPaddingRight = 20;
  export const bottomWidgetPaddingBottom = 30;
  export const bottomWidgetPaddingLeft = 20;
  export const bottomWidgetBgd = '#29323C';
  // Modal
  export const modalTitleColor = '#3A414C';
  export const modalTitleFontSize = '24px';
  export const modalTitleFontSizeSmaller = '18px';
  export const modalFooterBgd = '#F8F8F9';
  export const modalImagePlaceHolder = '#DDDFE3';
  export const modalPadding = '10px 0';
  export const modalLateralPadding = '72px';
  export const modalPortableLateralPadding = '36px';
  
  export const modalOverLayZ = 1001;
  export const modalOverlayBgd = 'rgba(0, 0, 0, 0.5)';
  export const modalContentZ = 10002;
  export const modalFooterZ = 10001;
  export const modalTitleZ = 10003;
  export const modalButtonZ = 10005;
  export const modalDropdownBackground = '#FFFFFF';
  
  // Modal Dialog (Dark)
  export const modalDialogBgd = '#3A414C';
  export const modalDialogColor = textColorHl;
  
  // Slider
  export const sliderBarColor = '#6A7485';
  export const sliderBarBgd = '#3A414C';
  export const sliderBarHoverColor = '#D3D8E0';
  export const sliderBarRadius = '1px';
  export const sliderBarHeight = 4;
  export const sliderHandleHeight = 12;
  export const sliderHandleWidth = 12;
  export const sliderHandleColor = '#D3D8E0';
  export const sliderHandleTextColor = sliderHandleColor;
  export const sliderInactiveBorderColor = sliderHandleColor;
  export const sliderBorderRadius = '0';
  
  export const sliderHandleHoverColor = '#FFFFFF';
  export const sliderHandleAfterContent = '';
  export const sliderHandleShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
  export const sliderInputHeight = 24;
  export const sliderInputWidth = 56;
  export const sliderInputFontSize = '10px';
  export const sliderInputPadding = '4px 6px';
  export const sliderMarginTopIsTime = -12;
  export const sliderMarginTop = 12;
  export const sliderMarginBottom = 12;
  
  // Geocoder
  export const geocoderWidth = 360;
  export const geocoderTop = 20;
  export const geocoderRight = 12;
  export const geocoderInputHeight = 36;
  
  // Plot
  export const rangeBrushBgd = '#3A414C';
  export const histogramFillInRange = activeColor;
  export const histogramFillOutRange = sliderBarColor;
  export const axisFontSize = '10px';
  export const axisFontColor = textColor;
  export const timeTitleFontSize = '10px';
  export const rangePlotMargin = {top: 12, bottom: 0, left: 0, right: 0};
  export const rangePlotMarginLarge = {top: 18, bottom: 0, left: 0, right: 0};
  export const rangePlotH = 62;
  export const rangePlotContainerH = 78;
  export const rangePlotHLarge = 102;
  export const rangePlotContainerHLarge = 120;
  
  // Notification
  export const notificationColors = {
    info: '#276ef1',
    error: '#f25138',
    success: '#47b275',
    warning: '#ffc043'
  };
  
  export const notificationPanelWidth = 240;
  export const notificationPanelItemWidth = notificationPanelWidth - 60;
  export const notificationPanelItemHeight = 60;
  
  // Data Table
  const headerRowHeight = 70;
  const rowHeight = 32;
  const headerPaddingTop = 6;
  const headerPaddingBottom = 8;
  const cellPaddingSide = 10;
  const edgeCellPaddingSide = 10;
  const cellFontSize = 10;
  const gridPaddingSide = 24;
  const headerCellBackground = '#FFFFFF';
  const headerCellBorderColor = '#E0E0E0';
  const headerCellIconColor = '#666666';
  const cellBorderColor = '#E0E0E0';
  const evenRowBackground = '#FFFFFF';
  const oddRowBackground = '#F7F7F7';
  const optionButtonColor = '#6A7485';
  const pinnedGridBorderColor = '#E0E0E0';
  
  // Floating Time display
  const timeDisplayBorderRadius = 32;
  const timeDisplayHeight = 64;
  const timeDisplayMinWidth = 176;
  const timeDisplayOpacity = 0.8;
  const timeDisplayPadding = '0 24px';
  
  // Export map modal
  const exportIntraSectionMargin = '8';
  
  // progress bar
  const progressBarColor = primaryBtnBgd;
  const progressBarTrackColor = '#E8E8E8';
  // Action Panel
  export const actionPanelWidth = 110;
  export const actionPanelHeight = 32;
  
  // Styled Token
  export const fieldTokenRightMargin = 4;
  
  export const textTruncate = {
    maxWidth: '100%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    wordWrap: 'normal'
  };
  
  // layerConfigGroupLabel
  export const layerConfigGroupLabelBorderLeft = '2px';
  export const layerConfigGroupLabelMargin = '-12px';
  export const layerConfigGroupLabelPadding = '10px';
  export const layerConfigGroupColor = 'transparent';
  
  // layerConfigGroupLabel label
  export const layerConfigGroupLabelLabelMargin = '0';
  export const layerConfigGroupLabelLabelFontSize = '12px';
  
  // styledConfigGroupHeader
  export const styledConfigGroupHeaderBorder = '2px';
  
  // layerConfigurator
  
  export const layerConfiguratorBorder = '0';
  export const layerConfiguratorBorderColor = '';
  export const layerConfiguratorMargin = '12px';
  export const layerConfiguratorPadding = '12px 0 8px 0';
  // This breakpoints are used for responsive design
  export const breakPoints = {
    palm: 588,
    desk: 768
  };
  
  // theme is passed to kepler.gl when it's mounted,
  // it is used by styled-components to pass along to
  // all child components
  
  const input = css`
    ::placeholder {
      color: ${props => props.theme.inputPlaceholderColor};
      font-weight: ${props => props.theme.inputPlaceholderFontWeight};
    }
  
    align-items: center;
    background-color: ${props => props.theme.inputBgd};
    border: 1px solid
      ${props =>
        props.active
          ? props.theme.inputBorderActiveColor
          : props.error
          ? props.theme.errorColor
          : props.theme.inputBgd};
    border-radius: 2px;
    caret-color: ${props => props.theme.inputBorderActiveColor};
    color: ${props => props.theme.inputColor};
    display: flex;
    font-size: ${props =>
      ['small', 'tiny'].includes(props.size)
        ? props.theme.inputFontSizeSmall
        : props.theme.inputFontSize};
    font-weight: ${props => props.theme.inputFontWeight};
    font-family: ${props => props.theme.fontFamily};
    height: ${props =>
      props.size === 'small'
        ? props.theme.inputBoxHeightSmall
        : props.size === 'tiny'
        ? props.theme.inputBoxHeightTiny
        : props.theme.inputBoxHeight};
    justify-content: space-between;
    outline: none;
    overflow: hidden;
    padding: ${props =>
      props.size === 'small'
        ? props.theme.inputPaddingSmall
        : props.size === 'tiny'
        ? props.theme.inputPaddingTiny
        : props.theme.inputPadding};
    text-overflow: ellipsis;
    transition: ${props => props.theme.transition};
    white-space: nowrap;
    width: 100%;
    word-wrap: normal;
    pointer-events: ${props => (props.disabled ? 'none' : 'all')};
    opacity: ${props => (props.disabled ? 0.5 : 1)};
    box-shadow: ${props => props.theme.inputBoxShadow};
  
    :hover {
      cursor: ${props => (props.type === 'number' || props.type === 'text' ? 'text' : 'pointer')};
      background-color: ${props =>
        props.active ? props.theme.inputBgdActive : props.theme.inputBgdHover};
      border-color: ${props =>
        props.active ? props.theme.inputBorderActiveColor : props.theme.inputBorderHoverColor};
    }
  
    :active,
    :focus,
    &.focus,
    &.active {
      background-color: ${props => props.theme.inputBgdActive};
      border-color: ${props => props.theme.inputBorderActiveColor};
      box-shadow: ${props => props.theme.inputBoxShadowActive};
    }
  
    /* Disable Arrows on Number Inputs */
    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  `;
  
  const inputLT = css`
    ::placeholder {
      color: ${props => props.theme.inputPlaceholderColorLT};
      font-weight: 400;
    }
    ${input}
  
    background-color: ${props => props.theme.selectBackgroundLT};
    border: 1px solid
    ${props =>
      props.active
        ? props.theme.selectActiveBorderColor
        : props.error
        ? props.theme.errorColor
        : props.theme.selectBorderColorLT};
    color: ${props => props.theme.selectColorLT};
    caret-color: ${props => props.theme.selectColorLT};
  
    :active,
    :focus,
    &.focus,
    &.active {
      background-color: ${props => props.theme.inputBgdActiveLT};
      border-color: ${props => props.theme.inputBorderActiveColorLT};
    }
  
    :hover {
      background-color: ${props => props.theme.inputBgdActiveLT};
      cursor: ${props => (['number', 'text'].includes(props.type) ? 'text' : 'pointer')};
      border-color: ${props =>
        props.active ? props.theme.inputBorderActiveColorLT : props.theme.inputBorderHoverColorLT};
    }
  `;
  
  const secondaryInput = css`
    ${props => props.theme.input}
    color: ${props => props.theme.secondaryInputColor};
    background-color: ${props => props.theme.secondaryInputBgd};
    border: 1px solid
      ${props => (props.error ? props.theme.errorColor : props.theme.secondaryInputBorderColor)};
  
    :hover {
      cursor: pointer;
      background-color: ${props => props.theme.secondaryInputBgdHover};
      border-color: ${props => props.theme.secondaryInputBgdHover};
    }
  
    :active,
    &.active {
      background-color: ${props => props.theme.secondaryInputBgdActive};
      border-color: ${props => props.theme.secondaryInputBorderActiveColor};
    }
  `;
  
  const chickletedInputContainer = css`
    cursor: pointer;
    flex-wrap: wrap;
    height: auto;
    justify-content: start;
    margin-bottom: 2px;
    padding: 0px 7px 0px 4px;
    white-space: normal;
  
    .chickleted-input__placeholder {
      line-height: 24px;
      margin: 4px;
    }
  `;
  
  const chickletedInput = css`
    ${props => props.theme.input} ${props => props.theme.chickletedInputContainer};
  `;
  
  const chickletedInputLT = css`
    ${props => props.theme.inputLT} ${props => props.theme.chickletedInputContainer};
  `;
  
  const secondaryChickletedInput = css`
    ${props => props.theme.secondaryInput} ${props => props.theme.chickletedInputContainer};
  `;
  
  const inlineInput = css`
    ${props => props.theme.input} color: ${props => props.theme.textColor};
    font-size: 13px;
    letter-spacing: 0.43px;
    line-height: 18px;
    height: 24px;
    font-weight: 400;
    padding-left: 4px;
    margin-left: -4px;
    background-color: transparent;
    border: 1px solid transparent;
  
    :hover {
      height: 24px;
      cursor: text;
      background-color: transparent;
      border: 1px solid ${props => props.theme.labelColor};
    }
  
    :active,
    .active,
    :focus {
      background-color: transparent;
      border: 1px solid ${props => props.theme.inputBorderActiveColor};
    }
  `;
  
  const switchTrack = css`
    background: ${props =>
      props.checked ? props.theme.switchTrackBgdActive : props.theme.switchTrackBgd};
    position: absolute;
    top: 0;
    left: ${props => -props.theme.switchLabelMargin}px;
    content: '';
    display: block;
    width: ${props => props.theme.switchWidth}px;
    height: ${props => props.theme.switchHeight}px;
    border-radius: ${props => props.theme.switchTrackBorderRadius};
  `;
  
  const switchButton = css`
    transition: ${props => props.theme.transition};
    position: absolute;
    top: ${props => (props.theme.switchHeight - props.theme.switchBtnHeight) / 2}px;
    left: ${props =>
      (props.checked
        ? props.theme.switchWidth / 2
        : (props.theme.switchHeight - props.theme.switchBtnHeight) / 2) -
      props.theme.switchLabelMargin}px;
    content: '';
    display: block;
    height: ${props => props.theme.switchBtnHeight}px;
    width: ${props => props.theme.switchBtnWidth}px;
    background: ${props =>
      props.checked ? props.theme.switchBtnBgdActive : props.theme.switchBtnBgd};
    box-shadow: ${props => props.theme.switchBtnBoxShadow};
    border-radius: ${props => props.theme.switchBtnBorderRadius};
  `;
  
  const inputSwitch = css`
    user-select: none;
    cursor: pointer;
    line-height: ${props => props.theme.switchHeight}px;
    font-weight: 500;
    font-size: 12px;
    color: ${props => props.theme.labelColor};
    position: relative;
    display: inline-block;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: ${props => props.theme.switchWidth}px;
  
    :before {
      ${props => props.theme.switchTrack};
    }
  
    :after {
      ${props => props.theme.switchButton};
    }
  `;
  
  // This is a light version checkbox
  const checkboxBox = css`
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: ${props => props.theme.checkboxWidth}px;
    height: ${props => props.theme.checkboxHeight}px;
    background: ${props =>
      props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBoxBgd};
    border: 1px solid
      ${props =>
        props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBorderColor};
    border-radius: 2px;
    content: '';
  `;
  
  const checkboxCheck = css`
    width: 10px;
    height: 5px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    top: 4px;
    left: 3px;
    transform: rotate(-45deg);
    display: block;
    position: absolute;
    opacity: ${props => (props.checked ? 1 : 0)};
    content: '';
  `;
  
  const inputCheckbox = css`
    display: inline-block;
    position: relative;
    padding-left: 32px;
    margin-bottom: 24px;
    line-height: 20px;
    vertical-align: middle;
    cursor: pointer;
    font-size: 12px;
    color: ${props => props.theme.labelColor};
    margin-left: -${props => props.theme.switchLabelMargin}px;
  
    :before {
      ${props => props.theme.checkboxBox};
    }
  
    :after {
      ${props => props.theme.checkboxCheck};
    }
  `;
  
  const inputRadio = css`
    ${props => props.theme.inputCheckbox}
    padding-left: ${props => props.theme.radioRadius * 2 + 8}px;
    margin-bottom: 0;
    margin-left: 0;
    line-height: ${props => props.theme.radioRadius * 2}px;
    color: ${props => props.theme.textColorHl};
    cursor: pointer;
  
    :before {
      ${props => props.theme.checkboxBox}
      width: ${props => props.theme.radioRadius * 2}px;
      height: ${props => props.theme.radioRadius * 2}px;
      border-radius: ${props => props.theme.radioBorderRadius}px;
      background-color: ${props => props.theme.switchTrackBgd};
      border-color: ${props => props.theme.radioBorderColor};
    }
  
    :after {
      top: ${props => props.theme.radioRadius - props.theme.radioButtonRadius}px;
      left: ${props => props.theme.radioRadius - props.theme.radioButtonRadius}px;
      display: table;
      width: ${props => props.theme.radioButtonRadius * 2}px;
      height: ${props => props.theme.radioButtonRadius * 2}px;
      border-radius: ${props => props.theme.radioButtonRadius * 2}px;
      border: 0;
      background-color: ${props => props.theme.radioButtonBgdColor};
    }
  `;
  
  const secondarySwitch = css`
    ${props => props.theme.inputSwitch}
  
    :before {
      ${props => props.theme.switchTrack} background: ${props =>
    props.checked ? props.theme.switchTrackBgdActive : props.theme.secondarySwitchTrackBgd};
    }
  
    :after {
      ${props => props.theme.switchButton}
      background: ${props =>
        props.checked ? props.theme.switchBtnBgdActive : props.theme.secondarySwitchBtnBgd};
    }
  `;
  
  const dropdownScrollBar = css`
    ::-webkit-scrollbar {
      height: 10px;
      width: 10px;
    }
  
    ::-webkit-scrollbar-corner {
      background: ${props => props.theme.dropdownListBgd};
    }
  
    ::-webkit-scrollbar-track {
      background: ${props => props.theme.dropdownListBgd};
    }
  
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: ${props => props.theme.labelColor};
      border: 3px solid ${props => props.theme.dropdownListBgd};
    }
  
    :vertical:hover {
      background: ${props => props.theme.textColorHl};
      cursor: pointer;
    }
  `;
  
  const dropdownScrollBarLT = css`
    ${dropdownScrollBar} ::-webkit-scrollbar-corner {
      background: ${props => props.theme.dropdownListBgdLT};
    }
  
    ::-webkit-scrollbar-track {
      background: ${props => props.theme.dropdownListBgdLT};
    }
  
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: ${props => props.theme.labelColorLT};
      border: 3px solid ${props => props.theme.dropdownListBgdLT};
    }
  
    :vertical:hover {
      background: ${props => props.theme.textColorHlLT};
      cursor: pointer;
    }
  `;
  
  const dropdownListAnchor = css`
    color: ${props => props.theme.selectColor};
    padding-left: 3px;
    font-size: ${props => props.theme.selectFontSize};
    line-height: ${props => props.theme.dropdownListLineHeight}px;
  `;
  
  const dropdownListAnchorLT = css`
    ${dropdownListAnchor}
    color: ${props => props.theme.selectColorLT};
  `;
  
  const dropdownListSize = css`
    font-size: 11px;
    padding: 3px 9px;
    font-weight: 500;
    white-space: nowrap;
  `;
  
  const dropdownListItem = css`
    ${dropdownListSize} &.hover,
    &:hover {
      cursor: pointer;
      background-color: ${props => props.theme.dropdownListHighlightBg};
  
      .list__item__anchor {
        color: ${props => props.theme.textColorHl};
      }
    }
  `;
  
  const dropdownListItemLT = css`
    ${dropdownListSize}
    color: ${props => props.theme.textColorLT};
  
    &.hover,
    &:hover {
      cursor: pointer;
      color: ${props => props.theme.textColorHlLT};
      background-color: ${props => props.theme.dropdownListHighlightBgLT};
  
      .list__item__anchor {
        color: ${props => props.theme.selectColorLT};
      }
    }
  `;
  
  const dropdownListHeader = css`
    font-size: 11px;
    padding: 5px 9px;
    color: ${props => props.theme.labelColor};
  `;
  
  const dropdownListSection = css`
    padding: 0 0 4px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid ${props => props.theme.labelColor};
  `;
  
  const dropdownList = css`
    overflow-y: auto;
    max-height: 280px;
    box-shadow: ${props => props.theme.dropdownListShadow};
    border-radius: 2px;
  
    .list__section {
      ${props => props.theme.dropdownListSection};
    }
    .list__header {
      ${props => props.theme.dropdownListHeader};
    }
  
    .list__item {
      ${props => props.theme.dropdownListItem};
    }
  
    .list__item__anchor {
      ${props => props.theme.dropdownListAnchor};
    }
  
    ${props => props.theme.dropdownScrollBar};
  `;
  
  const dropdownListLT = css`
    ${dropdownList} .list__item {
      ${props => props.theme.dropdownListItemLT};
    }
  
    .list__item__anchor {
      ${props => props.theme.dropdownListAnchorLT};
    }
  
    ${props => props.theme.dropdownScrollBarLT};
  `;
  const sidePanelScrollBar = css`
    ::-webkit-scrollbar {
      height: ${props => props.theme.sidePanelScrollBarHeight}px;
      width: ${props => props.theme.sidePanelScrollBarWidth}px;
    }
  
    ::-webkit-scrollbar-corner {
      background: ${props => props.theme.sidePanelBg};
    }
  
    ::-webkit-scrollbar-track {
      background: ${props => props.theme.sidePanelBg};
    }
  
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: ${props => props.theme.panelBackgroundHover};
      border: 3px solid ${props => props.theme.sidePanelBg};
  
      :hover {
        background: ${props => props.theme.labelColor};
        cursor: pointer;
      }
    }
  `;
  
  const panelDropdownScrollBar = css`
    ::-webkit-scrollbar {
      height: 10px;
      width: 10px;
    }
  
    ::-webkit-scrollbar-corner {
      background: ${props => props.theme.panelBackground};
    }
  
    ::-webkit-scrollbar-track {
      background: ${props => props.theme.panelBackground};
    }
  
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: ${props => props.theme.panelBackgroundHover};
      border: 3px solid ${props => props.theme.panelBackground};
      :hover {
        background: ${props => props.theme.labelColor};
        cursor: pointer;
      }
    }
  `;
  
  const scrollBar = css`
    ::-webkit-scrollbar {
      height: 10px;
      width: 10px;
    }
  
    ::-webkit-scrollbar-corner {
      background: ${props => props.theme.panelBackground};
    }
  
    ::-webkit-scrollbar-track {
      background: ${props => props.theme.panelBackground};
    }
  
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: ${props => props.theme.labelColor};
      border: 3px solid ${props => props.theme.panelBackground}
  
      :vertical:hover {
        background: ${props => props.theme.textColorHl};
        cursor: pointer;
      }
  
      :horizontal:hover {
        background: ${props => props.theme.textColorHl};
        cursor: pointer;
      }
    }
  `;
  
  export const modalScrollBar = css`
    ::-webkit-scrollbar {
      width: 14px;
      height: 16px;
    }
  
    ::-webkit-scrollbar-track {
      background: white;
    }
    ::-webkit-scrollbar-track:horizontal {
      background: ${props => props.theme.textColorHl};
    }
    ::-webkit-scrollbar-thumb {
      background: ${props => props.theme.labelColorLT};
      border: 4px solid white;
    }
  
    ::-webkit-scrollbar-corner {
      background: ${props => props.theme.textColorHl};
    }
  
    ::-webkit-scrollbar-thumb:hover {
      background: #969da9;
    }
  
    ::-webkit-scrollbar-thumb:vertical {
      border-radius: 7px;
    }
  
    ::-webkit-scrollbar-thumb:horizontal {
      border-radius: 9px;
      border: 4px solid ${props => props.theme.textColorHl};
    }
  `;
  
  export const theme = {
    ...DIMENSIONS,
    // templates
    input,
    inputLT,
    inlineInput,
    chickletedInput,
    chickletedInputLT,
    chickletedInputContainer,
    secondaryChickletedInput,
  
    borderColor,
    borderColorLT,
  
    secondaryInput,
    dropdownScrollBar,
    dropdownScrollBarLT,
    dropdownList,
    dropdownListLT,
    dropdownListItem,
    dropdownListItemLT,
    dropdownListAnchor,
    dropdownListAnchorLT,
    dropdownListHeader,
    dropdownListSection,
    dropdownListShadow,
    dropdownWrapperZ,
    dropdownWapperMargin,
    modalScrollBar,
    scrollBar,
    sidePanelScrollBar,
    inputSwitch,
    secondarySwitch,
    switchTrack,
    switchButton,
    inputCheckbox,
    inputRadio,
    checkboxBox,
    checkboxCheck,
  
    // Transitions
    transition,
    transitionFast,
    transitionSlow,
  
    // styles
    activeColor,
    activeColorHover,
    borderRadius,
    boxShadow,
    errorColor,
    dropdownListHighlightBg,
    dropdownListHighlightBgLT,
    dropdownListBgd,
    toolbarItemBgdHover,
    toolbarItemBorderHover,
    toolbarItemIconHover,
    toolbarItemBorderRaddius,
    dropdownListBgdLT,
    dropdownListBorderTop,
    dropdownListBorderTopLT,
    dropdownListLineHeight,
  
    labelColor,
    labelColorLT,
    labelHoverColor,
    mapPanelBackgroundColor,
    mapPanelHeaderBackgroundColor,
  
    // Select
    selectActiveBorderColor,
    selectBackground,
    selectBackgroundLT,
    selectBackgroundHover,
    selectBackgroundHoverLT,
    selectBorder,
    selectBorderColor,
    selectBorderRadius,
    selectBorderColorLT,
    selectColor,
    selectColorPlaceHolder,
    selectColorPlaceHolderLT,
    selectFontSize,
    selectFontWeight,
    selectColorLT,
    selectFontWeightBold,
    panelTabColor,
  
    // Input
    inputBgd,
    inputBgdHover,
    inputBgdActive,
    inputBgdActiveLT,
    inputBoxHeight,
    inputBoxHeightSmall,
    inputBoxHeightTiny,
    inputBorderColor,
    inputBorderActiveColor,
    inputBorderHoverColor,
    inputBorderRadius,
    inputColor,
    inputPadding,
    inputPaddingSmall,
    inputPaddingTiny,
    inputFontSize,
    inputFontSizeSmall,
    inputFontWeight,
    inputPlaceholderColor,
    inputPlaceholderColorLT,
    inputPlaceholderFontWeight,
    inputBoxShadow,
    inputBoxShadowActive,
    secondaryInputBgd,
    secondaryInputBgdHover,
    secondaryInputBgdActive,
    secondaryInputColor,
    secondaryInputBorderColor,
    secondaryInputBorderActiveColor,
    dropdownSelectHeight,
  
    // Switch
    switchWidth,
    switchHeight,
    switchTrackBgd,
    switchTrackBgdActive,
    switchTrackBorderRadius,
    switchBtnBgd,
    switchBtnBgdActive,
    switchBtnBoxShadow,
    switchBtnBorderRadius,
    switchBtnWidth,
    switchBtnHeight,
    switchLabelMargin,
  
    secondarySwitchTrackBgd,
    secondarySwitchBtnBgd,
  
    // Checkbox
    checkboxWidth,
    checkboxHeight,
    checkboxMargin,
    checkboxBorderColor,
    checkboxBorderRadius,
    checkboxBorderColorLT,
    checkboxBoxBgd,
    checkboxBoxBgdChecked,
  
    // Radio
    radioRadius,
    radioBorderRadius,
    radioBorderColor,
    radioButtonRadius,
    radioButtonBgdColor,
  
    // Button
    btnFontFamily,
    primaryBtnBgd,
    primaryBtnActBgd,
    primaryBtnColor,
    primaryBtnActColor,
    primaryBtnBgdHover,
    primaryBtnRadius,
    primaryBtnFontSizeDefault,
    primaryBtnFontSizeSmall,
    primaryBtnFontSizeLarge,
    primaryBtnBorder,
  
    secondaryBtnBgd,
    secondaryBtnActBgd,
    secondaryBtnBgdHover,
    secondaryBtnColor,
    secondaryBtnActColor,
    secondaryBtnBorder,
  
    negativeBtnBgd,
    negativeBtnActBgd,
    negativeBtnBgdHover,
    negativeBtnColor,
    negativeBtnActColor,
  
    linkBtnBgd,
    linkBtnActBgd,
    linkBtnColor,
    linkBtnActColor,
    linkBtnActBgdHover,
    linkBtnBorder,
  
    floatingBtnBgd,
    floatingBtnActBgd,
    floatingBtnBgdHover,
    floatingBtnBorder,
    floatingBtnBorderHover,
    floatingBtnColor,
    floatingBtnActColor,
  
    ctaBtnBgd,
    ctaBtnBgdHover,
    ctaBtnActBgd,
    ctaBtnColor,
    ctaBtnActColor,
  
    selectionBtnBgd,
    selectionBtnActBgd,
    selectionBtnColor,
    selectionBtnActColor,
    selectionBtnBgdHover,
    selectionBtnBorder,
    selectionBtnBorderColor,
    selectionBtnBorderActColor,
  
    // Modal
    modalTitleColor,
    modalTitleFontSize,
    modalTitleFontSizeSmaller,
    modalFooterBgd,
    modalImagePlaceHolder,
    modalPadding,
  
    modalDialogBgd,
    modalDialogColor,
  
    modalLateralPadding,
    modalPortableLateralPadding,
    modalOverLayZ,
    modalOverlayBgd,
    modalContentZ,
    modalFooterZ,
    modalTitleZ,
    modalButtonZ,
    modalDropdownBackground,
  
    // Side Panel
    sidePanelBg,
    sidePanelInnerPadding,
    sideBarCloseBtnBgd,
    sideBarCloseBtnColor,
    sideBarCloseBtnBgdHover,
    sidePanelHeaderBg,
    sidePanelHeaderBorder,
    sidePanelScrollBarWidth,
    sidePanelScrollBarHeight,
    sidePanelTitleFontsize,
    sidePanelTitleLineHeight,
    panelHeaderBorderRadius,
    sidePanelBorder,
    sidePanelBorderColor,
  
    layerConfigGroupLabelLabelFontSize,
    layerConfigGroupMarginBottom,
    layerConfigGroupPaddingLeft,
  
    // Side Panel Panel
    chickletBgd,
    chickletBgdLT,
    panelBackground,
    panelContentBackground,
    panelBackgroundHover,
    panelBackgroundLT,
    panelToggleMarginRight,
    panelToggleBottomPadding,
    panelBoxShadow,
    panelBorderRadius,
    panelBorder,
    panelBorderColor,
    panelBorderLT,
    panelHeaderIcon,
    panelHeaderIconActive,
    panelHeaderIconHover,
    panelHeaderHeight,
    layerPanelHeaderHeight,
    panelDropdownScrollBar,
  
    layerTypeIconSizeL,
    layerTypeIconPdL,
    layerTypeIconSizeSM,
  
    // Text
    fontFamily,
    fontWeight,
    fontSize,
    lineHeight,
    textColor,
    textColorLT,
    dataTableTextColor,
    textColorHl,
    titleTextColor,
    subtextColor,
    subtextColorLT,
    subtextColorActive,
    panelToggleBorderColor,
    panelTabWidth,
    textTruncate,
    titleColorLT,
    tooltipBg,
    tooltipColor,
    tooltipBoxShadow,
    tooltipFontSize,
    logoColor,
  
    // Sidepanel divider
    sidepanelDividerBorder,
    sidepanelDividerMargin,
    sidepanelDividerHeight,
  
    // Bottom Panel
    bottomInnerPdSide,
    bottomInnerPdVert,
    bottomPanelGap,
    bottomWidgetPaddingTop,
    bottomWidgetPaddingRight,
    bottomWidgetPaddingBottom,
    bottomWidgetPaddingLeft,
    bottomWidgetBgd,
  
    // Slider
    sliderBarColor,
    sliderBarBgd,
    sliderBarHoverColor,
    sliderBarRadius,
    sliderBarHeight,
    sliderHandleHeight,
    sliderHandleWidth,
    sliderHandleColor,
    sliderHandleTextColor,
    sliderInactiveBorderColor,
    sliderBorderRadius,
    sliderHandleHoverColor,
    sliderHandleAfterContent,
    sliderHandleShadow,
    sliderInputHeight,
    sliderInputWidth,
    sliderMarginTopIsTime,
    sliderMarginTop,
    sliderMarginBottom,
  
    // Geocoder
    geocoderWidth,
    geocoderTop,
    geocoderRight,
    geocoderInputHeight,
  
    // Plot
    rangeBrushBgd,
    histogramFillInRange,
    histogramFillOutRange,
    axisFontSize,
    axisFontColor,
    timeTitleFontSize,
    rangePlotMargin,
    rangePlotMarginLarge,
    rangePlotH,
    rangePlotHLarge,
    rangePlotContainerH,
    rangePlotContainerHLarge,
  
    // Notifications
    notificationColors,
    notificationPanelWidth,
    notificationPanelItemWidth,
    notificationPanelItemHeight,
  
    // Data Table
    headerRowHeight,
    rowHeight,
    headerPaddingTop,
    headerPaddingBottom,
    cellPaddingSide,
    edgeCellPaddingSide,
    cellFontSize,
    gridPaddingSide,
    optionButtonColor,
    headerCellBackground,
    headerCellBorderColor,
    headerCellIconColor,
    cellBorderColor,
    evenRowBackground,
    oddRowBackground,
    pinnedGridBorderColor,
    // time display
    timeDisplayBorderRadius,
    timeDisplayHeight,
    timeDisplayMinWidth,
    timeDisplayOpacity,
    timeDisplayPadding,
  
    // export map
    exportIntraSectionMargin,
  
    // Action Panel
    actionPanelWidth,
    actionPanelHeight,
  
    // Breakpoints
    breakPoints,
  
    // progressbar
    progressBarColor,
    progressBarTrackColor,
  
    // layerConfigGroupLabel
    layerConfigGroupLabelBorderLeft,
    layerConfigGroupLabelMargin,
    layerConfigGroupLabelPadding,
    layerConfigGroupColor,
  
    // layerConfigGroupLabel label
    layerConfigGroupLabelLabelMargin,
  
    // StyledConfigGroupHeader
    styledConfigGroupHeaderBorder,
  
    // layerConfigurator
    layerConfiguratorBorder,
    layerConfiguratorBorderColor,
    layerConfiguratorMargin,
    layerConfiguratorPadding,
  
    // Styled token
    fieldTokenRightMargin
  };
  
  export const themeLT = {
    ...theme,
    // template
    activeColor: activeColorLT,
    input: inputLT,
    textColor: textColorLT,
    sidePanelBg: '#FFFFFF',
    selectColor: selectColorLT,
    titleTextColor: '#000000',
    sidePanelHeaderBg: '#F7F7F7',
    subtextColorActive: activeColorLT,
    tooltipBg: '#1869B5',
    tooltipColor: '#FFFFFF',
    dropdownListBgd: '#FFFFFF',
    toolbarItemBgdHover: '#F7F7F7',
    textColorHl: activeColorLT,
  
    inputBgd: '#F7F7F7',
    inputBgdHover: '#FFFFFF',
    inputBgdActive: '#FFFFFF',
    inputBgdActiveLT: '#FFFFFF',
    dropdownListHighlightBg: '#F0F0F0',
    toolbarItemIconHover: activeColorLT,
    panelBackground: '#F7F7F7',
    panelContentBackground: '#F7F7F7',
    bottomWidgetBgd: '#F7F7F7',
    panelBackgroundHover: '#F7F7F7',
    panelBorderColor: '#D3D8E0',
    panelHeaderIconActive: '#000000',
    panelHeaderIconHover: '#000000',
    sideBarCloseBtnBgd: '#F7F7F7',
    sideBarCloseBtnColor: textColorLT,
    sideBarCloseBtnBgdHover: '#F7F7F7',
  
    secondaryInputBgd: '#F7F7F7',
    secondaryInputBgdActive: '#F7F7F7',
    secondaryInputBgdHover: '#FFFFFF',
    secondaryInputBorderActiveColor: '#000000',
    secondaryInputBorderColor: 'none',
    secondaryInputColor: '#545454',
  
    chickletBgd: '#F7F7F7',
    mapPanelBackgroundColor: '#FFFFFF',
    mapPanelHeaderBackgroundColor: '#F7F7F7',
  
    sliderBarColor: '#A0A7B4',
    sliderBarBgd: '#D3D8E0',
    sliderHandleColor: '#F7F7F7',
    sliderInactiveBorderColor: '#F7F7F7',
    sliderHandleTextColor: '#F7F7F7',
    sliderHandleHoverColor: '#F7F7F7',
  
    subtextColor: subtextColorLT,
    switchBtnBgd: '#F7F7F7',
    secondarySwitchBtnBgd: '#F7F7F7',
    secondarySwitchTrackBgd: '#D3D8E0',
    switchBtnBgdActive: '#F7F7F7',
    switchTrackBgd: '#D3D8E0',
    switchTrackBgdActive: activeColorLT,
  
    // button switch background and hover color
    primaryBtnBgd: primaryBtnActBgd,
    primaryBtnActBgd: primaryBtnBgd,
    primaryBtnBgdHover: primaryBtnBgd,
  
    secondaryBtnBgd: secondaryBtnActBgd,
    secondaryBtnActBgd: secondaryBtnBgd,
    secondaryBtnBgdHover: secondaryBtnBgd,
  
    floatingBtnBgd: '#F7F7F7',
    floatingBtnActBgd: '#F7F7F7',
    floatingBtnBgdHover: '#F7F7F7',
    floatingBtnColor: subtextColor,
    floatingBtnActColor: activeColorLT,
  
    linkBtnActColor: textColorLT,
  
    rangeBrushBgd: '#D3D8E0',
    histogramFillInRange: activeColorLT,
    histogramFillOutRange: '#A0A7B4',
    axisFontColor: textColorLT
  };
  
  export const themeBS = {
    ...theme,
    activeColor: '#E2E2E2',
    dropdownListBgd: '#FFFFFF',
    toolbarItemBgdHover: '#F7F7F7',
    dropdownListBorderTop: 'none',
    dropdownListHighlightBg: '#F6F6F6',
    toolbarItemIconHover: '#000000',
    inputBgd: '#E2E2E2',
    inputBgdActive: '#E2E2E2',
    inputBgdHover: 'inherit',
    inputBorderActiveColor: '#000000',
    inputColor: '#000000',
    chickletBgd: '#E2E2E2',
    panelBackground: '#FFFFFF',
    panelBackgroundHover: '#EEEEEE',
    panelContentBackground: '#FFFFFF',
    bottomWidgetBgd: '#F7F7F7',
    panelHeaderIconActive: '#000000',
    panelHeaderIconHover: '#000000',
    panelBorderColor: '#E2E2E2',
    primaryBtnBgd: '#E2E2E2',
    primaryBtnBgdHover: '#333333',
    primaryBtnColor: '#000000',
    secondaryBtnActBgd: '#EEEEEE',
    secondaryBtnActColor: '#000000',
    secondaryBtnBgd: '#E2E2E2',
    secondaryBtnBgdHover: '#CBCBCB',
    ctnBtnBgd: '#E2E2E2',
    ctnBtnBgdHover: '333333',
    ctnBtnColor: '#000000',
    ctnBtnActColor: '#000000',
  
    sideBarCloseBtnBgd: '#E2E2E2',
    sideBarCloseBtnColor: '#000000',
    sideBarCloseBtnBgdHover: '#FFFFFF',
  
    floatingBtnBgd: '#FFFFFF',
    floatingBtnActBgd: '#EEEEEE',
    floatingBtnBgdHover: '#EEEEEE',
    floatingBtnColor: '#757575',
    floatingBtnActColor: '#000000',
  
    secondaryBtnColor: '#000000',
    secondaryInputBgd: '#F6F6F6',
    secondaryInputBgdActive: '#F6F6F6',
    secondaryInputBgdHover: '#F6F6F6',
    secondaryInputBorderActiveColor: '#000000',
    secondaryInputBorderColor: 'none',
    secondaryInputColor: '#545454',
    sidePanelBg: '#F6F6F6',
    sidePanelHeaderBg: '#FFFFFF',
    subtextColor: '#AFAFAF',
    panelTabColor: '#AFAFAF',
    subtextColorActive: '#000000',
    textColor: '#000000',
    textColorHl: '#545454',
    mapPanelBackgroundColor: '#F6F6F6',
    mapPanelHeaderBackgroundColor: '#FFFFFF',
    titleTextColor: '#000000',
    switchBtnBgdActive: '#000000',
    switchBtnBgd: '#FFFFFF',
    switchTrackBgdActive: '#E2E2E2',
    secondarySwitchTrackBgd: '#E2E2E2',
    switchTrackBgd: '#E2E2E2',
    secondarySwitchBtnBgd: '#FFFFFF',
    histogramFillInRange: '#000000',
    histogramFillOutRange: '#E2E2E2',
    rangeBrushBgd: '#E2E2E2',
    sliderBarBgd: '#E2E2E2',
    sliderHandleColor: '#FFFFFF',
    sliderInactiveBorderColor: '#FFFFFF',
    sliderHandleTextColor: '#FFFFFF',
    sliderBarColor: '#000000'
  };
  