backendless-ui-sdk/dist/ui-components/components.less

Backendless UI-SDK

/*************************************************/
/*************************************************/
/*****    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;
@commonVisModalBodyBackgroundColor: @commonVisBackgroundPrimary;
@commonVisModalBodyMultiControlAddColor: @commonVisSuccessColor;
@commonVisModalBodyMultiControlRemoveColor: @commonVisTextColorSecondary;

@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:before {
        color: @commonVisModalHeaderButtonColor
      }
    }

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

      .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--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-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: 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: checkbox    *****/
@checkboxThemeColor: @themePrimary;

@checkboxUncheckedIconColor: @checkboxThemeColor;
@checkboxCheckedIconColor: @checkboxUncheckedIconColor;
@checkboxDisabledUncheckedIconColor: @disabledColor;
@checkboxDisabledCheckedIconColor: @checkboxDisabledUncheckedIconColor;

@checkboxUncheckedTextColor: @appTextColor;
@checkboxCheckedTextColor: @checkboxUncheckedTextColor;
@checkboxDisabledUncheckedTextColor: @disabledColor;
@checkboxDisabledCheckedTextColor: @checkboxDisabledUncheckedTextColor;

.bl-checkbox {
  .bl-checkbox-root {
    svg {
      color: currentColor;
    }
  }

  .variant(@iconColor, @labelColor) {
    color: @labelColor;

    .bl-checkbox-root {
      color: @iconColor;
    }

    .bl-checkbox-label {
      color: inherit;
    }
  }

  &:not(.bl-checkbox--disabled) {
    .bl-checkbox-root:hover {
      background-color: fade(@checkboxCheckedIconColor, 10%);
    }
  }

  &:not(.bl-checkbox--checked):not(.bl-checkbox--disabled) {
    .variant(@checkboxUncheckedIconColor, @checkboxUncheckedTextColor);
  }

  &.bl-checkbox--checked:not(.bl-checkbox--disabled) {
    .variant(@checkboxCheckedIconColor, @checkboxCheckedTextColor);
  }

  &.bl-checkbox--checked.bl-checkbox--disabled {
    .variant(@checkboxDisabledCheckedIconColor, @checkboxDisabledCheckedTextColor);
  }

  &:not(.bl-checkbox--checked).bl-checkbox--disabled {
    .variant(@checkboxDisabledUncheckedIconColor, @checkboxDisabledUncheckedTextColor);
  }
}

/*****    component: checkbox    *****/
/*************************************/
/*************************************/


/*****************************************/
/*****************************************/
/*****    component: color-picker    *****/
@colorPickerPaletteBackgroundColor: @appBackgroundColor;
@colorPickerPaletteInfoInputColor: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@colorPickerPaletteInfoInputBackground: @colorPickerPaletteBackgroundColor;
@colorPickerPaletteInfoInputLabelColor: mix(@colorPickerPaletteBackgroundColor, @colorPickerPaletteInfoInputColor);
@colorPickerPaletteInfoInputBorderColor: hsl(0, 0%, if(@isLightTheme, 80%, 20%));
@colorPickerPaletteInfoInputSwitcherColor: @colorPickerPaletteInfoInputColor;
@colorPickerPaletteInfoInputSwitcherBackground: @colorPickerPaletteBackgroundColor;
@colorPickerPaletteSwatchBorderColor: hsla(0, 0%, if(@isLightTheme, 0%, 100%), 0.1);

.bl-color-picker {
  &.bl-color-picker-button {
    background-color: white;
    cursor: pointer;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 1px;
    padding: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1)
  }

  &.bl-color-picker--disabled {
    cursor: not-allowed;
  }

  .bl-color-picker-button-color-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
  }

  .bl-color-picker-button-color, .bl-color-picker-button-no-color {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .bl-color-picker-button-no-color {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%, transparent 75%, transparent);
    background-color: #d2d3d5;
  }
}

.bl-color-picker-popover {
  position: fixed;
  z-index: 1050;

  .bl-color-picker-popover-cover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .bl-color-picker-palette-chrome {
    width: 225px;
    background: @colorPickerPaletteBackgroundColor;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px, rgba(0, 0, 0, 0.3) 0 4px 8px;
    box-sizing: initial;
  }

  .bl-color-picker-palette-saturation-wrapper {
    width: 100%;
    padding-bottom: 55%;
    position: relative;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
  }

  .bl-color-picker-palette-compact-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .bl-color-picker-palette-body {
    padding: 16px 16px 12px;
  }

  .bl-color-picker-palette-controls {
    display: flex;
  }

  .bl-color-picker-palette-controls-color {
    width: 32px;
  }

  .bl-color-picker-palette-controls-color-swatch {
    margin-top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }

  .bl-color-picker-palette-controls-color-swatch-active {
    border-radius: 8px;
    box-shadow: @colorPickerPaletteSwatchBorderColor 0 0 0 1px inset;
    z-index: 2;
    width: 100%;
    height: 100%;
  }

  .bl-color-picker-palette-controls-toggles {
    flex: 1;
  }

  .bl-color-picker-palette-toggles-alpha-wrapper {
    height: 10px;
    position: relative;
  }

  .bl-color-picker-palette-toggles-hue-wrapper {
    height: 10px;
    position: relative;
    margin-bottom: 8px;
  }

  .bl-color-picker-palette-info {
    display: flex;

    & > div {
      flex: 1;
    }

    input {
      background: @colorPickerPaletteInfoInputBackground;
      color: @colorPickerPaletteInfoInputColor !important;
      box-shadow: @colorPickerPaletteInfoInputBorderColor 0 0 0 1px inset !important;
    }

    span {
      color:@colorPickerPaletteInfoInputLabelColor !important;;
    }

    svg {
      background: @colorPickerPaletteInfoInputSwitcherBackground !important;
      fill: @colorPickerPaletteInfoInputSwitcherColor;
    }
  }
}

/*****    component: color-picker    *****/
/*****************************************/
/*****************************************/


/********************************************/
/********************************************/
/*****    component: datetime-picker    *****/
@datetimePickerPrimaryThemeColor: @themePrimary;
@datetimePickerDisabledThemeColor: @disabledColor;

@datetimePickerLabelColor: @appTextColor;
@datetimePickerLabelColorActive: @appTextColor;
@datetimePickerLabelColorDisabled: @disabledColor;

//underline
@datetimePickerUnderlineInputColor: @appTextColor;
@datetimePickerUnderlineInputColorHover: NULL;

@datetimePickerUnderlineBorderColor: @datetimePickerPrimaryThemeColor;
@datetimePickerUnderlineBorderSize: NULL;
@datetimePickerUnderlineBorderType: NULL;
@datetimePickerUnderlineShadow: NULL;

@datetimePickerUnderlineBorderColorHover: @datetimePickerUnderlineBorderColor;
@datetimePickerUnderlineBorderSizeHover: NULL;
@datetimePickerUnderlineBorderTypeHover: NULL;
@datetimePickerUnderlineShadowHover: NULL;

@datetimePickerUnderlineBorderColorActive: @datetimePickerUnderlineBorderColor;
@datetimePickerUnderlineBorderSizeActive: NULL;
@datetimePickerUnderlineBorderTypeActive: NULL;
@datetimePickerUnderlineShadowActive: NULL;

@datetimePickerUnderlineBorderColorDisabled: @datetimePickerDisabledThemeColor;
@datetimePickerUnderlineBorderTypeDisabled: NULL;
@datetimePickerUnderlineBorderSizeDisabled: NULL;
@datetimePickerUnderlineShadowDisabled: NULL;

//outlined
@datetimePickerOutlinedBorderRadius: NULL;

@datetimePickerOutlinedInputColor: @appTextColor;
@datetimePickerOutlinedInputColorHover: NULL;

@datetimePickerOutlinedBackground: NULL;

@datetimePickerOutlinedShadow: NULL;
@datetimePickerOutlinedBorder: 2px solid @datetimePickerPrimaryThemeColor;

@datetimePickerOutlinedShadowHover: NULL;
@datetimePickerOutlinedBorderHover: NULL;

@datetimePickerOutlinedShadowActive: NULL;
@datetimePickerOutlinedBorderActive: NULL;

@datetimePickerOutlinedShadowDisabled: NULL;
@datetimePickerOutlinedBorderDisabled: NULL;

//filled

@datetimePickerFilledBackground: #eee;

.bl-datetime-picker {

  //label
  .MuiFormLabel-root {
    color: @datetimePickerLabelColor;

    &.Mui-focused {
      color: @datetimePickerLabelColorActive;
    }

    &.Mui-disabled {
      color: @datetimePickerLabelColorDisabled;
    }
  }

  .MuiInputBase-root {
    &.MuiOutlinedInput-root {
      border-radius: @datetimePickerOutlinedBorderRadius;
      background-color: @datetimePickerOutlinedBackground;

      .MuiInputBase-input {
        color: @datetimePickerOutlinedInputColor;

        &:hover {
          color: @datetimePickerOutlinedInputColorHover;
        }
      }

      &:not(.Mui-disabled) {
        .MuiOutlinedInput-notchedOutline {
          border: @datetimePickerOutlinedBorder;
          box-shadow: @datetimePickerOutlinedShadow;
        }

        &.Mui-focused {
          .MuiOutlinedInput-notchedOutline {
            border: @datetimePickerOutlinedBorderActive;
            box-shadow: @datetimePickerOutlinedShadowActive;
          }
        }

        &:hover {
          .MuiOutlinedInput-notchedOutline {
            border: @datetimePickerOutlinedBorderHover;
            box-shadow: @datetimePickerOutlinedShadowHover;
          }
        }
      }

      &.Mui-disabled {
        .MuiOutlinedInput-notchedOutline {
          border: @datetimePickerOutlinedBorderDisabled;
          box-shadow: @datetimePickerOutlinedShadowDisabled;
        }
      }
    }

    &.MuiInput-underline {
      .MuiInputBase-input {
        color: @datetimePickerUnderlineInputColor;

        &:hover {
          color: @datetimePickerUnderlineInputColorHover;
        }
      }

      &:before {
        border-bottom-color: @datetimePickerUnderlineBorderColor;
        border-bottom-width: @datetimePickerUnderlineBorderSize;
        border-bottom-style: @datetimePickerUnderlineBorderType;
        box-shadow: @datetimePickerUnderlineShadow;
      }

      &:after {
        border-bottom-color: @datetimePickerUnderlineBorderColorActive;
        border-bottom-width: @datetimePickerUnderlineBorderSizeActive;
        border-bottom-style: @datetimePickerUnderlineBorderTypeActive;
        box-shadow: @datetimePickerUnderlineShadowActive;
      }

      &:hover:not(.Mui-disabled):not(.Mui-focused):before {
        border-bottom-color: @datetimePickerUnderlineBorderColorHover;
        border-bottom-width: @datetimePickerUnderlineBorderSizeHover;
        border-bottom-style: @datetimePickerUnderlineBorderTypeHover;
        box-shadow: @datetimePickerUnderlineShadowHover;
      }

      &.Mui-disabled:before {
        border-bottom-color: @datetimePickerUnderlineBorderColorDisabled;
        border-bottom-width: @datetimePickerUnderlineBorderSizeDisabled;
        border-bottom-style: @datetimePickerUnderlineBorderTypeDisabled;
        box-shadow: @datetimePickerUnderlineShadowDisabled;
      }
    }

    &.MuiFilledInput-root {
      background-color: @datetimePickerFilledBackground;
    }
  }
}

@datetimePickerDialogPrimaryColor: @themePrimary;
@datetimePickerDialogSecondaryColor: @appBackgroundColor;

@datetimePickerDialogColor: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogBackground: @datetimePickerDialogSecondaryColor;
@datetimePickerDialogBorder: 1px solid @datetimePickerDialogPrimaryColor;
@datetimePickerDialogBorderRadius: NULL;
@datetimePickerDialogShadow: NULL;
@datetimePickerDialogContentOverflow: unset;


@datetimePickerDialogToolbarBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogToolbarColor: contrast(@datetimePickerDialogToolbarBackground);
@datetimePickerDialogToolbarColorActive: @datetimePickerDialogSecondaryColor;

@datetimePickerDialogHeaderButtonBackground: transparent;
@datetimePickerDialogHeaderButtonColor: contrast(@datetimePickerDialogSecondaryColor);
@datetimePickerDialogHeaderButtonBackgroundHover: NULL;
@datetimePickerDialogHeaderButtonColorHover: NULL;
@datetimePickerDialogHeaderButtonBackgroundDisabled: transparent;
@datetimePickerDialogHeaderButtonColorDisabled: transparent;

@datetimePickerDialogActionsBackground: rgba(0, 0, 0, 0.2);
@datetimePickerDialogActionsButtonBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogActionsButtonColor: contrast(@datetimePickerDialogActionsButtonBackground);

@datetimePickerDialogDaysListColor: contrast(@datetimePickerDialogBackground);

@datetimePickerDialogDaySelectedBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogDaySelectedColor: contrast(@datetimePickerDialogPrimaryColor);

@datetimePickerDialogDayCurrentBackground: fadeout(@datetimePickerDialogPrimaryColor, 80%);
@datetimePickerDialogDayCurrentColor: contrast(@datetimePickerDialogDayCurrentBackground);

@datetimePickerDialogDayDisabledBackground: transparent;
@datetimePickerDialogDayDisabledColor: @datetimePickerDisabledThemeColor;

@datetimePickerDialogDayBorderRadius: NULL;

@datetimePickerDialogYearBackgroundActive: fadeout(@datetimePickerDialogPrimaryColor, 60%);
@datetimePickerDialogYearColorActive: contrast(@datetimePickerDialogYearBackgroundActive);

@datetimePickerDialogYearSelectedBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogYearSelectedColor: contrast(@datetimePickerDialogYearSelectedBackground);

@datetimePickerDialogClockPointerColor: darken(@datetimePickerDialogBackground, 20%);

@datetimePickerTabBackground: @datetimePickerPrimaryThemeColor;
@datetimePickerTabIndicatorBackground: contrast(@datetimePickerPrimaryThemeColor);
@datetimePickerTabIconsColor: contrast(@datetimePickerPrimaryThemeColor);

.bl-datetime-picker-dialog {

  .MuiPaper-root {
    overflow: @datetimePickerDialogContentOverflow;
    color: @datetimePickerDialogColor;
    background: @datetimePickerDialogBackground;
  }

  .MuiDialog-paper {
    overflow: @datetimePickerDialogContentOverflow;
    background: @datetimePickerDialogBackground;
    border: @datetimePickerDialogBorder;
    border-radius: @datetimePickerDialogBorderRadius;
    box-shadow: @datetimePickerDialogShadow;
  }

  .MuiDialogContent-root {
    overflow: @datetimePickerDialogContentOverflow;
  }

  .MuiToolbar-root {
    background: @datetimePickerDialogToolbarBackground;

    .MuiPickersToolbarText-toolbarTxt {
      color: @datetimePickerDialogToolbarColor;
    }

    .MuiPickersToolbarText-toolbarBtnSelected {
      color: @datetimePickerDialogToolbarColorActive;
    }
  }

  .MuiPickersCalendarHeader-switchHeader {
    margin: 5px;

    .MuiButtonBase-root {
      background: @datetimePickerDialogHeaderButtonBackground;
      color: @datetimePickerDialogHeaderButtonColor;

      &:hover {
        background-color: @datetimePickerDialogHeaderButtonBackgroundHover;
        color: @datetimePickerDialogHeaderButtonColorHover;
      }

      &.Mui-disabled {
        background: @datetimePickerDialogHeaderButtonBackgroundDisabled;
        color: @datetimePickerDialogHeaderButtonColorDisabled;
      }
    }

  }

  .MuiPickersCalendarHeader-dayLabel {
    color: @datetimePickerDialogDaysListColor;
  }

  .MuiPickersDay-day {
    color: inherit;
    border-radius: @datetimePickerDialogDayBorderRadius;

    &.MuiPickersDay-current {
      background: @datetimePickerDialogDayCurrentBackground;
      color: @datetimePickerDialogDayCurrentColor;
    }

    &.MuiPickersDay-daySelected {
      background: @datetimePickerDialogDaySelectedBackground;
      color: @datetimePickerDialogDaySelectedColor;
    }

    &.MuiPickersDay-dayDisabled {
      background: @datetimePickerDialogDayDisabledBackground;
      color: @datetimePickerDialogDayDisabledColor;
    }
  }

  .MuiPickersYear-root {
    &:focus,
    &:hover {
      background: @datetimePickerDialogYearBackgroundActive;
      color: @datetimePickerDialogYearColorActive;
    }

    &.MuiPickersYear-yearSelected {
      background: @datetimePickerDialogYearSelectedBackground;
      color: @datetimePickerDialogYearSelectedColor;
    }
  }

  .MuiPickersClockNumber-clockNumber {
    color: inherit;

    &.MuiPickersClockNumber-clockNumberSelected {
      color: #fff;
    }
  }

  .MuiPickersClock-pin,
  .MuiPickersClockPointer-pointer {
    background: @datetimePickerDialogClockPointerColor;
  }

  .MuiPickersClockPointer-thumb {
    background: @datetimePickerDialogClockPointerColor;
    border: 14px solid @datetimePickerDialogClockPointerColor;
  }

  .MuiTabs-root {
    .MuiTab-root {
      background-color: @datetimePickerTabBackground;
      opacity: 1;
    }

    .MuiTabs-indicator {
      background-color: @datetimePickerTabIndicatorBackground;
    }

    .MuiSvgIcon-root {
      fill: @datetimePickerTabIconsColor;
    }
  }


  .MuiDialogActions-root {
    background: @datetimePickerDialogActionsBackground;

    .MuiButton-root {
      background: @datetimePickerDialogActionsButtonBackground;
      color: @datetimePickerDialogActionsButtonColor;
    }
  }
}

/*****    component: datetime-picker    *****/
/********************************************/
/********************************************/


/*********************************/
/*********************************/
/*****    component: icon    *****/
@iconColor: @themePrimary;

.bl-icon {
  color: @iconColor;
}


/*****    component: icon    *****/
/*********************************/
/*********************************/


/**********************************/
/**********************************/
/*****    component: input    *****/
@inputThemeColor: @themePrimary;

/* Common */
@inputFontFamily: inherit;

/* Filled */
@inputFilledShadow: NULL;
@inputFilledShadowHover: NULL;
@inputFilledShadowActive: NULL;
@inputFilledShadowDisabled: NULL;

@inputFilledBackground: #eee;
@inputFilledBackgroundHover: NULL;
@inputFilledBackgroundActive: #f1f1f1;
@inputFilledBackgroundDisabled: #dbdbdb;

@inputFilledBorder: NULL;
@inputFilledBorderHover: NULL;
@inputFilledBorderActive: NULL;
@inputFilledBorderDisabled: NULL;

@inputFilledUnderlineColor: @inputThemeColor;
@inputFilledUnderlineWidth: @appComponentBorderWidth;
@inputFilledUnderlineType: solid;
@inputFilledUnderline: @inputFilledUnderlineWidth @inputFilledUnderlineType @inputFilledUnderlineColor;

@inputFilledBorderRadius: @appComponentBorderRadius;
@inputFilledBorderRadiusTopLeft: @inputFilledBorderRadius;
@inputFilledBorderRadiusTopRight: @inputFilledBorderRadius;
@inputFilledBorderRadiusBottomRight: 0;
@inputFilledBorderRadiusBottomLeft: 0;

@inputFilledColor: contrast(@inputFilledBackground);
@inputFilledFontSize: inherit;
@inputFilledFontFamily: @inputFontFamily;
@inputFilledColorHover: contrast(@inputFilledBackground);
@inputFilledColorActive: contrast(@inputFilledBackground);
@inputFilledColorDisabled: contrast(@inputFilledBackgroundDisabled);

@inputFilledAutofillColor: @inputFilledColor;
@inputFilledAutofillColorHover: @inputFilledColorHover;
@inputFilledAutofillColorActive: @inputFilledColorActive;

@inputFilledAutofillBackgroundColor: transparent;
@inputFilledAutofillBackgroundColorHover: transparent;
@inputFilledAutofillBackgroundColorActive: transparent;

@inputFilledLabelColor: @inputFilledColor;
@inputFilledLabelFontSize: @inputFilledFontSize;
@inputFilledLabelFontFamily: @inputFilledFontFamily;
@inputFilledLabelColorHover: @inputFilledLabelColor;
@inputFilledLabelColorActive: @inputFilledLabelColor;
@inputFilledLabelColorDisabled: @disabledColor;

/* Outlined */
@inputOutlinedFontSize: inherit;
@inputOutlinedFontFamily: @inputFontFamily;

@inputOutlinedShadow: NULL;
@inputOutlinedShadowHover: NULL;
@inputOutlinedShadowActive: NULL;
@inputOutlinedShadowDisabled: NULL;

@inputOutlinedBackground: NULL;
@inputOutlinedBackgroundHover: NULL;
@inputOutlinedBackgroundActive: NULL;
@inputOutlinedBackgroundDisabled: NULL;

@inputOutlinedBorderWidth: @appComponentBorderWidth;
@inputOutlinedBorderType: solid;

@inputOutlinedBorder: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@inputOutlinedBorderHover: NULL;
@inputOutlinedBorderActive: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@inputOutlinedBorderDisabled: @inputOutlinedBorderWidth @inputOutlinedBorderType @disabledColor;

@inputOutlinedBorderRadius: @appComponentBorderRadius;
@inputOutlinedBorderRadiusTopLeft: @inputOutlinedBorderRadius;
@inputOutlinedBorderRadiusTopRight: @inputOutlinedBorderRadius;
@inputOutlinedBorderRadiusBottomRight: @inputOutlinedBorderRadius;
@inputOutlinedBorderRadiusBottomLeft: @inputOutlinedBorderRadius;

@inputOutlinedColor: @appTextColor;
@inputOutlinedColorHover: @appTextColor;
@inputOutlinedColorActive: @appTextColor;
@inputOutlinedColorDisabled: @disabledColor;

@inputOutlinedAutofillColor: @inputOutlinedColor;
@inputOutlinedAutofillColorHover: @inputOutlinedColorHover;
@inputOutlinedAutofillColorActive: @inputOutlinedColorActive;

@inputOutlinedAutofillBackgroundColor: transparent;
@inputOutlinedAutofillBackgroundColorHover: transparent;
@inputOutlinedAutofillBackgroundColorActive: transparent;

@inputOutlinedLabelColor: @appTextColor;
@inputOutlinedLabelFontSize: @inputOutlinedFontSize;
@inputOutlinedLabelFontFamily: @inputOutlinedFontFamily;
@inputOutlinedLabelColorHover: @inputOutlinedLabelColor;
@inputOutlinedLabelColorActive: @inputOutlinedLabelColor;
@inputOutlinedLabelColorDisabled: @disabledColor;

/* Standard */
@inputStandardShadow: NULL;
@inputStandardShadowHover: NULL;
@inputStandardShadowActive: NULL;
@inputStandardShadowDisabled: NULL;

@inputStandardUnderlineWidth: @appComponentBorderWidth;
@inputStandardUnderlineType: solid;
@inputStandardUnderlineColor: @inputStandardColor;
@inputStandardUnderlineColorActive: @inputThemeColor;
@inputStandardUnderlineColorDisabled: @disabledColor;

@inputStandardUnderline: @inputStandardUnderlineWidth @inputStandardUnderlineType fade(@inputStandardUnderlineColor, 70%);
@inputStandardUnderlineHover: calc(@inputStandardUnderlineWidth + 1px) @inputStandardUnderlineType @inputStandardUnderlineColor;
@inputStandardUnderlineActive: @inputStandardUnderlineWidth @inputStandardUnderlineType @inputStandardUnderlineColorActive;
@inputStandardUnderlineDisabled: @inputStandardUnderlineWidth @inputStandardUnderlineType @inputStandardUnderlineColorDisabled;

@inputStandardColor: @appTextColor;
@inputStandardFontSize: inherit;
@inputStandardFontFamily: @inputFontFamily;
@inputStandardColorHover: @appTextColor;
@inputStandardColorActive: @appTextColor;
@inputStandardColorDisabled: @disabledColor;

@inputStandardAutofillColor: @inputStandardColor;
@inputStandardAutofillColorHover: @inputStandardColorHover;
@inputStandardAutofillColorActive: @inputStandardColorActive;

@inputStandardLabelColor: @inputStandardColor;
@inputStandardLabelFontSize: @inputStandardFontSize;
@inputStandardLabelFontFamily:@inputStandardFontFamily;
@inputStandardLabelColorHover: @inputStandardLabelColor;
@inputStandardLabelColorActive: @inputStandardLabelColor;
@inputStandardLabelColorDisabled: @disabledColor;


.bl-input {
  &.bl-input--outlined {
    fieldset {
      border-radius: @inputOutlinedBorderRadiusTopLeft @inputOutlinedBorderRadiusTopRight @inputOutlinedBorderRadiusBottomRight @inputOutlinedBorderRadiusBottomLeft;
    }

    .bl-input-label {
      color: @inputOutlinedLabelColor;
      font-size: @inputOutlinedLabelFontSize;
      font-family: @inputOutlinedFontFamily;
    }

    &:hover .bl-input-label:not(.bl-input-label--disabled):not(.bl-input-label--focused) {
      color: @inputOutlinedLabelColorHover;
    }

    .bl-input-label--disabled {
      color: @inputOutlinedLabelColorDisabled;
    }

    .bl-input-label--focused {
      color: @inputOutlinedLabelColorActive;
    }

    .bl-input-input-root {
      &:not(.bl-input-input--focused):not(.bl-input-input--disabled):hover {
        fieldset {
          border: @inputOutlinedBorderHover;
          box-shadow: @inputOutlinedShadowHover;
        }

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

        background-color: @inputOutlinedBackgroundHover;
        color: @inputOutlinedColorHover;
      }

      &.bl-input-input--focused {
        fieldset {
          border: @inputOutlinedBorderActive;
          box-shadow: @inputOutlinedShadowActive;
        }

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

        background-color: @inputOutlinedBackgroundActive;
        color: @inputOutlinedColorActive;
      }

      &.bl-input-input--disabled {
        fieldset {
          border: @inputOutlinedBorderDisabled;
          box-shadow: @inputOutlinedShadowDisabled;
        }

        background-color: @inputOutlinedBackgroundDisabled;
        color: @inputOutlinedColorDisabled;
      }

      fieldset {
        border: @inputOutlinedBorder;
        box-shadow: @inputOutlinedShadow;
      }

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

      background-color: @inputOutlinedBackground;
      color: @inputOutlinedColor;
      font-size: @inputOutlinedFontSize;
      font-family: @inputOutlinedFontFamily;
    }
  }

  &.bl-input--filled {
    ::after {
      border-bottom: @inputFilledUnderline;
    }

    .bl-input-label {
      color: @inputFilledLabelColor;
      font-size: @inputFilledLabelFontSize;
      font-family: @inputFilledFontFamily;
    }

    &:hover .bl-input-label:not(.bl-input-label--disabled):not(.bl-input-label--focused) {
      color: @inputFilledLabelColorHover;
    }

    .bl-input-label--disabled {
      color: @inputFilledLabelColorDisabled;
    }

    .bl-input-label--focused {
      color: @inputFilledLabelColorActive;
    }

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

        border: @inputFilledBorderHover;
        box-shadow: @inputFilledShadowHover;
        background-color: @inputFilledBackgroundHover;
        color: @inputFilledColorHover;
      }

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

        border: @inputFilledBorderActive;
        box-shadow: @inputFilledShadowActive;
        background-color: @inputFilledBackgroundActive;
        color: @inputFilledColorActive;
      }

      &.bl-input-input--disabled {
        border: @inputFilledBorderDisabled;
        box-shadow: @inputFilledShadowDisabled;
        background-color: @inputFilledBackgroundDisabled;
        color: @inputFilledColorDisabled;
      }

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

      border-radius: @inputFilledBorderRadiusTopLeft @inputFilledBorderRadiusTopRight @inputFilledBorderRadiusBottomRight @inputFilledBorderRadiusBottomLeft;
      border: @inputFilledBorder;
      box-shadow: @inputFilledShadow;
      background-color: @inputFilledBackground;
      color: @inputFilledColor;
      font-size: @inputFilledFontSize;
      font-family: @inputFilledFontFamily;
    }
  }

  &.bl-input--standard {
    .bl-input-label {
      color: @inputStandardLabelColor;
      font-size: @inputStandardLabelFontSize;
      font-family: @inputStandardFontFamily;
    }

    &:hover .bl-input-label:not(.bl-input-label--disabled):not(.bl-input-label--focused) {
      color: @inputStandardLabelColorHover;
    }

    .bl-input-label--disabled {
      color: @inputStandardLabelColorDisabled;
    }

    .bl-input-label--focused {
      color: @inputStandardLabelColorActive;
    }

    .bl-input-input-root {
      &::after {
        border-bottom: @inputStandardUnderlineActive;
      }

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

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

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

        box-shadow: @inputStandardShadowHover;
        color: @inputStandardColorHover;
      }

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

        box-shadow: @inputStandardShadowActive;
        color: @inputStandardColorActive;
      }

      &.bl-input-input--disabled {
        &::before {
          border-bottom: @inputStandardUnderlineDisabled;
        }

        box-shadow: @inputStandardShadowDisabled;
        color: @inputStandardColorDisabled;
      }

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

      box-shadow: @inputStandardShadow;
      color: @inputStandardColor;
      font-size: @inputStandardFontSize;
      font-family: @inputStandardFontFamily;
    }
  }
}

/*****    component: input    *****/
/**********************************/
/**********************************/


/*****************************************/
/*****************************************/
/*****    component: radio-button    *****/
@radioColor: @themePrimary;
@radioUncheckedColor: @radioColor;
@radioCheckedColor: @radioColor;
@radioDisabledColor: @disabledColor;
@radioRippleColor: @radioColor;

//label
@radioLabelColor: @appTextColor;
@radioLabelColorChecked: @appTextColor;
@radioLabelColorDisabled: @radioDisabledColor;

//unchecked
@radioOuterCircleColor: @radioUncheckedColor;

//checked
@radioCheckedInnerCircleColor: @radioCheckedColor;
@radioCheckedOuterCircleColor: @radioCheckedColor;

//disabled unchecked
@radioDisabledOuterCircleColor: @radioDisabledColor;

//disabled checked
@radioCheckedDisabledInnerCircleColor: @radioDisabledColor;
@radioCheckedDisabledOuterCircleColor: @radioDisabledColor;

//shadow on hover
@radioCheckedHoverShadow: @radioCheckedInnerCircleColor;
@radioUncheckedHoverShadow: @radioOuterCircleColor;

// --------RADIO-BUTTON------- //
.bl-radio-button {

  .bl-radio-button-label {
    font-size: inherit;
  }

  .bl-radio-button-color-secondary.bl-radio-button--checked {
    color: @radioCheckedInnerCircleColor;
  }

  &.bl-radio-button--checked {
    .bl-radio-button-label {
      color: @radioLabelColorChecked;
    }
  }

  &.bl-radio-button--checked.bl-radio-button--disabled {
    .bl-radio-button-label {
      color: @radioLabelColorDisabled;
    }
  }

  .bl-radio-button-label {
    &.bl-radio-button--disabled {
      color: @radioLabelColorDisabled;
    }

    color: @radioLabelColor;
  }

  .bl-radio-button-control {
    &.bl-radio-button-color-secondary {
      &.bl-radio-button--checked:hover {
        background-color: fade(@radioCheckedHoverShadow, 4%);
      }

      &:hover {
        background-color: fade(@radioUncheckedHoverShadow, 4%);
      }
    }

    &.bl-radio-button--disabled.bl-radio-button--checked {
      svg.MuiSvgIcon-root {
        color: @radioCheckedDisabledOuterCircleColor;
      }

      svg + svg.MuiSvgIcon-root {
        color: @radioCheckedDisabledInnerCircleColor;
      }
    }

    &.bl-radio-button--disabled {
      svg.MuiSvgIcon-root {
        color: @radioDisabledOuterCircleColor;
      }
    }

    &.bl-radio-button--checked {
      svg.MuiSvgIcon-root {
        color: @radioCheckedOuterCircleColor;
      }

      svg + svg.MuiSvgIcon-root {
        color: @radioCheckedInnerCircleColor;
      }
    }

    svg.MuiSvgIcon-root {
      color: @radioOuterCircleColor;
    }
  }
}


/*****    component: radio-button    *****/
/*****************************************/
/*****************************************/


/************************************/
/************************************/
/*****    component: spinner    *****/
.base-spinner {
  position: relative;
  animation: base-spinner_rotate 2s linear infinite;
  color: @themePrimary;

  circle {
    stroke-dasharray: 2, 400;
    stroke-dashoffset: 0;
    animation: base-spinner_dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
  }
}

@keyframes base-spinner_rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes base-spinner_dash {
  0% {
    stroke-dasharray: 2, 400;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 400;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 400;
    stroke-dashoffset: -124;
  }
}

/*****    component: spinner    *****/
/************************************/
/************************************/


/***********************************/
/***********************************/
/*****    component: switch    *****/
@switchThemeColor: @themePrimary;

@switchUncheckedThumbColor: #fff;
@switchUncheckedTrackBackground: contrast(@appBackgroundColor);

@switchCheckedThumbColor: @switchThemeColor;
@switchCheckedTrackBackground: @switchCheckedThumbColor;

.bl-switch {

  .bl-switch-base {
    color: @switchThemeColor;
  }

  .variant(@trackBackground, @thumbColor) {
    .bl-switch-track {
      background: @trackBackground;
    }

    .bl-switch-thumb {
      background: @thumbColor;
    }
  }

  .variant(@switchUncheckedTrackBackground, @switchUncheckedThumbColor);

  &.bl-switch--checked {
    .variant(@switchCheckedTrackBackground, @switchCheckedThumbColor);
  }

  &.bl-switch--disabled {
    .bl-switch-root {
      opacity: .38;
    }

    .bl-switch-track {
      opacity: .54;
    }

    .bl-switch-thumb {
      opacity: 1;
    }
  }
}

/*****    component: switch    *****/
/***********************************/
/***********************************/


/*************************************/
/*************************************/
/*****    component: textarea    *****/
@textareaThemeColor: @themePrimary;

//default
@textareaDefaultShadow: NULL;
@textareaDefaultShadowHover: NULL;
@textareaDefaultShadowActive: NULL;
@textareaDefaultShadowDisabled: NULL;

@textareaDefaultBackground: #eee;
@textareaDefaultBackgroundHover: NULL;
@textareaDefaultBackgroundActive: #f1f1f1;
@textareaDefaultBackgroundDisabled: #dbdbdb;

@textareaDefaultBorder: NULL;
@textareaDefaultBorderHover: NULL;
@textareaDefaultBorderActive: NULL;
@textareaDefaultBorderDisabled: NULL;

@textareaDefaultUnderlineColor: @textareaThemeColor;

@textareaDefaultB