backendless-ui-sdk/dist/components.less

Backendless UI-SDK

@themePrimary: #337ab7;

@disabledColor: gray;

@appBackgroundColor: #fff;
@appTextColor: contrast(@appBackgroundColor);

@isLightTheme: boolean(lightness(@appBackgroundColor) > 50%);

@appComponentShadowColor: #000;
@appComponentShadow: 0 3px 1px -2px fade(@appComponentShadowColor, 20%), 0 2px 2px 0 fade(@appComponentShadowColor, 14%), 0 1px 5px 0 fade(@appComponentShadowColor, 12%);

@appComponentBorderRadius: 4px;
@appComponentBorderWidth: 2px;

@appBlockBackgroundColor: @appBackgroundColor;
@appBlockTextColor: @appTextColor;
@appBlockBorder: 1px solid fadeout(contrast(@panelBackgroundColor), 95%);
@appBlockBorderRadius: @appComponentBorderRadius;
@appBlockShadow: @appComponentShadow;

@appLayoutMaxPhoneWidth: 479px;
@appLayoutMinTabletWidth: @appLayoutMaxPhoneWidth + 1px;
@appLayoutMaxTabletWidth: 839px;
@appLayoutMinDesktopWidth: @appLayoutMaxTabletWidth + 1px;

@appLayoutPhoneGap: 16px;
@appLayoutTabletGap: 16px;
@appLayoutDesktopGap: 24px;

html,
body,
#app,
#page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background-color: @appBackgroundColor;
}

* {
  box-sizing: border-box;
}

@tooltipColor: NULL;
@tooltipBackground: NULL;
@tooltipArrowBackground: @tooltipBackground;
@tooltipArrowVisibility: NULL;

.bl-tooltip {
  color: @tooltipColor;
  background: @tooltipBackground;

  .bl-tooltip--arrow {
    color: @tooltipArrowBackground;
    visibility: @tooltipArrowVisibility;
  }
}



/*************************************************/
/*************************************************/
/*****    component: visualizations-common    *****/
@commonVisErrorColor: #f44336;
@commonVisSuccessColor: #5BC069;
@commonVisWarningColor: #f0ad4e;

@commonVisTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@commonVisTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@commonVisTextColorActive: @themePrimary;
@commonVisTextColorHover: darken(@commonVisTextColorActive, 15%);

@commonVisDisabledColor: mix(@appBackgroundColor, @commonVisTextColor);

@commonVisBorderColor: if(@isLightTheme, darken(@appBackgroundColor, 9%), lighten(@appBackgroundColor, 9%));

@commonVisBackgroundPrimary: @appBackgroundColor;
@commonVisBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@commonVisBackgroundSecondaryAlt: hsl(hue(@themePrimary), saturation(@themePrimary), if(@isLightTheme, lightness(@appBackgroundColor) - 4%, lightness(@appBackgroundColor) + 4%));

// Common table
@commonVisTableHeaderBackgroundColor: @commonVisBackgroundSecondaryAlt;
@commonVisTableHeaderTextColor: @commonVisTextColorSecondary;
@commonVisTableHeaderSortIconColor: @commonVisTextColor;
@commonVisTableHeaderSortIconColorActive: @commonVisTextColorActive;
@commonVisTableHeaderBorderColor: if(@isLightTheme, darken(@commonVisBackgroundSecondaryAlt, 9%), lighten(@commonVisBackgroundSecondaryAlt, 9%));
@commonVisTableHeaderBorder: 1px solid @commonVisTableHeaderBorderColor;
@commonVisTableBodyBorderColor: @commonVisBorderColor;
@commonVisTableBodyBorder: 1px solid @commonVisTableBodyBorderColor;
@commonVisTableBodyRowBackgroundColor: @commonVisBackgroundPrimary;
@commonVisTableBodyRowBackgroundColorSecondary: @commonVisBackgroundSecondary;
@commonVisTableBodyRowTextColor: @commonVisTextColorSecondary;
@commonVisTableBodyRowCellTextColorAlt: #fff;

// Paging
@commonVisPagingTextColor: @commonVisTextColor;
@commonVisPagingBackgroundColor: @commonVisBackgroundSecondary;
@commonVisPagingBorderTopColor: @commonVisBorderColor;
@commonVisPagingTextColorDisabled: @commonVisDisabledColor;
@commonVisPagingCurrentPageBackgroundColor: @commonVisBackgroundPrimary;
@commonVisPagingCurrentPageBorderColor: @commonVisBorderColor;
@commonVisPagingCurrentPageBorderActive: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@commonVisPagingCurrentPageBorderRadiusActive: @inputOutlinedBorderRadius;
@commonVisPagingCurrentPageBoxShadowActive: none;
@commonVisPagingCurrentPageBoxShadowError: none;
@commonVisPagingPageSizeTextColor: @commonVisTextColor;
@commonVisPagingPageSizeTextColorActive: @commonVisTextColorActive;

// Modal
@commonVisModalHeaderBackgroundColor: @commonVisBackgroundPrimary;
@commonVisModalHeaderTextColor: @commonVisTextColorSecondary;
@commonVisModalHeaderButtonColor: @commonVisTextColorSecondary;
@commonVisModalHeaderBorderBottomColor: @commonVisBorderColor;

@commonVisModalBodyTitleColor: @commonVisTextColorSecondary;
@commonVisModalBodyTextColor: @commonVisTextColor;
@commonVisModalBodyBackgroundColor: @commonVisBackgroundPrimary;
@commonVisModalBodyMultiControlAddColor: @commonVisSuccessColor;
@commonVisModalBodyMultiControlRemoveColor: @commonVisTextColorSecondary;

@commonVisModalSectionBackgroundColor: @commonVisBackgroundSecondary;
@commonVisModalFooterBackgroundColor: @commonVisBackgroundSecondary;
@commonVisModalFooterBorderTopColor: @commonVisBorderColor;
@commonVisModalBodyIconColor: if(boolean(lightness(@commonVisModalBodyTitleColor) > 50%), darken(@commonVisModalBodyTitleColor, 20%), lighten(@commonVisModalBodyTitleColor, 20%));

// Geo editor
@commonVisGeoEditorModalBodyColor: @commonVisTextColorSecondary;
@commonVisGeoEditorModalTabsBorderColor: @commonVisModalHeaderBorderBottomColor;
@commonVisGeoEditorModalTabsIndicatorColor: @themePrimary;

// Visualizations toolbar
@commonVisToolbarBackgroundColor: @commonVisBackgroundSecondary;
@commonVisToolbarTextColor: @commonVisTextColor;
@commonVisToolbarTextColorHover: @commonVisTextColorHover;
@commonVisToolbarTextColorActive: @commonVisTextColorActive;
@commonVisToolbarTextColorDisabled: @commonVisDisabledColor;
@commonVisToolbarProgressBarColor: if(@isLightTheme, darken(@commonVisToolbarBackgroundColor, 8%), lighten(@commonVisToolbarBackgroundColor, 6%));
@commonVisToolbarProgressBarSliderColor: @commonVisTextColorActive;

.bl-common-table {
  .bl-common-table-header {
    background-color: @commonVisTableHeaderBackgroundColor;
    color: @commonVisTableHeaderTextColor;
    border-bottom: @commonVisTableBodyBorder;
  }

  .bl-common-table-header__sorting {
    .bl-common-table-header__sorting-asc-icon,
    .bl-common-table-header__sorting-desc-icon {
      border: 5px solid @commonVisTableHeaderSortIconColor;
      border-left-color: transparent;
      border-right-color: transparent;
    }

    .bl-common-table-header__sorting-asc-icon {
      border-top: none;
    }

    .bl-common-table-header__sorting-desc-icon {
      border-bottom: none;
      margin-top: 2px;
    }

    &.asc {
      .bl-common-table-header__sorting-asc-icon {
        border-bottom-color: @commonVisTableHeaderSortIconColorActive;
      }
    }

    &.desc {
      .bl-common-table-header__sorting-desc-icon {
        border-top-color: @commonVisTableHeaderSortIconColorActive;
      }
    }
  }

  .bl-common-table-row {
    background-color: @commonVisTableBodyRowBackgroundColor;

    &:nth-of-type(even) {
      background-color: @commonVisTableBodyRowBackgroundColorSecondary;
    }
  }

  .bl-common-table-row__cell {
    color: @commonVisTableBodyRowTextColor;
  }

  .bl-common-table-header .bl-common-table-header__cell {
    border-right: @commonVisTableHeaderBorder;
  }

  .bl-common-table-row .bl-common-table-row__cell {
    border-bottom: @commonVisTableBodyBorder;
    border-right: @commonVisTableBodyBorder;
  }

  .bl-common-pagination {
    color: @commonVisPagingTextColor;
    background-color: @commonVisPagingBackgroundColor;
    border-top: 1px solid @commonVisPagingBorderTopColor;

    .bl-pagination-page-controls {
      .bl-pagination-page-control-arrow {
        &.bl-pagination-page-control-arrow--disabled {
          color: @commonVisPagingTextColorDisabled;
        }
      }

      .bl-pagination-page {
        background-color: @commonVisPagingCurrentPageBackgroundColor;
        color: @commonVisTextColor;
        border-color: @commonVisPagingCurrentPageBorderColor;

        &:focus {
          box-shadow: @commonVisPagingCurrentPageBoxShadowActive;
          border: @commonVisPagingCurrentPageBorderActive;
          border-radius: @commonVisPagingCurrentPageBorderRadiusActive;

          &.bl-pagination-page--has-error {
            border-color: @commonVisErrorColor;
            box-shadow: @commonVisPagingCurrentPageBoxShadowError;
          }
        }
      }
    }

    .bl-pagination-page-size-controls {
      color: @commonVisPagingPageSizeTextColor;

      .bl-pagination-page-size {
        * {
          color: @commonVisPagingPageSizeTextColor;
        }

        &.bl-active-button--active {
          * {
            color: @commonVisPagingPageSizeTextColorActive;
          }
        }

        &.bl-active-button--disabled {
          * {
            color: @commonVisPagingTextColorDisabled;
          }
        }
      }
    }
  }

  .bl-local-type--label {
    color: @commonVisTableBodyRowCellTextColorAlt;
  }

  .bl-yes-no-value__cell-value {
    .bl-local-type-label--success {
      background-color: @commonVisSuccessColor;
    }

    .bl-local-type-label--warning {
      background-color: @commonVisWarningColor;
    }

    .bl-local-type-label--danger {
      background-color: @commonVisErrorColor;
    }
  }
}

.bl-ui-sdk-modal {
  .bl-modal-content {
    .Mui-error, .bl-visualizations-text-danger {
      color: @commonVisErrorColor;
    }

    .bl-modal-header {
      background-color: @commonVisModalHeaderBackgroundColor;
      border-bottom-color: @commonVisModalHeaderBorderBottomColor;

      .bl-modal-header-title {
        color: @commonVisModalHeaderTextColor;
      }

      .bl-modal-header-button {
        color: @commonVisModalHeaderButtonColor;
      }
    }

    .bl-modal-body {
      background-color: @commonVisModalBodyBackgroundColor;
      color: @commonVisModalBodyTextColor;

      .bl-modal-field-label, .bl-control-label, .bl-control-field {
        color: @commonVisModalBodyTitleColor;
      }

      .bl-multiple {
        .remove-control {
          color: @commonVisModalBodyMultiControlRemoveColor
        }

        .add-control {
          color: @commonVisModalBodyMultiControlAddColor
        }
      }
    }

    .bl-modal-footer {
      background-color: @commonVisModalFooterBackgroundColor;
      border-top-color: @commonVisModalFooterBorderTopColor;
    }
  }
}

.bl-ui-sdk-modal.bl-visualization--data-table-records-editor {
  .bl-visualization--data-table-records-editor--column-type {
    color: @commonVisModalBodyTitleColor;
    opacity: 0.4;
  }

  .bl-control-field .bl-visualization-icon {
    color: @commonVisModalBodyIconColor;
  }

  .bl-geo-editor-input--type-switcher {
    span {
      color: @themePrimary;

      &.bl-visualization--checked {
        color: @commonVisModalBodyTitleColor
      }
    }
  }
}

.bl-ui-sdk-modal .bl-table-text-template-creator {
  background-color: hsla(hue(@themePrimary), 100%, lightness(@themePrimary), 0.05);

  .bl-text-template-label {
    color: @commonVisModalBodyTitleColor
  }

  .bl-visualizations-text-danger {
    color: @commonVisErrorColor
  }
}

.bl-visualization-modal-data-settings .bl-visualization-data-settings--modal-section {
  .bl-visualizations-accordion--root {
    background-color: @commonVisModalSectionBackgroundColor;
  }

  .bl-visualizations-accordion-header--expand-icon {
    color: @commonVisModalBodyIconColor;
  }
}

.bl-visualization--geo-editor {
  .bl-modal-body {
    color: @commonVisGeoEditorModalBodyColor;
  }

  .bl-visualization--tabs-menu-container {
    border-bottom-color: @commonVisGeoEditorModalTabsBorderColor;
  }

  .bl-visualization--tabs-menu-container .bl-visualization--tabs-menu-indicator {
    background-color: @commonVisGeoEditorModalTabsIndicatorColor;
  }
}

.bl-table-column-path-builder {
  .bl-table-column-path-builder-item-label {
    color: @commonVisModalBodyTitleColor
  }
}

.bl-visualization-icon-danger {
  color: @commonVisErrorColor
}

.bl-calendar-visualization,
.bl-chart-visualization,
.bl-data-grid-visualization,
.bl-calendar-heatmap-visualization,
.bl-view-data-grid {
  .bl-visualization-toolbar {
    background-color: @commonVisToolbarBackgroundColor;

    .bl-visualization-toolbar__progress-bar {
      background-color: @commonVisToolbarProgressBarColor;
    }

    .bl-visualization-toolbar__progress-bar-slider {
      background-color: @commonVisToolbarProgressBarSliderColor;
    }
  }

  .bl-active-button.bl-visualization-component {
    * {
      color: @commonVisToolbarTextColor;
    }

    &:not(.bl-active-button--disabled):hover {
      * {
        color: @commonVisToolbarTextColorHover;
      }
    }

    &.bl-active-button--active {
      * {
        color: @commonVisToolbarTextColorActive;
      }
    }

    &.bl-active-button--disabled {
      * {
        color: @commonVisToolbarTextColorDisabled;
      }
    }
  }
}

/******    component: visualizations-common    *****/
/***************************************************/
/***************************************************/



/***********************************************************/
/***********************************************************/
/*****    component: calendar-heatmap-visualization    *****/
@calendarHeatmapVisualizationBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));

@calendarHeatmapVisualizationTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@calendarHeatmapVisualizationTextColorActive: @themePrimary;
@calendarHeatmapVisualizationTextColorHover: darken(@calendarHeatmapVisualizationTextColorActive, 15%);

// panel
@calendarHeatmapVisualizationBorderRadius: @appComponentBorderRadius;
@calendarHeatmapVisualizationBoxShadow: @appComponentShadow;
@calendarHeatmapVisualizationBorder: @panelBorder;

// relation panel
@calendarHeatmapVisualizationRelationPanelBackgroundColor: @commonVisBackgroundSecondary;

// coloring modal
@calendarHeatmapVisualizationColoringModalBackgroundColor: @calendarHeatmapVisualizationBackgroundSecondary;
@calendarHeatmapVisualizationColoringModalSectionBackgroundColor: @calendarHeatmapVisualizationBackgroundColor;
@calendarHeatmapVisualizationColoringModalSectionTitleColor: @calendarHeatmapVisualizationTextColorSecondary;

// container
@calendarHeatmapVisualizationBackgroundColor: @appBackgroundColor;
@calendarHeatmapVisualizationGridBordersColor: if(@isLightTheme, darken(@calendarHeatmapVisualizationBackgroundColor, 5%), lighten(@calendarHeatmapVisualizationBackgroundColor, 4%));

// navigator
@calendarHeatmapVisualizationNavigatorTitleColor: @calendarHeatmapVisualizationTextColorSecondary;
@calendarHeatmapVisualizationNavigatorTextColorHover: @calendarHeatmapVisualizationTextColorHover;

// week days
@calendarHeatmapVisualizationWeeksDayColor: @calendarHeatmapVisualizationTextColorSecondary;
@calendarHeatmapVisualizationWeeksTodayBackgroundColor: @calendarHeatmapVisualizationTextColorActive;
@calendarHeatmapVisualizationWeeksTodayColor: if(boolean(lightness(@calendarHeatmapVisualizationWeeksTodayBackgroundColor) > 50%), #000, #FFF);

// cell
@calendarHeatmapVisualizationCellBorderColor: @calendarHeatmapVisualizationGridBordersColor;
@calendarHeatmapVisualizationCellMonthBorderColor: if(@isLightTheme, darken(@calendarHeatmapVisualizationBackgroundSecondary, 45%), lighten(@calendarHeatmapVisualizationBackgroundSecondary, 45%));
@calendarHeatmapVisualizationCellTodayDateBackgroundColor: @calendarHeatmapVisualizationTextColorActive;
@calendarHeatmapVisualizationCellMonthHiddenBackgroundColor: @calendarHeatmapVisualizationBackgroundSecondary;
@calendarHeatmapVisualizationCellDateColor: @calendarHeatmapVisualizationTextColorSecondary;
@calendarHeatmapVisualizationCellTodayDateColor: if(boolean(lightness(@calendarHeatmapVisualizationCellTodayDateBackgroundColor) > 50%), #000, #FFF);
@calendarHeatmapVisualizationCellWeekendBackgroundColor: if(@isLightTheme, darken(@calendarHeatmapVisualizationBackgroundColor, 2%), lighten(@calendarHeatmapVisualizationBackgroundColor, 2%));
@calendarHeatmapVisualizationCellMonthNameColor: @calendarHeatmapVisualizationTextColorActive;

.bl-calendar-heatmap-visualization {
  position: relative;
  border-radius: @calendarHeatmapVisualizationBorderRadius;
  box-shadow: @calendarHeatmapVisualizationBoxShadow;
  border: @calendarHeatmapVisualizationBorder;

  .bl-heat-map {
    background-color: @calendarHeatmapVisualizationBackgroundColor;

    .bl-calendar--period-title {
      color: @calendarHeatmapVisualizationNavigatorTitleColor;
    }

    .bl-calendar--navigator-control,
    .bl-switch-label-root {
      &:hover {
        color: @calendarHeatmapVisualizationNavigatorTextColorHover;
      }
    }

    .bl-calendar-weeks-day {
      color: @calendarHeatmapVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date {
      color: @calendarHeatmapVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date--today {
      background-color: @calendarHeatmapVisualizationWeeksTodayBackgroundColor;
      color: @calendarHeatmapVisualizationWeeksTodayColor;
    }

    .bl-calendar-day-cell {
      border-color: @calendarHeatmapVisualizationCellBorderColor;

      &.border-bottom::after,
      &.border-right::before {
        background-color: @calendarHeatmapVisualizationCellMonthBorderColor;
      }
    }

    .bl-histogram .bl-calendar-day-cell--hidden {
      background-color: @calendarHeatmapVisualizationCellMonthHiddenBackgroundColor;
    }

    .bl-histogram-by-weeks .bl-calendar-grid-row:first-child {
      border-left-color: @calendarHeatmapVisualizationCellBorderColor;
    }

    .bl-calendar-day-cell--date {
      color: @calendarHeatmapVisualizationCellDateColor;
    }

    .bl-calendar-day-cell--today {
      .bl-calendar-day-cell--date {
        background-color: @calendarHeatmapVisualizationCellTodayDateBackgroundColor;
        color: @calendarHeatmapVisualizationCellTodayDateColor;
      }
    }

    .bl-calendar-day-cell--weekend {
      background-color: @calendarHeatmapVisualizationCellWeekendBackgroundColor;
    }

    .bl-calendar-grid-month-name {
      color: @calendarHeatmapVisualizationCellMonthNameColor;
    }

    .bl-grid-by-months {
      .bl-calendar-day-cell--today {
        .bl-calendar-day-cell--date {
          color: @calendarHeatmapVisualizationCellTodayDateBackgroundColor;
        }
      }
    }

    .bl-heat-map-calendar--summary,
    .bl-heat-map-calendar--summary-header,
    .bl-heat-map-summary-chart {
      border-color: @calendarHeatmapVisualizationGridBordersColor;
    }
  }
}

.bl-ui-sdk-modal.bl-heat-map-visualization--data-source-settings-modal {
  .bl-data-source-settings-relations-panel,
  .bl-related-selection {
    background-color: @calendarHeatmapVisualizationRelationPanelBackgroundColor;
  }
}

.bl-ui-sdk-modal.bl-heat-map-visualization--coloring-modal {
  .bl-modal-body,
  .bl-modal-header,
  .bl-coloring-modal--ranges-settings {
    background-color: @calendarHeatmapVisualizationColoringModalBackgroundColor;
  }

  .bl-coloring-modal--section {
    background-color: @calendarHeatmapVisualizationColoringModalSectionBackgroundColor;
  }

  .bl-panel__title {
    color: @calendarHeatmapVisualizationColoringModalSectionTitleColor;
  }
}

/*****    component: calendar-heatmap-visualization    *****/
/***********************************************************/
/***********************************************************/


/************************************************/
/************************************************/
/*****    component: chart-visualization    *****/
@chartVisualizationBackgroundPrimary: @appBackgroundColor;
@chartVisualizationBorderRadius: @appComponentBorderRadius;
@chartVisualizationBoxShadow: @appComponentShadow;
@chartVisualizationBorder: @panelBorder;
@chartVisualizationBackgroundSecondary: if(@isLightTheme, darken(@chartVisualizationBackgroundPrimary, 4%), lighten(@chartVisualizationBackgroundPrimary, 3%));

// preview
@chartVisualizationBackgroundColor: @chartVisualizationBackgroundPrimary;
@chartVisualizationDateSetupControlColor: if(@isLightTheme, darken(@chartVisualizationBackgroundSecondary, 45%), lighten(@chartVisualizationBackgroundSecondary, 45%));
@chartVisualizationDateSetupControlBackgroundColor: @chartVisualizationBackgroundSecondary;

// modal
@chartVisualizationModalBodyTitleColor: hsl(0, 0%, if(@isLightTheme, 20%, 80%));

// data setup modal
@chartVisualizationDataSetupModalBackgroundColor: @chartVisualizationBackgroundSecondary;
@chartVisualizationDataSetupModalSectionBackgroundColor: @chartVisualizationBackgroundPrimary;

@chartVisualizationXAxisBackgroundColor: @chartVisualizationDataSetupModalSectionBackgroundColor;

@chartVisualizationSeriesItemBackgroundColor: @chartVisualizationDataSetupModalBackgroundColor;

@chartVisualizationSeriesItemHeaderBorderColor: if(@isLightTheme, darken(@chartVisualizationBackgroundPrimary, 9%), lighten(@chartVisualizationBackgroundPrimary, 9%));
@chartVisualizationSeriesItemBorder: 1px solid @chartVisualizationSeriesItemHeaderBorderColor;
@chartVisualizationSeriesItemTitleColor: @appTextColor;

.bl-chart-visualization {
  position: relative;
  border-radius: @chartVisualizationBorderRadius;
  box-shadow: @chartVisualizationBoxShadow;
  border: @chartVisualizationBorder;

  .bl-chart-visualization-container {
    .bl-chart-visualization-preview,
    .bl-chart-visualization--date-setup {
      background-color: @chartVisualizationBackgroundColor;
    }

    .bl-chart--date-setup-control {
      background-color: @chartVisualizationDateSetupControlBackgroundColor;
      color: @chartVisualizationDateSetupControlColor;
    }

    .bl-datetime-picker-input-icon {
      color: @chartVisualizationDateSetupControlColor;
    }
  }
}

.bl-chart-visualization-modal.bl-ui-sdk-modal .bl-modal-content .bl-modal-body {
  .bl-chart-visualization-series-settings {
    .bl-x-axis-settings-container {
      background-color: @chartVisualizationXAxisBackgroundColor;
    }

    .bl-chart-series-item-settings {
      background-color: @chartVisualizationSeriesItemBackgroundColor;

      .bl-series-item-header {
        border-bottom: @chartVisualizationSeriesItemBorder;

        .bl-series-item-title {
          color: @chartVisualizationSeriesItemTitleColor;
        }
      }
    }
  }
}

.bl-ui-sdk-modal.bl-chart-visualization-series-modal {
  color: @chartVisualizationModalBodyTitleColor;

  .bl-modal-header,
  .bl-modal-body,
  .bl-modal-footer {
    background-color: @chartVisualizationDataSetupModalBackgroundColor;
  }

  .bl-x-axis-settings-container,
  .bl-y-axis-settings-container,
  .bl-chart-type-settings-container {
    background-color: @chartVisualizationDataSetupModalSectionBackgroundColor;
  }
}

/*****    component: chart-visualization    *****/
/************************************************/
/************************************************/


/**********************************/
/**********************************/
/*****    component: chart    *****/
@chartBorderRadius: @appComponentBorderRadius;
@chartBoxShadow: @appComponentShadow;
@chartBackgroundColor: #FFF;

.bl-chart {
  position:relative;
  background-color:@chartBackgroundColor;
  border-radius: @chartBorderRadius;
  box-shadow: @chartBoxShadow;
}
/*****    component: chart    *****/
/**********************************/
/**********************************/


/****************************************************/
/****************************************************/
/*****    component: data-grid-visualization    *****/
//general
@dataGridBorderColor: if(@isLightTheme, darken(@appBackgroundColor, 9%), lighten(@appBackgroundColor, 9%));

@dataGridBackgroundPrimary: @appBackgroundColor;
@dataGridBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@dataGridBackgroundSecondaryAlt: hsl(hue(@themePrimary), saturation(@themePrimary), if(@isLightTheme, lightness(@appBackgroundColor) - 4%, lightness(@appBackgroundColor) + 4%));

@dataGridTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@dataGridTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@dataGridTextColorActive: @themePrimary;
@dataGridTextColorHover: darken(@dataGridTextColorActive, 15%);

@dataGridDisabledColor: mix(@appBackgroundColor, @dataGridTextColor);

@dataGridBorderRadius: @appComponentBorderRadius;
@dataGridBorder: @appBlockBorder;
@dataGridShadow: @appComponentShadow;

@dataGridErrorColor: #f44336;
@dataGridSuccessColor: #5BC069;
@dataGridWarningColor: #f0ad4e;

//container
@dataGridContainerBackgroundColor: @dataGridBackgroundPrimary;
@dataGridContainerBorderTop: @dataGridBorderColor;
@dataGridContainerHeaderBackgroundColor: @dataGridBackgroundSecondaryAlt;
@dataGridContainerHeaderBorderColor: if(@isLightTheme, darken(@dataGridBackgroundSecondaryAlt, 9%), lighten(@dataGridBackgroundSecondaryAlt, 9%));
@dataGridContainerHeaderBorder: 1px solid @dataGridContainerHeaderBorderColor;
@dataGridContainerHeaderTextColor: @dataGridTextColorSecondary;
@dataGridContainerHeaderSortIconColor: @dataGridTextColor;
@dataGridContainerHeaderSortIconColorActive: @dataGridTextColorActive;
@dataGridContainerHeaderResizerStripColor: @dataGridTextColorActive;
@dataGridContainerBodyRowBackgroundColor: @dataGridBackgroundPrimary;
@dataGridContainerBodyRowBackgroundColorSecondary: @dataGridBackgroundSecondary;
@dataGridContainerBodyRowTextColor: @dataGridTextColorSecondary;
@dataGridContainerBodyRowCellTextColorAlt: #fff;
@dataGridContainerBodyBorderColor: @dataGridBorderColor;
@dataGridContainerBodyBorder: 1px solid @dataGridContainerBodyBorderColor;
@dataGridContainerBodyGroupLvl1TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 2%), lighten(@dataGridBackgroundPrimary, 9%));
@dataGridContainerBodyGroupLvl1BackgroundColor: lighten(@dataGridContainerBodyGroupLvl1TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl1BorderColor: darken(@dataGridContainerBodyGroupLvl1TitleBackgroundColor, 9%);
@dataGridContainerBodyGroupLvl1PagingBackgroundColor: @dataGridContainerBodyGroupLvl1TitleBackgroundColor;
@dataGridContainerBodyGroupLvl2TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 7%), lighten(@dataGridBackgroundPrimary, 6%));
@dataGridContainerBodyGroupLvl2BackgroundColor: lighten(@dataGridContainerBodyGroupLvl2TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl2BorderColor: darken(@dataGridContainerBodyGroupLvl2TitleBackgroundColor, 9%);
@dataGridContainerBodyGroupLvl2PagingBackgroundColor: @dataGridContainerBodyGroupLvl2TitleBackgroundColor;
@dataGridContainerBodyGroupLvl3TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 11%), lighten(@dataGridBackgroundPrimary, 2%));
@dataGridContainerBodyGroupLvl3BackgroundColor: lighten(@dataGridContainerBodyGroupLvl3TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl3BorderColor: darken(@dataGridContainerBodyGroupLvl3TitleBackgroundColor, 9%);
@dataGridContainerBodyGroupLvl3PagingBackgroundColor: @dataGridContainerBodyGroupLvl3TitleBackgroundColor;
@dataGridContainerBodyGroupTitleColor: @dataGridTextColorSecondary;
@dataGridContainerBodyFreezedBorderRight: 1px solid @dataGridBorderColor;
@dataGridContainerBodyGroupedBackgroundColor: @dataGridBackgroundPrimary;

//pagination
@dataGridPagingTextColor: @dataGridTextColor;
@dataGridPagingBackgroundColor: @dataGridBackgroundSecondary;
@dataGridPagingBorderTopColor: @dataGridBorderColor;
@dataGridPagingTextColorDisabled: @dataGridDisabledColor;
@dataGridPagingCurrentPageBackgroundColor: @dataGridBackgroundPrimary;
@dataGridPagingCurrentPageBorderColor: @dataGridBorderColor;
@dataGridPagingCurrentPageBorderActive: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@dataGridPagingCurrentPageBorderRadiusActive: @inputOutlinedBorderRadius;
@dataGridPagingCurrentPageBoxShadowActive: none;
@dataGridPagingCurrentPageBoxShadowError: none;
@dataGridPagingPageSizeTextColor: @dataGridTextColor;
@dataGridPagingPageSizeTextColorActive: @dataGridTextColorActive;

//group pagination
@dataGridGroupPagingBackgroundColor: @dataGridBackgroundSecondary;
@dataGridGroupPagingTextColor: @dataGridTextColor;
@dataGridGroupPagingButtonColor: @dataGridTextColor;
@dataGridGroupPagingButtonColorActive: @dataGridTextColorActive;
@dataGridGroupPagingButtonColorDisabled: @dataGridDisabledColor;

//density
@dataGridDensityMenuBackgroundColor: @dataGridBackgroundPrimary;
@dataGridDensityMenuTextColor: @dataGridTextColorSecondary;
@dataGridDensityMenuTextColorActive: @dataGridBackgroundPrimary;
@dataGridDensityMenuBackgroundColorActive: @dataGridTextColorHover;

.bl-data-grid-visualization, .bl-view-data-grid {
  position: relative;
  border: @dataGridBorder;
  box-shadow: @dataGridShadow;
  border-radius: @dataGridBorderRadius;

  .bl-data-grid {
    color: @dataGridTextColor;

    .bl-data-grid-container {
      background-color: @dataGridContainerBackgroundColor;
      border-top: 1px solid @dataGridContainerBorderTop;

      .bl-common-table-header {
        background-color: @dataGridContainerHeaderBackgroundColor;
        color: @dataGridContainerHeaderTextColor;
        border-bottom: @dataGridContainerBodyBorder;

        .bl-common-table-header__cell {
          .bl-common-table-header__cell-title {
            .bl-common-table-header__sorting {
              .bl-common-table-header__sorting-asc-icon,
              .bl-common-table-header__sorting-desc-icon {
                border: 5px solid @dataGridContainerHeaderSortIconColor;
                border-left-color: transparent;
                border-right-color: transparent;
              }

              .bl-common-table-header__sorting-asc-icon {
                border-top: none;
              }

              .bl-common-table-header__sorting-desc-icon {
                border-bottom: none;
                margin-top: 2px;
              }

              &.asc {
                .bl-common-table-header__sorting-asc-icon {
                  border-bottom-color: @dataGridContainerHeaderSortIconColorActive;
                }
              }

              &.desc {
                .bl-common-table-header__sorting-desc-icon {
                  border-top-color: @dataGridContainerHeaderSortIconColorActive;
                }
              }
            }
          }

          .bl-common-table-header__resizer {
            &:hover {
              .bl-common-table-header__resizer-strip {
                background-color: @dataGridContainerHeaderResizerStripColor;
              }
            }
          }
        }
      }

      .bl-data-grid-body {
        .bl-common-table-row__cell, .bl-data-grid-group__title {
          .bl-local-type--label {
            color: @dataGridContainerBodyRowCellTextColorAlt;
          }

          .bl-yes-no-value__cell-value {
            .bl-local-type-label--success {
              background-color: @dataGridSuccessColor;
            }

            .bl-local-type-label--warning {
              background-color: @dataGridWarningColor;
            }

            .bl-local-type-label--danger {
              background-color: @dataGridErrorColor;
            }
          }
        }

        .bl-common-table-row {
          background-color: @dataGridContainerBodyRowBackgroundColor;

          &:nth-of-type(even) {
            background-color: @dataGridContainerBodyRowBackgroundColorSecondary;
          }

          .bl-common-table-row__cell {
            color: @dataGridContainerBodyRowTextColor;
          }
        }
      }

      .bl-common-table-header .bl-common-table-header__cell {
        border-right: @dataGridContainerHeaderBorder;
      }

      .bl-data-grid-body .bl-common-table-row .bl-common-table-row__cell {
        border-bottom: @dataGridContainerBodyBorder;
        border-right: @dataGridContainerBodyBorder;
      }

      .bl-data-grid-group {
        &.bl-data-grid-group-level-3 {
          background-color: @dataGridContainerBodyGroupLvl3BackgroundColor;
          border-color: @dataGridContainerBodyGroupLvl3BorderColor;

          .bl-data-grid-group__title {
            background-color: @dataGridContainerBodyGroupLvl3TitleBackgroundColor;
          }

          .bl-data-grid-group-pagination {
            background-color: @dataGridContainerBodyGroupLvl3PagingBackgroundColor;
          }
        }

        &.bl-data-grid-group-level-2 {
          background-color: @dataGridContainerBodyGroupLvl2BackgroundColor;
          border-color: @dataGridContainerBodyGroupLvl2BorderColor;

          .bl-data-grid-group__title {
            background-color: @dataGridContainerBodyGroupLvl2TitleBackgroundColor;
          }

          .bl-data-grid-group-pagination {
            background-color: @dataGridContainerBodyGroupLvl2PagingBackgroundColor;
          }
        }

        &.bl-data-grid-group-level-1 {
          background-color: @dataGridContainerBodyGroupLvl1BackgroundColor;
          border-color: @dataGridContainerBodyGroupLvl1BorderColor;

          .bl-data-grid-group__title {
            background-color: @dataGridContainerBodyGroupLvl1TitleBackgroundColor;
          }

          .bl-data-grid-group-pagination {
            background-color: @dataGridContainerBodyGroupLvl1PagingBackgroundColor;
          }
        }

        .bl-data-grid-group__title {
          color: @dataGridContainerBodyGroupTitleColor
        }
      }

      .bl-data-grid-left-pane {
        border-right: @dataGridContainerBodyFreezedBorderRight;
      }

      .bl-data-grid-left-pane, .bl-data-grid-right-pane {
        background: @dataGridContainerBodyGroupedBackgroundColor;
      }
    }

    .bl-data-grid-pagination {
      color: @dataGridPagingTextColor;
      background-color: @dataGridPagingBackgroundColor;
      border-top: 1px solid @dataGridPagingBorderTopColor;

      .bl-pagination-page-controls {
        .bl-pagination-page-control-arrow {
          &.bl-pagination-page-control-arrow--disabled {
            color: @dataGridPagingTextColorDisabled;
          }
        }

        .bl-pagination-page {
          background-color: @dataGridPagingCurrentPageBackgroundColor;
          color: @dataGridTextColor;
          border-color: @dataGridPagingCurrentPageBorderColor;

          &:focus {
            box-shadow: @dataGridPagingCurrentPageBoxShadowActive;
            border: @dataGridPagingCurrentPageBorderActive;
            border-radius: @dataGridPagingCurrentPageBorderRadiusActive;

            &.bl-pagination-page--has-error {
              border-color: @dataGridErrorColor;
              box-shadow: @dataGridPagingCurrentPageBoxShadowError;
            }
          }
        }
      }

      .bl-pagination-page-size-controls {
        color: @dataGridPagingPageSizeTextColor;

        .bl-pagination-page-size {
          * {
            color: @dataGridPagingPageSizeTextColor;
          }

          &.bl-active-button--active {
            * {
              color: @dataGridPagingPageSizeTextColorActive;
            }
          }

          &.bl-active-button--disabled {
            * {
              color: @dataGridPagingTextColorDisabled;
            }
          }
        }
      }
    }

    .bl-data-grid-group-pagination {
      background-color: @dataGridGroupPagingBackgroundColor;

      .bl-data-grid-page-control {
        .bl-active-button {
          * {
            color: @dataGridGroupPagingButtonColorActive;
          }
        }

        .bl-active-button--disabled {
          * {
            color: @dataGridGroupPagingButtonColorDisabled;
          }
        }
      }

      .bl-data-grid-page-size-control {
        color: @dataGridGroupPagingTextColor;

        .bl-data-grid-page-size-btn {
          * {
            color: @dataGridGroupPagingButtonColor;
          }

          &.bl-active-button--active {
            * {
              color: @dataGridGroupPagingButtonColorActive;
            }
          }

          &.bl-active-button--disabled {
            * {
              color: @dataGridGroupPagingButtonColorDisabled;
            }
          }
        }
      }
    }
  }
}

.bl-data-grid-density-menu.bl-menu {
  ul {
    background-color: @dataGridDensityMenuBackgroundColor;

    li {
      color: @dataGridDensityMenuTextColor;

      &:hover,
      &.Mui-selected,
      &.Mui-selected:hover {
        color: @dataGridDensityMenuTextColorActive;
        background-color: @dataGridDensityMenuBackgroundColorActive;
      }
    }
  }
}

/*****    component: data-grid-visualization    *****/
/****************************************************/
/****************************************************/


/***************************************************/
/***************************************************/
/*****    component: calendar-visualization    *****/
// general
@calendarVisualizationBorderColor: if(@isLightTheme, darken(@appBackgroundColor, 9%), lighten(@appBackgroundColor, 9%));

@calendarVisualizationBackgroundPrimary: @appBackgroundColor;
@calendarVisualizationBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@calendarVisualizationBackgroundSecondaryAlt: hsl(hue(@themePrimary), saturation(@themePrimary), if(@isLightTheme, lightness(@appBackgroundColor) - 4%, lightness(@appBackgroundColor) + 4%));

@calendarVisualizationTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@calendarVisualizationTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@calendarVisualizationTextColorActive: @themePrimary;

@calendarVisualizationErrorColor: #f44336;
@calendarVisualizationSuccessColor: #5BC069;
@calendarVisualizationWarningColor: #f0ad4e;

// panel
@calendarVisualizationPanelBorderRadius: @appComponentBorderRadius;
@calendarVisualizationPanelShadow: @appComponentShadow;
@calendarVisualizationPanelBorder: @appBlockBorder;

// container
@calendarVisualizationBackgroundColor: @appBackgroundColor;
@calendarVisualizationGridBordersColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 5%), lighten(@calendarVisualizationBackgroundColor, 4%));

// navigator
@calendarVisualizationNavigatorTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationNavigatorBtnBackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationNavigatorBtnColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundSecondary, 45%), lighten(@calendarVisualizationBackgroundSecondary, 45%));

// week days
@calendarVisualizationWeeksDayColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationWeeksTodayBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationWeeksTodayColor: if(boolean(lightness(@calendarVisualizationWeeksTodayBackgroundColor) > 50%), #000, #FFF);

// all day events
@calendarVisualizationAllDayEventsColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 50%), lighten(@calendarVisualizationBackgroundColor, 50%));
@calendarVisualizationAllDayEventsBorderColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationAllDayEventsHoverBackgroundColor: @calendarVisualizationAllDayEventsBorderColor;

// cell
@calendarVisualizationCellBorderColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationCellTodayDateBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationCellDateColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationCellTodayDateColor: if(boolean(lightness(@calendarVisualizationCellTodayDateBackgroundColor) > 50%), #000, #FFF);
@calendarVisualizationCellWeekendBackgroundColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 2%), lighten(@calendarVisualizationBackgroundColor, 2%));
@calendarVisualizationCellHoveredBackgroundColor: @calendarVisualizationBackgroundSecondaryAlt;
@calendarVisualizationCellAddBtnBackgroundColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationCellAddBtnColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationCellShowMoreColor: @calendarVisualizationTextColorSecondary;

// timeline grid
@calendarVisualizationTimelineLabelColor: @calendarVisualizationAllDayEventsColor;
@calendarVisualizationTimelineBorderColor: @calendarVisualizationCellBorderColor;

// show more menu
@calendarVisualizationShowMoreMenuBackgroundColor: @calendarVisualizationBackgroundColor;
@calendarVisualizationShowMoreMenuBorderColor: if(boolean(lightness(@calendarVisualizationShowMoreMenuBackgroundColor) > 50%), hsla(0, 0%, 0%, 0.05), hsla(0, 0%, 100%, 0.05));
@calendarVisualizationShowMoreMenuTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationShowMoreMenuIconColor: @calendarVisualizationTextColor;

//modal
@calendarVisualizationModalHeaderBorderBottomColor: @calendarVisualizationBorderColor;

@calendarVisualizationModalBodyTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationModalBodyIconColor: if(boolean(lightness(@calendarVisualizationModalBodyTitleColor) > 50%), darken(@calendarVisualizationModalBodyTitleColor, 20%), lighten(@calendarVisualizationModalBodyTitleColor, 20%));
@calendarVisualizationModalBodyBackgroundColor: @calendarVisualizationBackgroundPrimary;
@calendarVisualizationModalBodyMultiControlAddColor: @calendarVisualizationSuccessColor;
@calendarVisualizationModalBodyMultiControlRemoveColor: @calendarVisualizationModalBodyIconColor;

@calendarVisualizationModalFooterBackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationModalFooterBorderTopColor: @calendarVisualizationBorderColor;

// modal labels color
@calendarVisualizationLabelsColorModalSection1BackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationLabelsColorModalSection2BackgroundColor: @calendarVisualizationModalBodyBackgroundColor;
@calendarVisualizationLabelsColorModalAccordionHeaderIconColor: @calendarVisualizationModalBodyIconColor;
@calendarVisualizationLabelsColorModalAccordionHeaderDescribeColor: @calendarVisualizationLabelsColorModalAccordionHeaderIconColor;
@calendarVisualizationLabelsColorModalAccordionHeaderTitleColor: @calendarVisualizationTextColorSecondary;

.bl-calendar-visualization {
  position: relative;
  border-radius: @calendarVisualizationPanelBorderRadius;
  box-shadow: @calendarVisualizationPanelShadow;
  border: @calendarVisualizationPanelBorder;

  .bl-calendar-visualization-container {
    background-color: @calendarVisualizationBackgroundColor;

    .bl-calendar-visualization--navigator-title {
      color: @calendarVisualizationNavigatorTitleColor;
    }

    .bl-calendar-visualization--navigator-control-panel {
      .bl-calendar-visualization--navigator-control {
        background-color: @calendarVisualizationNavigatorBtnBackgroundColor;
        color: @calendarVisualizationNavigatorBtnColor;
      }
    }

    .bl-calendar-weeks-day {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date--today {
      background-color: @calendarVisualizationWeeksTodayBackgroundColor;
      color: @calendarVisualizationWeeksTodayColor;
    }

    .bl-calendar-visualization--all-day-events-container {
      color: @calendarVisualizationAllDayEventsColor;
      background-color: @calendarVisualizationBackgroundColor;
    }

    .bl-calendar-visualization--all-day-events--item {
      border-color: @calendarVisualizationAllDayEventsBorderColor;

      .bl-calendar-visualization--grid-row-cell--show-more {
        color: @calendarVisualizationAllDayEventsColor;
      }
    }

    .bl-calendar-visualization--all-day-events--item--with-value {
      &:hover {
        background-color: @calendarVisualizationAllDayEventsHoverBackgroundColor;
      }
    }

    .bl-calendar-visualization--grid-row-cell {
      border-color: @calendarVisualizationCellBorderColor;
    }

    .bl-calendar-visualization--grid-row-cell--date {
      color: @calendarVisualizationCellDateColor;
    }

    .bl-calendar-visualization--grid-row-cell--today {
      .bl-calendar-visualization--grid-row-cell--date {
        background-color: @calendarVisualizationCellTodayDateBackgroundColor;
        color: @calendarVisualizationCellTodayDateColor;
      }
    }

    .bl-calendar-visualization--grid-row-cell--weekend {
      background-color: @calendarVisualizationCellWeekendBackgroundColor;
    }

    .bl-calendar-visualization--grid-row-cell--timeline-mode {
      &:first-child {
        border-left-color: @calendarVisualizationCellBorderColor;
      }
    }

    .bl-calendar-visualization--grid-row-cell--hovered {
      background-color: @calendarVisualizationCellHoveredBackgroundColor;
    }

    .bl-calendar-visualization--grid-row-cell--header--add-btn {
      color: @calendarVisualizationCellAddBtnColor;

      &:hover {
        background-color: @calendarVisualizationCellAddBtnBackgroundColor;
      }
    }

    .bl-calendar-visualization--events-grid-timeline--show-more-out-fit-btn {
      background-color: @calendarVisualizationNavigatorBtnBackgroundColor;
      color: @calendarVisualizationNavigatorBtnColor;
    }

    .bl-calendar-visualization--grid-row-cell--show-more {
      color: @calendarVisualizationCellShowMoreColor;
    }

    .bl-calendar-visualization--timeline-item-label {
      color: @calendarVisualizationTimelineLabelColor
    }

    .bl-calendar-visualization--timeline-item-border {
      border-color: @calendarVisualizationTimelineBorderColor;
    }
  }
}

.bl-calendar-visualization--show-more-menu {
  .bl-calendar-visualization--grid-row-cell--show-more-menu {
    background-color: @calendarVisualizationShowMoreMenuBackgroundColor;
    border-color: @calendarVisualizationShowMoreMenuBorderColor;
  }

  .bl-calendar-visualization--grid-row-cell--show-more-menu-container-header-content {
    color: @calendarVisualizationShowMoreMenuTitleColor;
    border-bottom-color: @calendarVisualizationShowMoreMenuBorderColor;

    .bl-visualization-icon {
      color: @calendarVisualizationShowMoreMenuIconColor;
    }
  }
}

.bl-calendar-visualization-modal.bl-ui-sdk-modal {
  &.bl-calendar-visualization--labels-color-modal {
    .Mui-error, .bl-visualizations-text-danger {
      color: @calendarVisualizationErrorColor;
    }

    &.bl-visualizations-accordion--root-error {
      border-color: @calendarVisualizationErrorColor;
    }

    .bl-calendar-visualization--labels-color-modal-section > * {
      background-color: @calendarVisualizationLabelsColorModalSection1BackgroundColor;
    }

    .bl-visualizations-accordion-header--content {
      i {
        color: @calendarVisualizationLabelsColorModalAccordionHeaderIconColor;
      }

      .bl-visualizations-accordion-header--content-describe {
        color: @calendarVisualizationLabelsColorModalAccordionHeaderDescribeColor;
      }
    }

    .bl-visualizations-accordion-header--content-label {
      color: @calendarVisualizationLabelsColorModalAccordionHeaderTitleColor
    }

    .bl-visualizations-accordion-header--expand-icon {
      color: @calendarVisualizationLabelsColorModalAccordionHeaderIconColor;
    }

    .bl-visualizations-data-settings-conditions {
      .bl-multiple-child-wrapper:not(:first-child) {
        border-top-color: @calendarVisualizationModalHeaderBorderBottomColor;
      }
    }

    .bl-calendar-visualization--labels-color-modal--by-condition--item {
      background-color: @calendarVisualizationLabelsColorModalSection2BackgroundColor;
    }
  }
}

.bl-visualization-icon-danger {
  color: @calendarVisualizationErrorColor
}

/*****    component: calendar-visualization    *****/
/***************************************************/
/***************************************************/


/**********************************/
/**********************************/
/*****    component: block    *****/
.bl-block {
  display: flex;
}

/*****    component: block    *****/
/**********************************/
/**********************************/


/***********************************/
/***********************************/
/*****    component: button    *****/
@buttonThemeColor: @themePrimary;
@buttonDisabledColor: @disabledColor;
@buttonBorderRadius: @appComponentBorderRadius;
@buttonBorderWidth: @appComponentBorderWidth;
@buttonBorderType: solid;

@buttonContainedBackground: @buttonThemeColor;
@buttonContainedColor: contrast(@buttonContainedBackground);
@buttonContainedShadowColor: @appComponentShadowColor;
@buttonContainedShadowHover: 0px 2px 4px -1px fade(@buttonContainedShadowColor, 20%), 0px 4px 5px 0px fade(@buttonContainedShadowColor, 14%), 0px 1px 10px 0px fade(@buttonContainedShadowColor, 12%);
@buttonContainedShadowActive: 0px 5px 5px -3px fade(@buttonContainedShadowColor, 20%), 0px 8px 10px 1px fade(@buttonContainedShadowColor, 14%), 0px 3px 14px 2px fade(@buttonContainedShadowColor, 12%);
@buttonContainedDisabledBackground: @buttonDisabledColor;
@buttonContainedDisabledColor: contrast(@buttonContainedDisabledBackground);

@buttonOutlinedBackground: transparent;
@buttonOutlinedColor: @buttonThemeColor;
@buttonOutlinedBorderWidth: @buttonBorderWidth;
@buttonOutlinedBorderType: @buttonBorderType;
@buttonOutlinedBorderColor: @buttonOutlinedColor;
@buttonOutlinedBorder: @buttonOutlinedBorderWidth @buttonOutlinedBorderType @buttonOutlinedBorderColor;
@buttonOutlinedDisabledColor: @buttonDisabledColor;
@buttonOutlinedDisabledBorderWidth: @buttonOutlinedBorderWidth;
@buttonOutlinedDisabledBorderType: @buttonOutlinedBorderType;
@buttonOutlinedDisabledBorderColor: @buttonDisabledColor;
@buttonOutlinedDisabledBorder: @buttonOutlinedDisabledBorderWidth @buttonOutlinedDisabledBorderType @buttonOutlinedDisabledBorderColor;

@buttonTextBackground: transparent;
@buttonTextColor: @buttonThemeColor;
@buttonTextColorHover: fade(@buttonTextColor, 4%);
@buttonTextDisabledColor: @buttonDisabledColor;

@buttonSmallBorderRadius: @butto