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: autocomplete-google-places    *****/
@autocompleteGooglePlacesThemeColor: @themePrimary;

//default
@autocompleteGooglePlacesFilledShadow: NULL;
@autocompleteGooglePlacesFilledShadowHover: NULL;
@autocompleteGooglePlacesFilledShadowActive: NULL;
@autocompleteGooglePlacesFilledShadowDisabled: NULL;

@autocompleteGooglePlacesFilledBackground: #eee;
@autocompleteGooglePlacesFilledBackgroundHover: NULL;
@autocompleteGooglePlacesFilledBackgroundActive: #f1f1f1;
@autocompleteGooglePlacesFilledBackgroundDisabled: #dbdbdb;

@autocompleteGooglePlacesFilledBorder: NULL;
@autocompleteGooglePlacesFilledBorderHover: NULL;
@autocompleteGooglePlacesFilledBorderActive: NULL;
@autocompleteGooglePlacesFilledBorderDisabled: NULL;

@autocompleteGooglePlacesFilledUnderlineColor: @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesFilledUnderlineWidth: @appComponentBorderWidth;
@autocompleteGooglePlacesFilledUnderlineType: solid;
@autocompleteGooglePlacesFilledUnderline: @autocompleteGooglePlacesFilledUnderlineWidth @autocompleteGooglePlacesFilledUnderlineType @autocompleteGooglePlacesFilledUnderlineColor;

@autocompleteGooglePlacesFilledBorderRadius: @appComponentBorderRadius;
@autocompleteGooglePlacesFilledBorderRadiusTopLeft: @autocompleteGooglePlacesFilledBorderRadius;
@autocompleteGooglePlacesFilledBorderRadiusTopRight: @autocompleteGooglePlacesFilledBorderRadius;
@autocompleteGooglePlacesFilledBorderRadiusBottomRight: 0;
@autocompleteGooglePlacesFilledBorderRadiusBottomLeft: 0;

@autocompleteGooglePlacesFilledColor: contrast(@autocompleteGooglePlacesFilledBackground);
@autocompleteGooglePlacesFilledColorHover: contrast(@autocompleteGooglePlacesFilledBackground);
@autocompleteGooglePlacesFilledColorActive: contrast(@autocompleteGooglePlacesFilledBackground);
@autocompleteGooglePlacesFilledColorDisabled: contrast(@autocompleteGooglePlacesFilledBackgroundDisabled);

@autocompleteGooglePlacesFilledAutofillColor: @autocompleteGooglePlacesFilledColor;
@autocompleteGooglePlacesFilledAutofillColorHover: @autocompleteGooglePlacesFilledColorHover;
@autocompleteGooglePlacesFilledAutofillColorActive: @autocompleteGooglePlacesFilledColorActive;

@autocompleteGooglePlacesFilledAutofillBackgroundColor: transparent;
@autocompleteGooglePlacesFilledAutofillBackgroundColorHover: transparent;
@autocompleteGooglePlacesFilledAutofillBackgroundColorActive: transparent;

@autocompleteGooglePlacesFilledLabelColor: @autocompleteGooglePlacesFilledColor;
@autocompleteGooglePlacesFilledLabelColorHover: @autocompleteGooglePlacesFilledLabelColor;
@autocompleteGooglePlacesFilledLabelColorActive: @autocompleteGooglePlacesFilledLabelColor;
@autocompleteGooglePlacesFilledLabelColorDisabled: @disabledColor;

//outlined
@autocompleteGooglePlacesOutlinedShadow: NULL;
@autocompleteGooglePlacesOutlinedShadowHover: NULL;
@autocompleteGooglePlacesOutlinedShadowActive: NULL;
@autocompleteGooglePlacesOutlinedShadowDisabled: NULL;

@autocompleteGooglePlacesOutlinedBackground: NULL;
@autocompleteGooglePlacesOutlinedBackgroundHover: NULL;
@autocompleteGooglePlacesOutlinedBackgroundActive: NULL;
@autocompleteGooglePlacesOutlinedBackgroundDisabled: NULL;

@autocompleteGooglePlacesOutlinedBorderWidth: @appComponentBorderWidth;
@autocompleteGooglePlacesOutlinedBorderType: solid;

@autocompleteGooglePlacesOutlinedBorder: @autocompleteGooglePlacesOutlinedBorderWidth @autocompleteGooglePlacesOutlinedBorderType @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesOutlinedBorderHover: NULL;
@autocompleteGooglePlacesOutlinedBorderActive: @autocompleteGooglePlacesOutlinedBorderWidth @autocompleteGooglePlacesOutlinedBorderType @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesOutlinedBorderDisabled: @autocompleteGooglePlacesOutlinedBorderWidth @autocompleteGooglePlacesOutlinedBorderType @disabledColor;

@autocompleteGooglePlacesOutlinedBorderRadius: @appComponentBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusTopLeft: @autocompleteGooglePlacesOutlinedBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusTopRight: @autocompleteGooglePlacesOutlinedBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusBottomRight: @autocompleteGooglePlacesOutlinedBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusBottomLeft: @autocompleteGooglePlacesOutlinedBorderRadius;

@autocompleteGooglePlacesOutlinedColor: @appTextColor;
@autocompleteGooglePlacesOutlinedColorHover: @appTextColor;
@autocompleteGooglePlacesOutlinedColorActive: @appTextColor;
@autocompleteGooglePlacesOutlinedColorDisabled: @disabledColor;

@autocompleteGooglePlacesOutlinedAutofillColor: @autocompleteGooglePlacesOutlinedColor;
@autocompleteGooglePlacesOutlinedAutofillColorHover: @autocompleteGooglePlacesOutlinedColorHover;
@autocompleteGooglePlacesOutlinedAutofillColorActive: @autocompleteGooglePlacesOutlinedColorActive;

@autocompleteGooglePlacesOutlinedAutofillBackgroundColor: transparent;
@autocompleteGooglePlacesOutlinedAutofillBackgroundColorHover: transparent;
@autocompleteGooglePlacesOutlinedAutofillBackgroundColorActive: transparent;

@autocompleteGooglePlacesOutlinedLabelColor: @appTextColor;
@autocompleteGooglePlacesOutlinedLabelColorHover: @autocompleteGooglePlacesOutlinedLabelColor;
@autocompleteGooglePlacesOutlinedLabelColorActive: @autocompleteGooglePlacesOutlinedLabelColor;
@autocompleteGooglePlacesOutlinedLabelColorDisabled: @disabledColor;

//standard
@autocompleteGooglePlacesStandardShadow: NULL;
@autocompleteGooglePlacesStandardShadowHover: NULL;
@autocompleteGooglePlacesStandardShadowActive: NULL;
@autocompleteGooglePlacesStandardShadowDisabled: NULL;

@autocompleteGooglePlacesStandardUnderlineWidth: @appComponentBorderWidth;
@autocompleteGooglePlacesStandardUnderlineType: solid;
@autocompleteGooglePlacesStandardUnderlineColor: @autocompleteGooglePlacesStandardColor;
@autocompleteGooglePlacesStandardUnderlineColorActive: @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesStandardUnderlineColorDisabled: @disabledColor;

@autocompleteGooglePlacesStandardUnderline: @autocompleteGooglePlacesStandardUnderlineWidth @autocompleteGooglePlacesStandardUnderlineType fade(@autocompleteGooglePlacesStandardUnderlineColor, 70%);
@autocompleteGooglePlacesStandardUnderlineHover: calc(@autocompleteGooglePlacesStandardUnderlineWidth + 1px) @autocompleteGooglePlacesStandardUnderlineType @autocompleteGooglePlacesStandardUnderlineColor;
@autocompleteGooglePlacesStandardUnderlineActive: @autocompleteGooglePlacesStandardUnderlineWidth @autocompleteGooglePlacesStandardUnderlineType @autocompleteGooglePlacesStandardUnderlineColorActive;
@autocompleteGooglePlacesStandardUnderlineDisabled: @autocompleteGooglePlacesStandardUnderlineWidth @autocompleteGooglePlacesStandardUnderlineType @autocompleteGooglePlacesStandardUnderlineColorDisabled;

@autocompleteGooglePlacesStandardColor: @appTextColor;
@autocompleteGooglePlacesStandardColorHover: @appTextColor;
@autocompleteGooglePlacesStandardColorActive: @appTextColor;
@autocompleteGooglePlacesStandardColorDisabled: @disabledColor;

@autocompleteGooglePlacesStandardAutofillColor: @autocompleteGooglePlacesStandardColor;
@autocompleteGooglePlacesStandardAutofillColorHover: @autocompleteGooglePlacesStandardColorHover;
@autocompleteGooglePlacesStandardAutofillColorActive: @autocompleteGooglePlacesStandardColorActive;

@autocompleteGooglePlacesStandardLabelColor: @autocompleteGooglePlacesStandardColor;
@autocompleteGooglePlacesStandardLabelColorHover: @autocompleteGooglePlacesStandardLabelColor;
@autocompleteGooglePlacesStandardLabelColorActive: @autocompleteGooglePlacesStandardLabelColor;
@autocompleteGooglePlacesStandardLabelColorDisabled: @disabledColor;

@autocompleteGooglePlacesListBoxBackgroundColor: white;

@autocompleteGooglePlacesListBoxOptionBackgroundColor: white;
@autocompleteGooglePlacesListBoxNoOptionBackgroundColor: @autocompleteGooglePlacesListBoxOptionBackgroundColor;
@autocompleteGooglePlacesListBoxOptionBackgroundColorHover: fade(@disabledColor, 20%);
@autocompleteGooglePlacesListBoxNoOptionBackgroundColorHover: @autocompleteGooglePlacesListBoxOptionBackgroundColorHover;

@autocompleteGooglePlacesListBoxOptionTextColor: @appTextColor;
@autocompleteGooglePlacesListBoxNoOptionTextColor: @autocompleteGooglePlacesListBoxOptionTextColor;
@autocompleteGooglePlacesListBoxOptionTextColorHover: @appTextColor;
@autocompleteGooglePlacesListBoxNoOptionTextColorHover: @autocompleteGooglePlacesListBoxOptionTextColorHover;

@autocompleteGooglePlacesListBoxOptionSecondaryTextColor: @disabledColor;
@autocompleteGooglePlacesListBoxOptionSecondaryTextColorHover: @disabledColor;

.bl-autocomplete-google-places {
  &.bl-autocomplete-google-places-input--outlined {
    fieldset {
      border-radius: @autocompleteGooglePlacesOutlinedBorderRadiusTopLeft @autocompleteGooglePlacesOutlinedBorderRadiusTopRight @autocompleteGooglePlacesOutlinedBorderRadiusBottomRight @autocompleteGooglePlacesOutlinedBorderRadiusBottomLeft;
    }

    .bl-autocomplete-google-places-label {
      color: @autocompleteGooglePlacesOutlinedLabelColor;
    }

    &:hover .bl-autocomplete-google-places-label:not(.bl-autocomplete-google-places-label--disabled):not(.bl-autocomplete-google-places-label--focused) {
      color: @autocompleteGooglePlacesOutlinedLabelColorHover;
    }

    .bl-autocomplete-google-places-label--disabled {
      color: @autocompleteGooglePlacesOutlinedLabelColorDisabled;
    }

    .bl-autocomplete-google-places-label--focused {
      color: @autocompleteGooglePlacesOutlinedLabelColorActive;
    }

    .bl-autocomplete-google-places-input-input-root {
      &:not(.bl-autocomplete-google-places-input-input--focused):not(.bl-autocomplete-google-places-input-input--disabled):hover {
        fieldset {
          border: @autocompleteGooglePlacesOutlinedBorderHover;
          box-shadow: @autocompleteGooglePlacesOutlinedShadowHover;
        }

        input:-webkit-autofill:hover {
          -webkit-text-fill-color: @autocompleteGooglePlacesOutlinedAutofillColorHover;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @autocompleteGooglePlacesOutlinedAutofillColorHover;
          -webkit-box-shadow: 0 0 0 30px @autocompleteGooglePlacesOutlinedAutofillBackgroundColorHover inset;
        }

        background-color: @autocompleteGooglePlacesOutlinedBackgroundHover;
        color: @autocompleteGooglePlacesOutlinedColorHover;
      }

      &.bl-autocomplete-google-places-input-input--focused {
        fieldset {
          border: @autocompleteGooglePlacesOutlinedBorderActive;
          box-shadow: @autocompleteGooglePlacesOutlinedShadowActive;
        }

        input:-webkit-autofill:focus {
          -webkit-text-fill-color: @autocompleteGooglePlacesOutlinedAutofillColorActive;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @autocompleteGooglePlacesOutlinedAutofillColorActive;
          -webkit-box-shadow: 0 0 0 30px @autocompleteGooglePlacesOutlinedAutofillBackgroundColorActive inset;
        }

        background-color: @autocompleteGooglePlacesOutlinedBackgroundActive;
        color: @autocompleteGooglePlacesOutlinedColorActive;
      }

      &.bl-autocomplete-google-places-input-input--disabled {
        fieldset {
          border: @autocompleteGooglePlacesOutlinedBorderDisabled;
          box-shadow: @autocompleteGooglePlacesOutlinedShadowDisabled;
        }

        background-color: @autocompleteGooglePlacesOutlinedBackgroundDisabled;
        color: @autocompleteGooglePlacesOutlinedColorDisabled;
      }

      fieldset {
        border: @autocompleteGooglePlacesOutlinedBorder;
        box-shadow: @autocompleteGooglePlacesOutlinedShadow;
      }

      input:-webkit-autofill {
        -webkit-text-fill-color: @autocompleteGooglePlacesOutlinedAutofillColor;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: @autocompleteGooglePlacesOutlinedAutofillColor;
        -webkit-box-shadow: 0 0 0 30px @autocompleteGooglePlacesOutlinedAutofillBackgroundColor inset;
      }

      background-color: @autocompleteGooglePlacesOutlinedBackground;
      color: @autocompleteGooglePlacesOutlinedColor;
    }
  }

  &.bl-autocomplete-google-places-input--filled {
    ::after {
      border-bottom: @autocompleteGooglePlacesFilledUnderline;
    }

    .bl-autocomplete-google-places-label {
      color: @autocompleteGooglePlacesFilledLabelColor;
    }

    &:hover .bl-autocomplete-google-places-label:not(.bl-autocomplete-google-places-label--disabled):not(.bl-autocomplete-google-places-label--focused) {
      color: @autocompleteGooglePlacesFilledLabelColorHover;
    }

    .bl-autocomplete-google-places-label--disabled {
      color: @autocompleteGooglePlacesFilledLabelColorDisabled;
    }

    .bl-autocomplete-google-places-label--focused {
      color: @autocompleteGooglePlacesFilledLabelColorActive;
    }

    .bl-autocomplete-google-places-input-input-root {
      &:not(.bl-autocomplete-google-places-input-input--focused):not(.bl-autocomplete-google-places-input-input--disabled):hover {
        input:-webkit-autofill:hover {
          -webkit-text-fill-color: @autocompleteGooglePlacesFilledAutofillColorHover;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @autocompleteGooglePlacesFilledAutofillColorHover;
          -webkit-box-shadow: 0 0 0 30px @autocompleteGooglePlacesFilledAutofillBackgroundColorHover inset;
        }

        border: @autocompleteGooglePlacesFilledBorderHover;
        box-shadow: @autocompleteGooglePlacesFilledShadowHover;
        background-color: @autocompleteGooglePlacesFilledBackgroundHover;
        color: @autocompleteGooglePlacesFilledColorHover;
      }

      &.bl-autocomplete-google-places-input-input--focused {
        input:-webkit-autofill:focus {
          -webkit-text-fill-color: @autocompleteGooglePlacesFilledAutofillColorActive;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @autocompleteGooglePlacesFilledAutofillColorActive;
          -webkit-box-shadow: 0 0 0 30px @autocompleteGooglePlacesFilledAutofillBackgroundColorActive inset;
        }

        border: @autocompleteGooglePlacesFilledBorderActive;
        box-shadow: @autocompleteGooglePlacesFilledShadowActive;
        background-color: @autocompleteGooglePlacesFilledBackgroundActive;
        color: @autocompleteGooglePlacesFilledColorActive;
      }

      &.bl-autocomplete-google-places-input-input--disabled {
        border: @autocompleteGooglePlacesFilledBorderDisabled;
        box-shadow: @autocompleteGooglePlacesFilledShadowDisabled;
        background-color: @autocompleteGooglePlacesFilledBackgroundDisabled;
        color: @autocompleteGooglePlacesFilledColorDisabled;
      }

      input:-webkit-autofill {
        -webkit-text-fill-color: @autocompleteGooglePlacesFilledAutofillColor;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: @autocompleteGooglePlacesFilledAutofillColor;
        -webkit-box-shadow: 0 0 0 30px @autocompleteGooglePlacesFilledAutofillBackgroundColor inset;
      }

      border-radius: @autocompleteGooglePlacesFilledBorderRadiusTopLeft @autocompleteGooglePlacesFilledBorderRadiusTopRight @autocompleteGooglePlacesFilledBorderRadiusBottomRight @autocompleteGooglePlacesFilledBorderRadiusBottomLeft;
      border: @autocompleteGooglePlacesFilledBorder;
      box-shadow: @autocompleteGooglePlacesFilledShadow;
      background-color: @autocompleteGooglePlacesFilledBackground;
      color: @autocompleteGooglePlacesFilledColor;
    }
  }

  &.bl-autocomplete-google-places-input--standard {
    .bl-autocomplete-google-places-label {
      color: @autocompleteGooglePlacesStandardLabelColor;
    }

    &:hover .bl-autocomplete-google-places-label:not(.bl-autocomplete-google-places-label--disabled):not(.bl-autocomplete-google-places-label--focused) {
      color: @autocompleteGooglePlacesStandardLabelColorHover;
    }

    .bl-autocomplete-google-places-label--disabled {
      color: @autocompleteGooglePlacesStandardLabelColorDisabled;
    }

    .bl-autocomplete-google-places-label--focused {
      color: @autocompleteGooglePlacesStandardLabelColorActive;
    }

    .bl-autocomplete-google-places-input-input-root {
      &::after {
        border-bottom: @autocompleteGooglePlacesStandardUnderlineActive;
      }

      &::before {
        border-bottom: @autocompleteGooglePlacesStandardUnderline;
      }

      &:not(.bl-autocomplete-google-places-input-input--focused):not(.bl-autocomplete-google-places-input-input--disabled):hover {
        input:-webkit-autofill:hover {
          -webkit-text-fill-color: @autocompleteGooglePlacesStandardAutofillColorHover;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @autocompleteGooglePlacesStandardAutofillColorHover;
        }

        &::before {
          border-bottom: @autocompleteGooglePlacesStandardUnderlineHover;
        }

        box-shadow: @autocompleteGooglePlacesStandardShadowHover;
        color: @autocompleteGooglePlacesStandardColorHover;
      }

      &.bl-autocomplete-google-places-input-input--focused {
        input:-webkit-autofill:focus {
          -webkit-text-fill-color: @autocompleteGooglePlacesStandardAutofillColorActive;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @autocompleteGooglePlacesStandardAutofillColorActive;
        }

        box-shadow: @autocompleteGooglePlacesStandardShadowActive;
        color: @autocompleteGooglePlacesStandardColorActive;
      }

      &.bl-autocomplete-google-places-input-input--disabled {
        &::before {
          border-bottom: @autocompleteGooglePlacesStandardUnderlineDisabled;
        }

        box-shadow: @autocompleteGooglePlacesStandardShadowDisabled;
        color: @autocompleteGooglePlacesStandardColorDisabled;
      }

      input:-webkit-autofill {
        -webkit-text-fill-color: @autocompleteGooglePlacesStandardAutofillColor;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: @autocompleteGooglePlacesStandardAutofillColor;
      }

      box-shadow: @autocompleteGooglePlacesStandardShadow;
      color: @autocompleteGooglePlacesStandardColor;
    }
  }
}

.bl-autocomplete-google-places--listbox {
  background-color: @autocompleteGooglePlacesListBoxBackgroundColor;

  .bl-autocomplete-google-places--option {
    background-color: @autocompleteGooglePlacesListBoxOptionBackgroundColor;
    color: @autocompleteGooglePlacesListBoxOptionTextColor;

    .MuiTypography-colorTextSecondary {
      color: @autocompleteGooglePlacesListBoxOptionSecondaryTextColor
    }

    &:hover {
      background-color: @autocompleteGooglePlacesListBoxOptionBackgroundColorHover;
      color: @autocompleteGooglePlacesListBoxOptionTextColorHover;

      .MuiTypography-colorTextSecondary {
        color: @autocompleteGooglePlacesListBoxOptionSecondaryTextColorHover
      }
    }
  }
}

.bl-autocomplete-google-places--noOptions {
  background-color: @autocompleteGooglePlacesListBoxNoOptionBackgroundColor;
  color: @autocompleteGooglePlacesListBoxNoOptionTextColor;

  &:hover {
    background-color: @autocompleteGooglePlacesListBoxNoOptionBackgroundColorHover;
    color: @autocompleteGooglePlacesListBoxNoOptionTextColorHover;
  }
}


/*****    component: autocomplete-google-places    *****/
/*******************************************************/
/*******************************************************/


/**********************************/
/**********************************/
/*****    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: @buttonBorderRadius;
@buttonMediumBorderRadius: @buttonBorderRadius;
@buttonLargeBorderRadius: @buttonBorderRadius;

//TODO: deprecated, leave it for backward compatibility
@buttonContainedBorderRadius: @buttonBorderRadius;

.bl-button {
  border-radius: @buttonMediumBorderRadius;

  .bl-icon {
    color: inherit;
  }

  &.bl-button--small {
    border-radius: @buttonSmallBorderRadius;
  }

  &.bl-button--large {
    border-radius: @buttonLargeBorderRadius;
  }

  &.bl-button--contained {
    &:not(.bl-button--disabled) {
      background: @buttonContainedBackground;
      color: @buttonContainedColor;

      &:not(.bl-button--unelevated) {
        &:hover {
          box-shadow: @buttonContainedShadowHover;
        }

        &:active,
        &:focus {
          box-shadow: @buttonContainedShadowActive;
        }
      }
    }

    &.bl-button--disabled {
      background: @buttonContainedDisabledBackground;
      color: @buttonContainedDisabledColor;
    }
  }

  &.bl-button--outlined {
    &:not(.bl-button--disabled) {
      background: @buttonOutlinedBackground;
      color: @buttonOutlinedColor;
      border: @buttonOutlinedBorder;
    }

    &.bl-button--disabled {
      border: @buttonOutlinedDisabledBorder;
      color: @buttonOutlinedDisabledColor;
    }
  }

  &.bl-button--text {
    &:not(.bl-button--disabled) {
      background: @buttonTextBackground;
      color: @buttonTextColor;

      &:hover {
        background: @buttonTextColorHover;
      }
    }

    &.bl-button--disabled {
      color: @buttonTextDisabledColor;
    }
  }

}

/*****    component: button    *****/
/***********************************/
/***********************************/


/***************************************************/
/***************************************************/
/*****    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: chart    *****/
@chartBorderRadius: @appComponentBorderRadius;
@chartBoxShadow: @appComponentShadow;
@chartBackgroundColor: #FFF;

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


/************************************************/
/************************************************/
/*****    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: @chartVisualizationB