devextreme-themebuilder 26.1.2-beta → 26.1.3

package/data/scss/widgets/base/scheduler/views/_index.scss

@@ -1,914 +1,914 @@
-@use "../../mixins" as *;
-@use "sass:math";
-
-$scheduler-workspace-background-color: null !default;
-$scheduler-workspace-accent-color: null !default;
-$scheduler-small-size-factor: null !default;
-
-$scheduler-base-border: null !default;
-$scheduler-base-border-color: null !default;
-$scheduler-accent-border: null !default;
-$scheduler-accent-border-color: null !default;
-
-$scheduler-current-time-cell-color: null !default;
-$scheduler-time-indicator-color: null !default;
-
-$scheduler-workspace-active-cell-color: null !default;
-$scheduler-workspace-hovered-cell-color: null !default;
-$scheduler-workspace-focused-cell-color: null !default;
-$scheduler-focused-cell-shadow: null !default;
-$scheduler-droppable-cell-background-color: null !default;
-
-$scheduler-left-column-width: null !default;
-$scheduler-timeline-cell-height: null !default;
-
-$scheduler-other-month-cell-opacity: null !default;
-$scheduler-workspace-month-text-color: null !default;
-$scheduler-first-month-cell-background-color: null !default;
-
-$scheduler-panel-text-color: null !default;
-
-$scheduler-timepanel-cell-offset: 20px;
-$scheduler-workspace-info-font-size: 20px;
-$scheduler-small-font-size: 14px;
-
-$scheduler-current-time-cell-border-size: 2px;
-
-$scheduler-workspace-date-table-cell-height: 50px;
-$scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5;
-$scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5;
-$scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height;
-$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px;
-$scheduler-group-header-table-cell-height: 30px;
-
-$scheduler-group-header-table-cell-width: 80px;
-
-$scheduler-month-date-text-size: 16px;
-
-$scheduler-month-date-text-padding: 6px;
-
-@use "./day" with (
-  $scheduler-base-border: $scheduler-base-border,
-  $scheduler-base-border-color: $scheduler-base-border-color,
-);
-@use "./month" with (
-  $scheduler-base-border: $scheduler-base-border,
-  $scheduler-base-border-color: $scheduler-base-border-color,
-  $scheduler-workspace-accent-color: $scheduler-workspace-accent-color,
-  $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height,
-  $scheduler-month-date-text-size: $scheduler-month-date-text-size,
-  $scheduler-workspace-month-text-color: $scheduler-workspace-month-text-color,
-  $scheduler-month-date-text-padding: $scheduler-month-date-text-padding,
-  $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
-);
-@use "./timelines" with (
-  $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height,
-  $scheduler-accent-border: $scheduler-accent-border,
-  $scheduler-base-border: $scheduler-base-border,
-  $scheduler-base-border-color: $scheduler-base-border-color,
-  $scheduler-accent-border-color: $scheduler-accent-border-color,
-);
-@use "./agenda" with (
-  $scheduler-group-header-table-cell-width: $scheduler-group-header-table-cell-width,
-  $scheduler-small-size-factor: $scheduler-small-size-factor,
-  $scheduler-small-font-size: $scheduler-small-font-size,
-  $scheduler-workspace-info-font-size: $scheduler-workspace-info-font-size,
-  $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity,
-);
-@use "./renovation" with (
-  $scheduler-timeline-cell-height: $scheduler-timeline-cell-height,
-);
-
-.dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell {
-  color: $scheduler-current-time-cell-color;
-
-  &::before {
-    position: absolute;
-    top: $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1;
-    right: 0;
-    width: 100%;
-    height: $scheduler-current-time-cell-border-size;
-    content: '';
-    background-color: $scheduler-time-indicator-color;
-  }
-}
-
-.dx-scheduler-group-column-count-one {
-  .dx-scheduler-header-panel-empty-cell {
-    width: $scheduler-left-column-width;
-  }
-}
-
-.dx-scheduler-group-column-count-two {
-  .dx-scheduler-header-panel-empty-cell {
-    width: 1.5 * $scheduler-left-column-width;
-  }
-
-  .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-    width: 0.75 * $scheduler-left-column-width;
-  }
-}
-
-.dx-scheduler-group-column-count-three {
-  .dx-scheduler-header-panel-empty-cell {
-    width: 2 * $scheduler-left-column-width;
-  }
-
-  .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-    width: math.div($scheduler-left-column-width * 2, 3);
-  }
-}
-
-.dx-scheduler-work-space-week,
-.dx-scheduler-work-space-work-week,
-.dx-scheduler-work-space-day {
-  .dx-scheduler-header-panel-empty-cell {
-    width: $scheduler-left-column-width;
-  }
-
-  &.dx-scheduler-group-column-count-one .dx-scheduler-header-panel-empty-cell {
-    width: 2 * $scheduler-left-column-width;
-  }
-
-  &.dx-scheduler-group-column-count-two .dx-scheduler-header-panel-empty-cell {
-    width: 2.5 * $scheduler-left-column-width;
-  }
-
-  &.dx-scheduler-group-column-count-three .dx-scheduler-header-panel-empty-cell {
-    width: 3 * $scheduler-left-column-width;
-  }
-
-  &.dx-scheduler-work-space-odd-cells {
-    .dx-scheduler-date-table-row:nth-child(odd) .dx-scheduler-date-table-cell {
-      border-top: $scheduler-accent-border;
-      border-top-color: $scheduler-accent-border-color;
-    }
-
-    .dx-scheduler-date-table-row:first-child .dx-scheduler-date-table-cell {
-      border-top: none;
-    }
-
-    .dx-scheduler-time-panel-row:nth-child(2n) .dx-scheduler-time-panel-cell {
-      &::after {
-        background-color: $scheduler-accent-border-color;
-      }
-    }
-  }
-}
-
-.dx-scheduler-work-space {
-  border: $scheduler-base-border;
-  border-color: $scheduler-base-border-color;
-  background-color: $scheduler-workspace-background-color;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-
-  // T656716
-  float: left;
-
-  &.dx-scheduler-timeline-month:not(.dx-scheduler-agenda) {
-    .dx-scheduler-all-day-title {
-      border-top: $scheduler-base-border;
-      border-top-color: $scheduler-base-border-color;
-    }
-
-    .dx-scheduler-date-table-cell {
-      border-right: none;
-    }
-  }
-
-  &.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) {
-    .dx-scheduler-all-day-panel td {
-      border-top: $scheduler-base-border;
-      border-top-color: $scheduler-base-border-color;
-    }
-  }
-
-  &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
-    .dx-scheduler-header-panel {
-      border-bottom: 2px solid;
-      border-bottom-color: $scheduler-base-border-color;
-    }
-
-    .dx-scheduler-header-panel-empty-cell {
-      border-bottom: 2px solid;
-      border-bottom-color: $scheduler-base-border-color;
-    }
-
-    &.dx-scheduler-work-space-vertical-grouped.dx-scheduler-work-space-both-scrollbar {
-      .dx-scheduler-header-panel-empty-cell {
-        border-bottom: none;
-      }
-
-      .dx-scheduler-header-panel {
-        border-bottom: none;
-      }
-    }
-  }
-
-  &.dx-scheduler-work-space-month:not(.dx-scheduler-work-space-vertical-grouped) {
-    .dx-scheduler-header-panel {
-      border-bottom: $scheduler-base-border;
-      border-bottom-color: $scheduler-base-border-color;
-    }
-  }
-}
-
-.dx-scheduler-header-panel-container {
-  display: flex;
-
-  // Header collapses in Safari without it
-  flex-shrink: 0;
-}
-
-.dx-scheduler-header-panel-empty-cell {
-  display: flex;
-  align-items: flex-end;
-  flex-shrink: 0;
-  width: 0;
-  border-bottom: 1px solid;
-  border-bottom-color: $scheduler-base-border-color;
-  border-right: 1px solid;
-  border-right-color: $scheduler-base-border-color;
-}
-
-.dx-scheduler-header-tables-container {
-  overflow: hidden;
-  width: 100%;
-}
-
-.dx-scheduler-date-table-container {
-  position: relative;
-}
-
-.dx-scheduler-work-space-month:not(.dx-scheduler-work-space-count) .dx-scheduler-date-table-container {
-  height: 100%;
-}
-
-.dx-scheduler-date-table-scrollable {
-  width: 100%;
-  overflow: hidden;
-
-  .dx-scrollable-content {
-    overflow: hidden;
-  }
-}
-
-.dx-scheduler-date-table-scrollable-content,
-.dx-scheduler-side-bar-scrollable-content {
-  display: flex;
-  align-items: flex-start;
-}
-
-.dx-scheduler-date-table-scrollable-content {
-  position: relative;
-  float: left;
-}
-
-.dx-scheduler-date-table-cell {
-  border-top: $scheduler-base-border;
-  border-top-color: $scheduler-base-border-color;
-  height: $scheduler-workspace-date-table-cell-height;
-}
-
-.dx-scheduler-date-table-cell,
-.dx-scheduler-header-panel-cell,
-.dx-scheduler-time-panel-cell,
-.dx-scheduler-group-header {
-  @include user-select(none);
-
-  cursor: default;
-}
-
-.dx-scheduler-date-table-current-date {
-  font-weight: bold;
-}
-
-.dx-scheduler-date-table-other-month {
-  opacity: $scheduler-other-month-cell-opacity;
-}
-
-.dx-scheduler-work-space-flex-container {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  min-height: 0;
-}
-
-.dx-scheduler-group-flex-container {
-  flex: 0 0 100%;
-  min-height: 100%;
-  display: flex;
-
-  .dx-scheduler-group-row {
-    @include flex-container(column, nowrap);
-
-    flex: 0 0 auto;
-    min-width: 0;
-
-    &:last-child .dx-scheduler-group-header {
-      border-right: $scheduler-base-border;
-      border-right-color: $scheduler-base-border-color;
-    }
-
-    .dx-scheduler-group-header {
-      @include flex-container(row, nowrap);
-
-      flex: 1 1 0;
-      padding: 0 5px;
-      height: auto;
-      width: $scheduler-left-column-width;
-      justify-content: flex-start;
-      align-items: flex-start;
-      text-align: left;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      border: none;
-      border-top: $scheduler-base-border;
-      border-top-color: $scheduler-base-border-color;
-    }
-  }
-}
-
-.dx-scheduler-header-scrollable {
-  height: auto;
-}
-
-.dx-scheduler-work-space-day,
-.dx-scheduler-work-space-work-week,
-.dx-scheduler-work-space-week .dx-scheduler-date-table {
-  .dx-scheduler-date-table-row:first-child .dx-scheduler-date-table-cell {
-    border-top: none;
-  }
-}
-
-.dx-scheduler-date-table-cell,
-.dx-scheduler-all-day-table-cell {
-  border-top: $scheduler-base-border;
-  border-top-color: $scheduler-base-border-color;
-  border-left: $scheduler-base-border;
-  border-left-color: $scheduler-base-border-color;
-
-  &:first-child {
-    border-left: none;
-  }
-}
-
-.dx-scheduler-date-table-cell,
-.dx-scheduler-header-panel-cell {
-  border-right: $scheduler-base-border;
-  border-right-color: $scheduler-base-border-color;
-}
-
-.dx-scheduler-work-space-week,
-.dx-scheduler-work-space-work-week,
-.dx-scheduler-work-space-day.dx-scheduler-work-space-count {
-  .dx-scheduler-all-day-title {
-    border-top: $scheduler-base-border;
-    border-top-color: $scheduler-base-border-color;
-  }
-}
-
-.dx-scheduler-work-space-month,
-.dx-scheduler-timeline {
-  .dx-scheduler-all-day-panel,
-  .dx-scheduler-all-day-title {
-    display: none;
-  }
-
-  // TODO: this is a WA, remove after renovation
-  .dx-scheduler-time-panel {
-    display: none;
-  }
-}
-
-.dx-scheduler-work-space-week,
-.dx-scheduler-work-space-month {
-  .dx-scheduler-header-panel-cell,
-  .dx-scheduler-date-table-cell,
-  .dx-scheduler-all-day-table-cell {
-    &:nth-child(7n) {
-      border-right: none;
-
-      .dx-rtl & {
-        border-left: none;
-      }
-    }
-  }
-}
-
-.dx-scheduler-work-space-work-week {
-  .dx-scheduler-header-panel-cell,
-  .dx-scheduler-date-table-cell,
-  .dx-scheduler-all-day-table-cell {
-    &:nth-child(5n) {
-      border-right: none;
-
-      .dx-rtl & {
-        border-left: none;
-      }
-    }
-  }
-}
-
-.dx-scheduler-work-space-count {
-  &.dx-scheduler-work-space-week {
-    .dx-scheduler-header-panel-cell,
-    .dx-scheduler-date-table-cell,
-    .dx-scheduler-all-day-table-cell {
-      &:nth-child(7n) {
-        border-right: $scheduler-accent-border;
-        border-right-color: $scheduler-accent-border-color;
-
-        .dx-rtl & {
-          border-left: $scheduler-accent-border;
-          border-left-color: $scheduler-accent-border-color;
-        }
-      }
-    }
-  }
-
-  &.dx-scheduler-work-space-work-week {
-    .dx-scheduler-header-panel-cell,
-    .dx-scheduler-date-table-cell,
-    .dx-scheduler-all-day-table-cell {
-      &:nth-child(5n) {
-        border-right: $scheduler-accent-border;
-        border-right-color: $scheduler-accent-border-color;
-
-        .dx-rtl & {
-          border-right: $scheduler-base-border;
-          border-right-color: $scheduler-base-border-color;
-          border-left: $scheduler-accent-border;
-          border-left-color: $scheduler-accent-border-color;
-        }
-      }
-    }
-  }
-}
-
-.dx-scheduler-header-panel {
-  border-spacing: 0;
-  table-layout: fixed;
-  width: 100%;
-  font-size: $scheduler-workspace-info-font-size;
-}
-
-.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
-  &.dx-scheduler-work-space-all-day .dx-scheduler-header-panel-empty-cell {
-    border-bottom: none;
-  }
-}
-
-.dx-scheduler-work-space-both-scrollbar {
-  .dx-scheduler-header-panel {
-    width: auto;
-  }
-
-  .dx-scheduler-date-table {
-    float: none;
-  }
-
-  .dx-scheduler-header-scrollable {
-    height: auto;
-    flex-shrink: 0;
-  }
-
-  .dx-scheduler-date-table-row .dx-scheduler-date-table-cell,
-  .dx-scheduler-all-day-table-row .dx-scheduler-all-day-table-cell {
-    &:first-child {
-      border-left: none;
-    }
-  }
-}
-
-.dx-scheduler-header-panel-cell {
-  position: relative;
-  color: $scheduler-panel-text-color;
-  padding: 0;
-  vertical-align: middle;
-  height: $scheduler-header-panel-table-cell-height;
-  text-align: center;
-  font-weight: normal;
-  border-left: $scheduler-base-border;
-  border-left-color: $scheduler-base-border-color;
-
-  &:first-child {
-    border-left: 1px solid transparent;
-  }
-
-  @include dx-overflow();
-}
-
-.dx-scheduler-all-day-panel {
-  width: 100%;
-  position: relative;
-
-  .dx-scheduler-all-day-table-cell {
-    border-bottom: 2px solid;
-    border-bottom-color: $scheduler-base-border-color;
-  }
-}
-
-.dx-scheduler-all-day-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $scheduler-panel-text-color;
-  width: $scheduler-left-column-width;
-  height: $scheduler-all-day-table-cell-height;
-  position: relative;
-  text-align: center;
-  border-bottom: 2px solid;
-  border-bottom-color: $scheduler-base-border-color;
-
-  @include user-select(none);
-
-  .dx-scheduler-small & {
-    width: $scheduler-left-column-width * $scheduler-small-size-factor;
-  }
-
-  .dx-scheduler-work-space-all-day-collapsed & {
-    height: $scheduler-collapsed-all-day-table-cell-height;
-  }
-
-  .dx-scheduler-work-space-vertical-grouped & {
-    height: $scheduler-vertical-grouped-all-day-table-cell-height;
-  }
-}
-
-.dx-scheduler-all-day-table {
-  border-spacing: 0;
-  table-layout: fixed;
-  width: 100%;
-}
-
-.dx-scheduler-all-day-table { // stylelint-disable-line no-duplicate-selectors
-  height: $scheduler-all-day-table-cell-height;
-
-  .dx-scheduler-work-space-all-day-collapsed & {
-    height: $scheduler-collapsed-all-day-table-cell-height;
-  }
-}
-
-.dx-scheduler-group-header {
-  height: $scheduler-group-header-table-cell-height;
-  text-align: center;
-}
-
-.dx-scheduler-time-panel {
-  flex: 0 0 auto;
-  width: $scheduler-left-column-width;
-  border-collapse: collapse;
-  font-size: $scheduler-workspace-info-font-size;
-  border-right: $scheduler-base-border;
-  border-right-color: $scheduler-base-border-color;
-
-  .dx-scheduler-small & {
-    width: $scheduler-left-column-width * $scheduler-small-size-factor;
-    font-size: $scheduler-small-font-size;
-  }
-
-  .dx-scheduler-time-panel-row:first-of-type {
-    td > div {
-      margin-top: 0;
-    }
-  }
-}
-
-.dx-scheduler-time-panel-cell {
-  color: $scheduler-panel-text-color;
-  position: relative;
-  width: 100%;
-  text-align: right;
-  vertical-align: top;
-  height: $scheduler-workspace-date-table-cell-height;
-  padding-right: $scheduler-timepanel-cell-offset;
-  border-bottom: 1px solid transparent;
-
-  > div {
-    margin-top: -13px;
-  }
-
-  .dx-scheduler-small & {
-    padding-left: 0;
-    padding-right: $scheduler-timepanel-cell-offset * $scheduler-small-size-factor;
-  }
-
-  &::after {
-    position: absolute;
-    bottom: -1px;
-    width: 10%;
-    height: 1px;
-    right: 0;
-    background-color: $scheduler-base-border-color;
-  }
-
-  &.dx-scheduler-time-panel-current-time-cell {
-    color: $scheduler-current-time-cell-color;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: $scheduler-current-time-cell-border-size;
-      height: inherit;
-      background-color: $scheduler-time-indicator-color;
-    }
-  }
-
-  .dx-scheduler-time-panel-row:last-child & {
-    &::after {
-      display: none;
-    }
-  }
-}
-
-.dx-scheduler-time-panel-title-cell {
-  padding: 0;
-}
-
-.dx-scheduler-date-table {
-  width: 100%;
-  border-spacing: 0;
-  table-layout: fixed;
-}
-
-.dx-scheduler-date-table-cell { // stylelint-disable-line no-duplicate-selectors
-  height: $scheduler-workspace-date-table-cell-height;
-}
-
-// stylelint-disable-next-line no-duplicate-selectors
-.dx-scheduler-all-day-table-cell,
-.dx-scheduler-date-table-cell {
-  &.dx-state-active {
-    background-color: $scheduler-workspace-active-cell-color;
-  }
-
-  &.dx-state-hover {
-    background-color: $scheduler-workspace-hovered-cell-color;
-
-    &.dx-state-focused {
-      background-color: $scheduler-workspace-focused-cell-color;
-    }
-  }
-
-  &.dx-state-focused {
-    background-color: $scheduler-workspace-focused-cell-color;
-    opacity: 1;
-  }
-
-  &.dx-scheduler-focused-cell {
-    box-shadow: $scheduler-focused-cell-shadow;
-  }
-
-  > div {
-    pointer-events: none;
-  }
-}
-
-.dx-scheduler-date-table-droppable-cell {
-  background-color: $scheduler-droppable-cell-background-color;
-}
-
-.dx-scheduler-group-header-content div {
-  @include dx-overflow();
-}
-
-.dx-scheduler-work-space-horizontal-grouped {
-  &.dx-scheduler-timeline {
-    .dx-scheduler-sidebar-scrollable {
-      display: none;
-    }
-
-    .dx-scheduler-group-header-content {
-      display: flex;
-      height: 40px;
-
-      > div {
-        margin: auto;
-      }
-    }
-
-    .dx-scheduler-header-panel {
-      @include flex-container(row, nowrap);
-    }
-
-    .dx-scheduler-header-row,
-    .dx-scheduler-group-row {
-      @include flex-container(row, nowrap);
-    }
-
-    &.dx-scheduler-work-space-grouped .dx-scheduler-group-header {
-      flex-grow: 1;
-      flex-basis: 0;
-
-      @include flex-container(row, nowrap);
-    }
-
-    &.dx-scheduler-work-space-group-by-date .dx-scheduler-group-header {
-      flex-basis: auto;
-    }
-
-    &:not(.dx-scheduler-work-space-group-by-date) {
-      .dx-scheduler-header-row .dx-scheduler-header-panel-cell {
-        border-right: none;
-      }
-    }
-  }
-}
-
-.dx-scheduler-work-space-vertical-grouped {
-  .dx-scheduler-work-space-vertical-group-table {
-    height: 100%;
-    min-height: 100px;
-    border-top: $scheduler-base-border;
-    border-top-color: $scheduler-base-border-color;
-    border-spacing: 0;
-
-    @include flex-container(column, nowrap);
-  }
-
-  &.dx-scheduler-work-space-day,
-  &.dx-scheduler-work-space-week,
-  &.dx-scheduler-work-space-work-week {
-    .dx-scheduler-all-day-title {
-      top: 0;
-      height: 50px !important; // stylelint-disable-line declaration-no-important
-      border-bottom: none;
-    }
-  }
-
-  .dx-scheduler-all-day-panel {
-    display: table-cell;
-    position: relative;
-  }
-
-  .dx-scheduler-all-day-table-row {
-    height: 50px;
-  }
-
-  .dx-scheduler-time-panel-cell {
-    &.dx-scheduler-first-group-cell {
-      border-top: $scheduler-base-border;
-      border-top-color: $scheduler-base-border-color;
-
-      > div {
-        margin-top: 0;
-      }
-    }
-
-    &.dx-scheduler-last-group-cell {
-      border-bottom: none;
-      box-shadow: inset 0 -1px 0 $scheduler-base-border-color;
-    }
-  }
-
-  .dx-scheduler-date-table-cell {
-    &.dx-scheduler-last-group-cell {
-      border-bottom: 2px solid;
-      border-bottom-color: $scheduler-base-border-color;
-    }
-  }
-
-  &.dx-scheduler-work-space-both-scrollbar {
-    .dx-scheduler-sidebar-scrollable,
-    .dx-scheduler-date-table-scrollable {
-      border-top: $scheduler-base-border;
-      border-top-color: $scheduler-base-border-color;
-    }
-  }
-}
-
-.dx-rtl {
-  .dx-scheduler-header-panel-empty-cell {
-    border-left: 1px solid;
-    border-left-color: $scheduler-base-border-color;
-    border-right: none;
-  }
-
-  .dx-scheduler-date-table-scrollable-content,
-  .dx-scheduler-side-bar-scrollable-content {
-    direction: rtl;
-  }
-
-  .dx-scheduler-work-space-vertical-grouped,
-  .dx-scheduler-sidebar-scrollable {
-    .dx-scheduler-group-row:last-child .dx-scheduler-group-header {
-      border-right: none;
-      border-left: $scheduler-base-border;
-      border-left-color: $scheduler-base-border-color;
-    }
-  }
-
-  .dx-scheduler-header-panel {
-    left: 0;
-    right: inherit;
-  }
-
-  .dx-scheduler-work-space-vertical-group-table,
-  .dx-scheduler-time-panel {
-    float: right;
-  }
-
-  .dx-scheduler-time-panel-cell {
-    text-align: left;
-    padding-left: $scheduler-timepanel-cell-offset;
-    padding-right: 0;
-
-    .dx-scheduler-small & {
-      padding-left: $scheduler-timepanel-cell-offset * $scheduler-small-size-factor;
-    }
-
-    &::after {
-      right: auto;
-      left: 0;
-    }
-  }
-
-  .dx-scheduler-work-space-week .dx-scheduler-all-day-table-cell,
-  .dx-scheduler-work-space-work-week .dx-scheduler-all-day-table-cell {
-    border-right: $scheduler-base-border;
-    border-right-color: $scheduler-base-border-color;
-    border-left: none;
-  }
-
-  &.dx-scheduler-work-space-both-scrollbar {
-    .dx-scheduler-time-panel {
-      border-left: $scheduler-base-border;
-      border-left-color: $scheduler-base-border-color;
-      border-right: none;
-    }
-
-    .dx-scheduler-date-table-row .dx-scheduler-date-table-cell,
-    .dx-scheduler-header-row .dx-scheduler-header-panel-cell,
-    .dx-scheduler-all-day-table-row .dx-scheduler-all-day-table-cell {
-      &:first-child {
-        border-right: none;
-        border-left: $scheduler-base-border;
-        border-left-color: $scheduler-base-border-color;
-      }
-    }
-  }
-
-  .dx-scheduler-timeline {
-    &.dx-scheduler-work-space-grouped {
-      .dx-scheduler-sidebar-scrollable {
-        float: right;
-      }
-
-      .dx-scheduler-group-header {
-        padding: 0 5px 0 10px;
-      }
-
-      &.dx-scheduler-group-column-count-two,
-      &.dx-scheduler-group-column-count-three {
-        .dx-scheduler-group-header:last-child {
-          text-align: right;
-        }
-      }
-    }
-  }
-
-  .dx-scheduler-date-table-cell,
-  .dx-scheduler-header-panel-cell,
-  .dx-scheduler-all-day-table-cell {
-    &:first-child {
-      border-right: none;
-      border-left: $scheduler-base-border;
-      border-left-color: $scheduler-base-border-color;
-    }
-  }
-
-  .dx-scheduler-time-panel {
-    border-left: $scheduler-base-border;
-    border-left-color: $scheduler-base-border-color;
-    border-right: none;
-  }
-}
-
-.dx-scheduler-small {
-  .dx-scheduler-work-space-week,
-  .dx-scheduler-work-space-work-week,
-  .dx-scheduler-work-space-day {
-    .dx-scheduler-header-panel-empty-cell {
-      width: $scheduler-small-size-factor * $scheduler-left-column-width;
-    }
-
-    &.dx-scheduler-group-column-count-one .dx-scheduler-header-panel-empty-cell {
-      width: (1 + $scheduler-small-size-factor) * $scheduler-left-column-width;
-    }
-
-    &.dx-scheduler-group-column-count-two .dx-scheduler-header-panel-empty-cell {
-      width: (1.5 + $scheduler-small-size-factor) * $scheduler-left-column-width;
-    }
-
-    &.dx-scheduler-group-column-count-three .dx-scheduler-header-panel-empty-cell {
-      width: (2 + $scheduler-small-size-factor) * $scheduler-left-column-width;
-    }
-  }
-}
+@use "../../mixins" as *;
+@use "sass:math";
+
+$scheduler-workspace-background-color: null !default;
+$scheduler-workspace-accent-color: null !default;
+$scheduler-small-size-factor: null !default;
+
+$scheduler-base-border: null !default;
+$scheduler-base-border-color: null !default;
+$scheduler-accent-border: null !default;
+$scheduler-accent-border-color: null !default;
+
+$scheduler-current-time-cell-color: null !default;
+$scheduler-time-indicator-color: null !default;
+
+$scheduler-workspace-active-cell-color: null !default;
+$scheduler-workspace-hovered-cell-color: null !default;
+$scheduler-workspace-focused-cell-color: null !default;
+$scheduler-focused-cell-shadow: null !default;
+$scheduler-droppable-cell-background-color: null !default;
+
+$scheduler-left-column-width: null !default;
+$scheduler-timeline-cell-height: null !default;
+
+$scheduler-other-month-cell-opacity: null !default;
+$scheduler-workspace-month-text-color: null !default;
+$scheduler-first-month-cell-background-color: null !default;
+
+$scheduler-panel-text-color: null !default;
+
+$scheduler-timepanel-cell-offset: 20px;
+$scheduler-workspace-info-font-size: 20px;
+$scheduler-small-font-size: 14px;
+
+$scheduler-current-time-cell-border-size: 2px;
+
+$scheduler-workspace-date-table-cell-height: 50px;
+$scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5;
+$scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5;
+$scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height;
+$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px;
+$scheduler-group-header-table-cell-height: 30px;
+
+$scheduler-group-header-table-cell-width: 80px;
+
+$scheduler-month-date-text-size: 16px;
+
+$scheduler-month-date-text-padding: 6px;
+
+@use "./day" with (
+  $scheduler-base-border: $scheduler-base-border,
+  $scheduler-base-border-color: $scheduler-base-border-color,
+);
+@use "./month" with (
+  $scheduler-base-border: $scheduler-base-border,
+  $scheduler-base-border-color: $scheduler-base-border-color,
+  $scheduler-workspace-accent-color: $scheduler-workspace-accent-color,
+  $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height,
+  $scheduler-month-date-text-size: $scheduler-month-date-text-size,
+  $scheduler-workspace-month-text-color: $scheduler-workspace-month-text-color,
+  $scheduler-month-date-text-padding: $scheduler-month-date-text-padding,
+  $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
+);
+@use "./timelines" with (
+  $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height,
+  $scheduler-accent-border: $scheduler-accent-border,
+  $scheduler-base-border: $scheduler-base-border,
+  $scheduler-base-border-color: $scheduler-base-border-color,
+  $scheduler-accent-border-color: $scheduler-accent-border-color,
+);
+@use "./agenda" with (
+  $scheduler-group-header-table-cell-width: $scheduler-group-header-table-cell-width,
+  $scheduler-small-size-factor: $scheduler-small-size-factor,
+  $scheduler-small-font-size: $scheduler-small-font-size,
+  $scheduler-workspace-info-font-size: $scheduler-workspace-info-font-size,
+  $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity,
+);
+@use "./renovation" with (
+  $scheduler-timeline-cell-height: $scheduler-timeline-cell-height,
+);
+
+.dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell {
+  color: $scheduler-current-time-cell-color;
+
+  &::before {
+    position: absolute;
+    top: $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1;
+    right: 0;
+    width: 100%;
+    height: $scheduler-current-time-cell-border-size;
+    content: '';
+    background-color: $scheduler-time-indicator-color;
+  }
+}
+
+.dx-scheduler-group-column-count-one {
+  .dx-scheduler-header-panel-empty-cell {
+    width: $scheduler-left-column-width;
+  }
+}
+
+.dx-scheduler-group-column-count-two {
+  .dx-scheduler-header-panel-empty-cell {
+    width: 1.5 * $scheduler-left-column-width;
+  }
+
+  .dx-scheduler-group-flex-container .dx-scheduler-group-header {
+    width: 0.75 * $scheduler-left-column-width;
+  }
+}
+
+.dx-scheduler-group-column-count-three {
+  .dx-scheduler-header-panel-empty-cell {
+    width: 2 * $scheduler-left-column-width;
+  }
+
+  .dx-scheduler-group-flex-container .dx-scheduler-group-header {
+    width: math.div($scheduler-left-column-width * 2, 3);
+  }
+}
+
+.dx-scheduler-work-space-week,
+.dx-scheduler-work-space-work-week,
+.dx-scheduler-work-space-day {
+  .dx-scheduler-header-panel-empty-cell {
+    width: $scheduler-left-column-width;
+  }
+
+  &.dx-scheduler-group-column-count-one .dx-scheduler-header-panel-empty-cell {
+    width: 2 * $scheduler-left-column-width;
+  }
+
+  &.dx-scheduler-group-column-count-two .dx-scheduler-header-panel-empty-cell {
+    width: 2.5 * $scheduler-left-column-width;
+  }
+
+  &.dx-scheduler-group-column-count-three .dx-scheduler-header-panel-empty-cell {
+    width: 3 * $scheduler-left-column-width;
+  }
+
+  &.dx-scheduler-work-space-odd-cells {
+    .dx-scheduler-date-table-row:nth-child(odd) .dx-scheduler-date-table-cell {
+      border-top: $scheduler-accent-border;
+      border-top-color: $scheduler-accent-border-color;
+    }
+
+    .dx-scheduler-date-table-row:first-child .dx-scheduler-date-table-cell {
+      border-top: none;
+    }
+
+    .dx-scheduler-time-panel-row:nth-child(2n) .dx-scheduler-time-panel-cell {
+      &::after {
+        background-color: $scheduler-accent-border-color;
+      }
+    }
+  }
+}
+
+.dx-scheduler-work-space {
+  border: $scheduler-base-border;
+  border-color: $scheduler-base-border-color;
+  background-color: $scheduler-workspace-background-color;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+
+  // T656716
+  float: left;
+
+  &.dx-scheduler-timeline-month:not(.dx-scheduler-agenda) {
+    .dx-scheduler-all-day-title {
+      border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+    }
+
+    .dx-scheduler-date-table-cell {
+      border-right: none;
+    }
+  }
+
+  &.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) {
+    .dx-scheduler-all-day-panel td {
+      border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+    }
+  }
+
+  &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
+    .dx-scheduler-header-panel {
+      border-bottom: 2px solid;
+      border-bottom-color: $scheduler-base-border-color;
+    }
+
+    .dx-scheduler-header-panel-empty-cell {
+      border-bottom: 2px solid;
+      border-bottom-color: $scheduler-base-border-color;
+    }
+
+    &.dx-scheduler-work-space-vertical-grouped.dx-scheduler-work-space-both-scrollbar {
+      .dx-scheduler-header-panel-empty-cell {
+        border-bottom: none;
+      }
+
+      .dx-scheduler-header-panel {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &.dx-scheduler-work-space-month:not(.dx-scheduler-work-space-vertical-grouped) {
+    .dx-scheduler-header-panel {
+      border-bottom: $scheduler-base-border;
+      border-bottom-color: $scheduler-base-border-color;
+    }
+  }
+}
+
+.dx-scheduler-header-panel-container {
+  display: flex;
+
+  // Header collapses in Safari without it
+  flex-shrink: 0;
+}
+
+.dx-scheduler-header-panel-empty-cell {
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
+  width: 0;
+  border-bottom: 1px solid;
+  border-bottom-color: $scheduler-base-border-color;
+  border-right: 1px solid;
+  border-right-color: $scheduler-base-border-color;
+}
+
+.dx-scheduler-header-tables-container {
+  overflow: hidden;
+  width: 100%;
+}
+
+.dx-scheduler-date-table-container {
+  position: relative;
+}
+
+.dx-scheduler-work-space-month:not(.dx-scheduler-work-space-count) .dx-scheduler-date-table-container {
+  height: 100%;
+}
+
+.dx-scheduler-date-table-scrollable {
+  width: 100%;
+  overflow: hidden;
+
+  .dx-scrollable-content {
+    overflow: hidden;
+  }
+}
+
+.dx-scheduler-date-table-scrollable-content,
+.dx-scheduler-side-bar-scrollable-content {
+  display: flex;
+  align-items: flex-start;
+}
+
+.dx-scheduler-date-table-scrollable-content {
+  position: relative;
+  float: left;
+}
+
+.dx-scheduler-date-table-cell {
+  border-top: $scheduler-base-border;
+  border-top-color: $scheduler-base-border-color;
+  height: $scheduler-workspace-date-table-cell-height;
+}
+
+.dx-scheduler-date-table-cell,
+.dx-scheduler-header-panel-cell,
+.dx-scheduler-time-panel-cell,
+.dx-scheduler-group-header {
+  @include user-select(none);
+
+  cursor: default;
+}
+
+.dx-scheduler-date-table-current-date {
+  font-weight: bold;
+}
+
+.dx-scheduler-date-table-other-month {
+  opacity: $scheduler-other-month-cell-opacity;
+}
+
+.dx-scheduler-work-space-flex-container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  min-height: 0;
+}
+
+.dx-scheduler-group-flex-container {
+  flex: 0 0 100%;
+  min-height: 100%;
+  display: flex;
+
+  .dx-scheduler-group-row {
+    @include flex-container(column, nowrap);
+
+    flex: 0 0 auto;
+    min-width: 0;
+
+    &:last-child .dx-scheduler-group-header {
+      border-right: $scheduler-base-border;
+      border-right-color: $scheduler-base-border-color;
+    }
+
+    .dx-scheduler-group-header {
+      @include flex-container(row, nowrap);
+
+      flex: 1 1 0;
+      padding: 0 5px;
+      height: auto;
+      width: $scheduler-left-column-width;
+      justify-content: flex-start;
+      align-items: flex-start;
+      text-align: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border: none;
+      border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+    }
+  }
+}
+
+.dx-scheduler-header-scrollable {
+  height: auto;
+}
+
+.dx-scheduler-work-space-day,
+.dx-scheduler-work-space-work-week,
+.dx-scheduler-work-space-week .dx-scheduler-date-table {
+  .dx-scheduler-date-table-row:first-child .dx-scheduler-date-table-cell {
+    border-top: none;
+  }
+}
+
+.dx-scheduler-date-table-cell,
+.dx-scheduler-all-day-table-cell {
+  border-top: $scheduler-base-border;
+  border-top-color: $scheduler-base-border-color;
+  border-left: $scheduler-base-border;
+  border-left-color: $scheduler-base-border-color;
+
+  &:first-child {
+    border-left: none;
+  }
+}
+
+.dx-scheduler-date-table-cell,
+.dx-scheduler-header-panel-cell {
+  border-right: $scheduler-base-border;
+  border-right-color: $scheduler-base-border-color;
+}
+
+.dx-scheduler-work-space-week,
+.dx-scheduler-work-space-work-week,
+.dx-scheduler-work-space-day.dx-scheduler-work-space-count {
+  .dx-scheduler-all-day-title {
+    border-top: $scheduler-base-border;
+    border-top-color: $scheduler-base-border-color;
+  }
+}
+
+.dx-scheduler-work-space-month,
+.dx-scheduler-timeline {
+  .dx-scheduler-all-day-panel,
+  .dx-scheduler-all-day-title {
+    display: none;
+  }
+
+  // TODO: this is a WA, remove after renovation
+  .dx-scheduler-time-panel {
+    display: none;
+  }
+}
+
+.dx-scheduler-work-space-week,
+.dx-scheduler-work-space-month {
+  .dx-scheduler-header-panel-cell,
+  .dx-scheduler-date-table-cell,
+  .dx-scheduler-all-day-table-cell {
+    &:nth-child(7n) {
+      border-right: none;
+
+      .dx-rtl & {
+        border-left: none;
+      }
+    }
+  }
+}
+
+.dx-scheduler-work-space-work-week {
+  .dx-scheduler-header-panel-cell,
+  .dx-scheduler-date-table-cell,
+  .dx-scheduler-all-day-table-cell {
+    &:nth-child(5n) {
+      border-right: none;
+
+      .dx-rtl & {
+        border-left: none;
+      }
+    }
+  }
+}
+
+.dx-scheduler-work-space-count {
+  &.dx-scheduler-work-space-week {
+    .dx-scheduler-header-panel-cell,
+    .dx-scheduler-date-table-cell,
+    .dx-scheduler-all-day-table-cell {
+      &:nth-child(7n) {
+        border-right: $scheduler-accent-border;
+        border-right-color: $scheduler-accent-border-color;
+
+        .dx-rtl & {
+          border-left: $scheduler-accent-border;
+          border-left-color: $scheduler-accent-border-color;
+        }
+      }
+    }
+  }
+
+  &.dx-scheduler-work-space-work-week {
+    .dx-scheduler-header-panel-cell,
+    .dx-scheduler-date-table-cell,
+    .dx-scheduler-all-day-table-cell {
+      &:nth-child(5n) {
+        border-right: $scheduler-accent-border;
+        border-right-color: $scheduler-accent-border-color;
+
+        .dx-rtl & {
+          border-right: $scheduler-base-border;
+          border-right-color: $scheduler-base-border-color;
+          border-left: $scheduler-accent-border;
+          border-left-color: $scheduler-accent-border-color;
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-header-panel {
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
+  font-size: $scheduler-workspace-info-font-size;
+}
+
+.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
+  &.dx-scheduler-work-space-all-day .dx-scheduler-header-panel-empty-cell {
+    border-bottom: none;
+  }
+}
+
+.dx-scheduler-work-space-both-scrollbar {
+  .dx-scheduler-header-panel {
+    width: auto;
+  }
+
+  .dx-scheduler-date-table {
+    float: none;
+  }
+
+  .dx-scheduler-header-scrollable {
+    height: auto;
+    flex-shrink: 0;
+  }
+
+  .dx-scheduler-date-table-row .dx-scheduler-date-table-cell,
+  .dx-scheduler-all-day-table-row .dx-scheduler-all-day-table-cell {
+    &:first-child {
+      border-left: none;
+    }
+  }
+}
+
+.dx-scheduler-header-panel-cell {
+  position: relative;
+  color: $scheduler-panel-text-color;
+  padding: 0;
+  vertical-align: middle;
+  height: $scheduler-header-panel-table-cell-height;
+  text-align: center;
+  font-weight: normal;
+  border-left: $scheduler-base-border;
+  border-left-color: $scheduler-base-border-color;
+
+  &:first-child {
+    border-left: 1px solid transparent;
+  }
+
+  @include dx-overflow();
+}
+
+.dx-scheduler-all-day-panel {
+  width: 100%;
+  position: relative;
+
+  .dx-scheduler-all-day-table-cell {
+    border-bottom: 2px solid;
+    border-bottom-color: $scheduler-base-border-color;
+  }
+}
+
+.dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $scheduler-panel-text-color;
+  width: $scheduler-left-column-width;
+  height: $scheduler-all-day-table-cell-height;
+  position: relative;
+  text-align: center;
+  border-bottom: 2px solid;
+  border-bottom-color: $scheduler-base-border-color;
+
+  @include user-select(none);
+
+  .dx-scheduler-small & {
+    width: $scheduler-left-column-width * $scheduler-small-size-factor;
+  }
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: $scheduler-collapsed-all-day-table-cell-height;
+  }
+
+  .dx-scheduler-work-space-vertical-grouped & {
+    height: $scheduler-vertical-grouped-all-day-table-cell-height;
+  }
+}
+
+.dx-scheduler-all-day-table {
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.dx-scheduler-all-day-table { // stylelint-disable-line no-duplicate-selectors
+  height: $scheduler-all-day-table-cell-height;
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: $scheduler-collapsed-all-day-table-cell-height;
+  }
+}
+
+.dx-scheduler-group-header {
+  height: $scheduler-group-header-table-cell-height;
+  text-align: center;
+}
+
+.dx-scheduler-time-panel {
+  flex: 0 0 auto;
+  width: $scheduler-left-column-width;
+  border-collapse: collapse;
+  font-size: $scheduler-workspace-info-font-size;
+  border-right: $scheduler-base-border;
+  border-right-color: $scheduler-base-border-color;
+
+  .dx-scheduler-small & {
+    width: $scheduler-left-column-width * $scheduler-small-size-factor;
+    font-size: $scheduler-small-font-size;
+  }
+
+  .dx-scheduler-time-panel-row:first-of-type {
+    td > div {
+      margin-top: 0;
+    }
+  }
+}
+
+.dx-scheduler-time-panel-cell {
+  color: $scheduler-panel-text-color;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  vertical-align: top;
+  height: $scheduler-workspace-date-table-cell-height;
+  padding-right: $scheduler-timepanel-cell-offset;
+  border-bottom: 1px solid transparent;
+
+  > div {
+    margin-top: -13px;
+  }
+
+  .dx-scheduler-small & {
+    padding-left: 0;
+    padding-right: $scheduler-timepanel-cell-offset * $scheduler-small-size-factor;
+  }
+
+  &::after {
+    position: absolute;
+    bottom: -1px;
+    width: 10%;
+    height: 1px;
+    right: 0;
+    background-color: $scheduler-base-border-color;
+  }
+
+  &.dx-scheduler-time-panel-current-time-cell {
+    color: $scheduler-current-time-cell-color;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: $scheduler-current-time-cell-border-size;
+      height: inherit;
+      background-color: $scheduler-time-indicator-color;
+    }
+  }
+
+  .dx-scheduler-time-panel-row:last-child & {
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.dx-scheduler-time-panel-title-cell {
+  padding: 0;
+}
+
+.dx-scheduler-date-table {
+  width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+.dx-scheduler-date-table-cell { // stylelint-disable-line no-duplicate-selectors
+  height: $scheduler-workspace-date-table-cell-height;
+}
+
+// stylelint-disable-next-line no-duplicate-selectors
+.dx-scheduler-all-day-table-cell,
+.dx-scheduler-date-table-cell {
+  &.dx-state-active {
+    background-color: $scheduler-workspace-active-cell-color;
+  }
+
+  &.dx-state-hover {
+    background-color: $scheduler-workspace-hovered-cell-color;
+
+    &.dx-state-focused {
+      background-color: $scheduler-workspace-focused-cell-color;
+    }
+  }
+
+  &.dx-state-focused {
+    background-color: $scheduler-workspace-focused-cell-color;
+    opacity: 1;
+  }
+
+  &.dx-scheduler-focused-cell {
+    box-shadow: $scheduler-focused-cell-shadow;
+  }
+
+  > div {
+    pointer-events: none;
+  }
+}
+
+.dx-scheduler-date-table-droppable-cell {
+  background-color: $scheduler-droppable-cell-background-color;
+}
+
+.dx-scheduler-group-header-content div {
+  @include dx-overflow();
+}
+
+.dx-scheduler-work-space-horizontal-grouped {
+  &.dx-scheduler-timeline {
+    .dx-scheduler-sidebar-scrollable {
+      display: none;
+    }
+
+    .dx-scheduler-group-header-content {
+      display: flex;
+      height: 40px;
+
+      > div {
+        margin: auto;
+      }
+    }
+
+    .dx-scheduler-header-panel {
+      @include flex-container(row, nowrap);
+    }
+
+    .dx-scheduler-header-row,
+    .dx-scheduler-group-row {
+      @include flex-container(row, nowrap);
+    }
+
+    &.dx-scheduler-work-space-grouped .dx-scheduler-group-header {
+      flex-grow: 1;
+      flex-basis: 0;
+
+      @include flex-container(row, nowrap);
+    }
+
+    &.dx-scheduler-work-space-group-by-date .dx-scheduler-group-header {
+      flex-basis: auto;
+    }
+
+    &:not(.dx-scheduler-work-space-group-by-date) {
+      .dx-scheduler-header-row .dx-scheduler-header-panel-cell {
+        border-right: none;
+      }
+    }
+  }
+}
+
+.dx-scheduler-work-space-vertical-grouped {
+  .dx-scheduler-work-space-vertical-group-table {
+    height: 100%;
+    min-height: 100px;
+    border-top: $scheduler-base-border;
+    border-top-color: $scheduler-base-border-color;
+    border-spacing: 0;
+
+    @include flex-container(column, nowrap);
+  }
+
+  &.dx-scheduler-work-space-day,
+  &.dx-scheduler-work-space-week,
+  &.dx-scheduler-work-space-work-week {
+    .dx-scheduler-all-day-title {
+      top: 0;
+      height: 50px !important; // stylelint-disable-line declaration-no-important
+      border-bottom: none;
+    }
+  }
+
+  .dx-scheduler-all-day-panel {
+    display: table-cell;
+    position: relative;
+  }
+
+  .dx-scheduler-all-day-table-row {
+    height: 50px;
+  }
+
+  .dx-scheduler-time-panel-cell {
+    &.dx-scheduler-first-group-cell {
+      border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+
+      > div {
+        margin-top: 0;
+      }
+    }
+
+    &.dx-scheduler-last-group-cell {
+      border-bottom: none;
+      box-shadow: inset 0 -1px 0 $scheduler-base-border-color;
+    }
+  }
+
+  .dx-scheduler-date-table-cell {
+    &.dx-scheduler-last-group-cell {
+      border-bottom: 2px solid;
+      border-bottom-color: $scheduler-base-border-color;
+    }
+  }
+
+  &.dx-scheduler-work-space-both-scrollbar {
+    .dx-scheduler-sidebar-scrollable,
+    .dx-scheduler-date-table-scrollable {
+      border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+    }
+  }
+}
+
+.dx-rtl {
+  .dx-scheduler-header-panel-empty-cell {
+    border-left: 1px solid;
+    border-left-color: $scheduler-base-border-color;
+    border-right: none;
+  }
+
+  .dx-scheduler-date-table-scrollable-content,
+  .dx-scheduler-side-bar-scrollable-content {
+    direction: rtl;
+  }
+
+  .dx-scheduler-work-space-vertical-grouped,
+  .dx-scheduler-sidebar-scrollable {
+    .dx-scheduler-group-row:last-child .dx-scheduler-group-header {
+      border-right: none;
+      border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
+    }
+  }
+
+  .dx-scheduler-header-panel {
+    left: 0;
+    right: inherit;
+  }
+
+  .dx-scheduler-work-space-vertical-group-table,
+  .dx-scheduler-time-panel {
+    float: right;
+  }
+
+  .dx-scheduler-time-panel-cell {
+    text-align: left;
+    padding-left: $scheduler-timepanel-cell-offset;
+    padding-right: 0;
+
+    .dx-scheduler-small & {
+      padding-left: $scheduler-timepanel-cell-offset * $scheduler-small-size-factor;
+    }
+
+    &::after {
+      right: auto;
+      left: 0;
+    }
+  }
+
+  .dx-scheduler-work-space-week .dx-scheduler-all-day-table-cell,
+  .dx-scheduler-work-space-work-week .dx-scheduler-all-day-table-cell {
+    border-right: $scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
+    border-left: none;
+  }
+
+  &.dx-scheduler-work-space-both-scrollbar {
+    .dx-scheduler-time-panel {
+      border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
+      border-right: none;
+    }
+
+    .dx-scheduler-date-table-row .dx-scheduler-date-table-cell,
+    .dx-scheduler-header-row .dx-scheduler-header-panel-cell,
+    .dx-scheduler-all-day-table-row .dx-scheduler-all-day-table-cell {
+      &:first-child {
+        border-right: none;
+        border-left: $scheduler-base-border;
+        border-left-color: $scheduler-base-border-color;
+      }
+    }
+  }
+
+  .dx-scheduler-timeline {
+    &.dx-scheduler-work-space-grouped {
+      .dx-scheduler-sidebar-scrollable {
+        float: right;
+      }
+
+      .dx-scheduler-group-header {
+        padding: 0 5px 0 10px;
+      }
+
+      &.dx-scheduler-group-column-count-two,
+      &.dx-scheduler-group-column-count-three {
+        .dx-scheduler-group-header:last-child {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .dx-scheduler-date-table-cell,
+  .dx-scheduler-header-panel-cell,
+  .dx-scheduler-all-day-table-cell {
+    &:first-child {
+      border-right: none;
+      border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
+    }
+  }
+
+  .dx-scheduler-time-panel {
+    border-left: $scheduler-base-border;
+    border-left-color: $scheduler-base-border-color;
+    border-right: none;
+  }
+}
+
+.dx-scheduler-small {
+  .dx-scheduler-work-space-week,
+  .dx-scheduler-work-space-work-week,
+  .dx-scheduler-work-space-day {
+    .dx-scheduler-header-panel-empty-cell {
+      width: $scheduler-small-size-factor * $scheduler-left-column-width;
+    }
+
+    &.dx-scheduler-group-column-count-one .dx-scheduler-header-panel-empty-cell {
+      width: (1 + $scheduler-small-size-factor) * $scheduler-left-column-width;
+    }
+
+    &.dx-scheduler-group-column-count-two .dx-scheduler-header-panel-empty-cell {
+      width: (1.5 + $scheduler-small-size-factor) * $scheduler-left-column-width;
+    }
+
+    &.dx-scheduler-group-column-count-three .dx-scheduler-header-panel-empty-cell {
+      width: (2 + $scheduler-small-size-factor) * $scheduler-left-column-width;
+    }
+  }
+}