devextreme-themebuilder 26.1.2-beta → 26.1.3

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

@@ -1,678 +1,678 @@
-$scheduler-appointment-base-color: null !default;
-$scheduler-appointment-start-color: null !default;
-$scheduler-appointment-active-color: null !default;
-$scheduler-base-border-color: null !default;
-$scheduler-accent-border-color: null !default;
-$scheduler-current-time-cell-color: null !default;
-$scheduler-time-indicator-color: null !default;
-$scheduler-time-indicator-background-color: null !default;
-$scheduler-workspace-background-color: null !default;
-$scheduler-other-month-cell-opacity: null !default;
-$scheduler-workspace-month-text-color: null !default;
-$scheduler-workspace-accent-color: null !default;
-$scheduler-first-month-cell-background-color: null !default;
-$scheduler-panel-text-color: null !default;
-$scheduler-left-column-width: null !default;
-$scheduler-workspace-active-cell-color: null !default;
-$scheduler-workspace-hovered-cell-color: null !default;
-$scheduler-workspace-focused-cell-color: null !default;
-$scheduler-droppable-cell-background-color: null !default;
-$scheduler-appointment-text-color: null !default;
-$scheduler-fill-focused-appointment: null !default;
-$scheduler-is-shadow-color-for-focused-state: null !default;
-$scheduler-dd-appointment-hover-text-color: null !default;
-$scheduler-tooltip-appointment-text-color: null !default;
-$scheduler-tooltip-list-focused-bg: null !default;
-$scheduler-timeline-cell-height: null !default;
-
-$scheduler-appointment-overlay-bg: null !default;
-$agenda-appointment-hover-bg: null !default;
-$agenda-appointment-active-bg: null !default;
-$agenda-appointment-text-color: null !default;
-$agenda-appointment-title-font-size: null !default;
-
-$scheduler-header-panel-table-cell-height: null !default;
-
-$scheduler-appointment-popup-icon-margin-top: null !default;
-$scheduler-appointment-popup-repeat-end-item-height: null !default;
-$scheduler-appointment-popup-repeat-end-item-vertical-margin: null !default;
-
-// Agenda
-$agenda-appointment-recurrence-icon-color: null !default;
-
-@use "./layout/header" as *;
-@use "./mixins" as *;
-@use "../mixins" as *;
-@use "../icon_fonts" as *;
-@use "./common";
-@use "./tooltip" with (
-  $scheduler-appointment-base-color: $scheduler-appointment-base-color,
-  $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
-  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
-  $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg
-);
-
-$scheduler-appointment-min-size: 4px;
-$scheduler-appointment-content-padding: 5px 7px;
-$scheduler-appointment-reduced-content-padding: 40px;
-
-$scheduler-hovered-appointment-top-shadow-size: 5px;
-$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color;
-
-$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color;
-$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color;
-$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color;
-$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow;
-
-$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2);
-
-$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow;
-
-$scheduler-grouped-appointment-month-text-size: 12px;
-
-$scheduler-base-border: 1px solid;
-$scheduler-transparent-top-border: 1px solid transparent;
-$scheduler-accent-border: 1px solid;
-
-$scheduler-reduced-icon-offset: 5px;
-$scheduler-recurrence-icon-offset: 20px;
-
-$scheduler-agenda-appointment-margin: 5px;
-$scheduler-agenda-last-in-date-appointment-margin: 20px;
-
-$scheduler-small-size-factor: 0.5;
-
-$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor;
-
-$scheduler-time-indicator-font-size: 30px;
-$scheduler-time-indicator-size: 1px;
-$scheduler-time-indicator-top: 14px;
-$scheduler-time-indicator-left: 12px;
-
-$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1);
-$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color;
-$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0;
-
-@use "./appointment" with (
-  $scheduler-transparent-top-border: $scheduler-transparent-top-border,
-  $scheduler-appointment-base-color: $scheduler-appointment-base-color,
-  $scheduler-appointment-text-color: $scheduler-appointment-text-color,
-  $scheduler-vertical-appointment-shadow: $scheduler-vertical-appointment-shadow,
-  $scheduler-appointment-min-size: $scheduler-appointment-min-size,
-  $scheduler-vertical-appointment-resizing-shadow: $scheduler-vertical-appointment-resizing-shadow,
-  $scheduler-vertical-appointment-hovering-shadow: $scheduler-vertical-appointment-hovering-shadow,
-  $scheduler-vertical-appointment-resizable-hovering-shadow: $scheduler-vertical-appointment-resizable-hovering-shadow,
-  $scheduler-hovered-appointment-top-shadow-size: $scheduler-hovered-appointment-top-shadow-size,
-  $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment,
-  $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
-  $scheduler-appointment-start-color: $scheduler-appointment-start-color,
-  $scheduler-appointment-active-color: $scheduler-appointment-active-color,
-  $scheduler-appointment-dragging-shadow: $scheduler-appointment-dragging-shadow,
-  $scheduler-reduced-icon-offset: $scheduler-reduced-icon-offset,
-
-  $agenda-appointment-text-color: $agenda-appointment-text-color,
-  $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color,
-  $agenda-appointment-hover-bg: $agenda-appointment-hover-bg,
-  $agenda-appointment-active-bg: $agenda-appointment-active-bg,
-  $agenda-appointment-title-font-size: $agenda-appointment-title-font-size
-);
-@use "./views" with (
-  $scheduler-workspace-background-color: $scheduler-workspace-background-color,
-  $scheduler-workspace-accent-color: $scheduler-workspace-accent-color,
-  $scheduler-small-size-factor: $scheduler-small-size-factor,
-
-  $scheduler-base-border: $scheduler-base-border,
-  $scheduler-base-border-color: $scheduler-base-border-color,
-  $scheduler-accent-border: $scheduler-accent-border,
-  $scheduler-accent-border-color: $scheduler-accent-border-color,
-
-  $scheduler-current-time-cell-color: $scheduler-current-time-cell-color,
-  $scheduler-time-indicator-color: $scheduler-time-indicator-color,
-
-  $scheduler-workspace-active-cell-color: $scheduler-workspace-active-cell-color,
-  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-hovered-cell-color,
-  $scheduler-workspace-focused-cell-color: $scheduler-workspace-focused-cell-color,
-  $scheduler-focused-cell-shadow: $scheduler-focused-cell-shadow,
-  $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color,
-
-  $scheduler-left-column-width: $scheduler-left-column-width,
-  $scheduler-timeline-cell-height: $scheduler-timeline-cell-height,
-
-  $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity,
-  $scheduler-workspace-month-text-color: $scheduler-workspace-month-text-color,
-  $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
-
-  $scheduler-panel-text-color: $scheduler-panel-text-color,
-);
-
-@function calculate-small-left-column-size($size) {
-  @return $size + $scheduler-left-column-width * $scheduler-small-size-factor;
-}
-
-@mixin scheduler-mixin() {
-  .dx-scheduler-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    background-color: $scheduler-workspace-background-color;
-  }
-
-  .dx-scheduler-header {
-    @include header-base($scheduler-base-border, $scheduler-base-border-color);
-  }
-
-  .dx-scheduler-view-switcher-dropdown-button-content {
-    .dx-list-item {
-      display: list-item;
-    }
-  }
-
-  .dx-scheduler-date-time-shader-all-day {
-    width: 100%;
-    background-color: $scheduler-time-indicator-background-color;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  .dx-scheduler-date-time-indicator {
-    background-color: $scheduler-time-indicator-color;
-    position: absolute;
-    pointer-events: none;
-    box-shadow: $scheduler-time-indicator-shadow;
-
-    &::before {
-      font-size: $scheduler-time-indicator-font-size;
-      color: $scheduler-time-indicator-color;
-      position: absolute;
-      z-index: 1000;
-      margin-top: -$scheduler-time-indicator-top;
-      margin-left: -$scheduler-time-indicator-left;
-      text-shadow: $scheduler-time-indicator-text-shadow;
-    }
-  }
-
-  .dx-scheduler-date-time-shader {
-    pointer-events: none;
-  }
-
-  .dx-scheduler-work-space-week,
-  .dx-scheduler-work-space-work-week,
-  .dx-scheduler-work-space-day {
-    .dx-scheduler-all-day-appointment .dx-scheduler-appointment-content {
-      padding: 0 7px;
-    }
-
-    .dx-scheduler-appointment-reduced {
-      .dx-scheduler-appointment-content {
-        padding-right: $scheduler-appointment-reduced-content-padding;
-      }
-    }
-
-    .dx-scheduler-appointment-reduced:not(.dx-scheduler-all-day-appointment) {
-      .dx-scheduler-appointment-reduced-icon,
-      .dx-scheduler-appointment-recurrence-icon {
-        top: 9px;
-      }
-    }
-
-    .dx-scheduler-date-time-indicator {
-      margin-left: $scheduler-left-column-width;
-      height: $scheduler-time-indicator-size;
-
-      @include dx-icon(spinright);
-
-      .dx-scheduler-small & {
-        margin-left: $scheduler-small-size-element-offset;
-      }
-    }
-
-    .dx-scheduler-date-time-shader {
-      margin-left: $scheduler-left-column-width;
-
-      .dx-scheduler-small & {
-        margin-left: $scheduler-small-size-element-offset;
-      }
-    }
-
-    .dx-scheduler-date-time-shader-top,
-    .dx-scheduler-date-time-shader-bottom {
-      &::before {
-        width: inherit;
-        height: inherit;
-        content: "";
-        left: inherit;
-        position: absolute;
-        margin-left: $scheduler-left-column-width;
-        background-color: $scheduler-time-indicator-background-color;
-
-        .dx-scheduler-small & {
-          margin-left: $scheduler-small-size-element-offset;
-        }
-      }
-    }
-
-    &.dx-scheduler-work-space-both-scrollbar {
-      .dx-scheduler-date-time-shader,
-      .dx-scheduler-date-time-indicator,
-      .dx-scheduler-date-time-shader-all-day {
-        margin-left: 0;
-      }
-
-      .dx-scheduler-date-time-shader-top,
-      .dx-scheduler-date-time-shader-bottom {
-        &::before {
-          margin-left: 0;
-        }
-      }
-    }
-
-    &.dx-rtl {
-      .dx-scheduler-date-time-indicator {
-        margin-left: 0;
-
-        @include dx-icon(spinleft);
-
-        &::before {
-          margin-right: -$scheduler-time-indicator-left;
-        }
-      }
-
-      .dx-scheduler-date-time-shader-top,
-      .dx-scheduler-date-time-shader-bottom {
-        &::before {
-          margin-left: 0;
-          margin-right: $scheduler-left-column-width;
-        }
-      }
-    }
-  }
-
-  .dx-scheduler-timeline {
-    .dx-scheduler-date-time-indicator {
-      width: $scheduler-time-indicator-size;
-      top: 0;
-
-      @include dx-icon(spindown);
-
-      &::before {
-        margin-left: -$scheduler-time-indicator-top;
-        margin-top: -$scheduler-time-indicator-left;
-      }
-    }
-
-    .dx-scheduler-date-time-shader {
-      height: 100%;
-      position: absolute;
-
-      &::before {
-        width: inherit;
-        height: 100%;
-        content: "";
-        left: 0;
-        position: absolute;
-        background-color: $scheduler-time-indicator-background-color;
-      }
-    }
-
-    .dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell {
-      box-shadow: none;
-
-      &::after {
-        position: absolute;
-        content: '';
-        left: 0;
-        right: 0;
-        bottom: -1px;
-        height: 2px;
-        background-color: $scheduler-time-indicator-color;
-      }
-    }
-
-    .dx-scheduler-appointment-reduced {
-      .dx-scheduler-appointment-recurrence-icon {
-        top: 0;
-      }
-    }
-  }
-
-  .dx-scheduler-work-space-month {
-    .dx-scheduler-appointment-content {
-      padding: 0 7px;
-    }
-
-    .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
-      padding: 0 25px 0 7px;
-
-      .dx-rtl & {
-        padding: 0 7px 0 25px;
-      }
-    }
-
-    .dx-scheduler-appointment-recurrence-icon,
-    .dx-scheduler-appointment-reduced-icon {
-      top: 0;
-    }
-  }
-
-  .dx-scheduler-scrollable-appointments,
-  .dx-scheduler-all-day-appointments {
-    position: absolute;
-    top: 0;
-
-    &.dx-rtl {
-      left: 0;
-    }
-  }
-
-  .dx-scheduler-timeline .dx-scheduler-appointment,
-  .dx-scheduler-work-space-month .dx-scheduler-appointment,
-  .dx-scheduler-all-day-appointment {
-    box-shadow: $scheduler-horizontal-appointment-shadow;
-
-    .dx-rtl & {
-      box-shadow: $scheduler-horizontal-appointment-shadow-rtl;
-    }
-
-    &.dx-state-active,
-    &.dx-resizable-resizing {
-      box-shadow: $scheduler-horizontal-appointment-resizing-shadow;
-    }
-
-    &.dx-state-hover {
-      box-shadow: $scheduler-horizontal-appointment-hovering-shadow;
-
-      &.dx-resizable {
-        box-shadow: $scheduler-horizontal-appointment-resizable-hovering-shadow;
-      }
-
-      .dx-rtl & {
-        box-shadow: $scheduler-horizontal-appointment-hovering-shadow-rtl;
-
-        &.dx-resizable {
-          box-shadow: $scheduler-horizontal-appointment-resizable-hovering-shadow-rtl;
-        }
-      }
-    }
-  }
-
-  .dx-scheduler-timeline .dx-draggable-dragging .dx-scheduler-appointment,
-  .dx-scheduler-work-space-month .dx-draggable-dragging .dx-scheduler-appointment,
-  .dx-scheduler-fixed-appointments .dx-draggable-dragging .dx-scheduler-all-day-appointment {
-    box-shadow: $scheduler-horizontal-appointment-resizing-shadow, $scheduler-appointment-dragging-shadow;
-  }
-
-  .dx-scheduler-appointment { // stylelint-disable-line no-duplicate-selectors
-    &.dx-scheduler-appointment-body,
-    &.dx-scheduler-appointment-tail {
-      box-shadow: none;
-    }
-  }
-
-  .dx-scheduler-all-day-appointment .dx-scheduler-appointment-reduced-icon {
-    position: absolute;
-    top: 15%;
-  }
-
-  .dx-scheduler-appointment-reduced.dx-scheduler-appointment-head {
-    .dx-scheduler-appointment-recurrence-icon {
-      right: $scheduler-recurrence-icon-offset;
-    }
-  }
-
-  .dx-scheduler-appointment-content {
-    padding: $scheduler-appointment-content-padding;
-    cursor: pointer;
-    height: 100%;
-
-    @include dx-overflow();
-
-    opacity: 0.99;
-
-    .dx-scheduler-work-space-grouped.dx-scheduler-work-space-month & {
-      font-size: $scheduler-grouped-appointment-month-text-size;
-    }
-
-    > * {
-      @include dx-overflow();
-    }
-  }
-
-  .dx-scheduler-appointment-empty {
-    .dx-scheduler-appointment-content-details,
-    .dx-scheduler-appointment-title,
-    .dx-scheduler-appointment-recurrence-icon {
-      display: none;
-    }
-  }
-
-  .dx-scheduler-appointment-content-details {
-    font-size: 11px;
-    white-space: pre;
-    overflow: hidden;
-
-    .dx-scheduler-all-day-appointment &,
-    .dx-scheduler-work-space-month & {
-      display: none;
-    }
-  }
-
-  .dx-scheduler-appointment-popup {
-    .dx-popup-content {
-      overflow-x: hidden;
-    }
-
-    .dx-form {
-      min-height: 100%;
-      position: relative;
-      overflow: hidden;
-
-      .dx-scheduler-form-main-group {
-        width: 100%;
-        transition: transform 0.3s ease-in-out;
-        transform: translateX(0);
-        position: relative;
-
-        &.dx-scheduler-form-main-group-hidden {
-          transform: translateX(-110%);
-          position: absolute;
-          top: var(--dx-scheduler-animation-top, 0);
-        }
-      }
-
-      .dx-scheduler-form-recurrence-group {
-        width: 100%;
-        transition: transform 0.3s ease-in-out;
-        transform: translateX(0);
-        position: relative;
-
-        &.dx-scheduler-form-recurrence-group-hidden {
-          transform: translateX(110%);
-          position: absolute;
-          top: var(--dx-scheduler-animation-top, 0);
-        }
-      }
-
-      .dx-scheduler-form-recurrence-group.dx-field-item {
-        padding: 0;
-      }
-      .dx-scheduler-form-group-with-icon .dx-item-content > .dx-box-item:has(.dx-scheduler-form-icon) {
-        flex: 0 1 auto !important; // stylelint-disable-line declaration-no-important
-        align-items: start;
-      }
-
-      .dx-scheduler-form-top-label-offset {
-        margin-top: $scheduler-appointment-popup-icon-margin-top;
-      }
-
-      .dx-scheduler-form-icon {
-        display: flex;
-        align-items: center;
-
-        > .dx-field-item-content {
-          line-height: 1;
-        }
-      }
-      .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
-        align-items: center;
-
-        .dx-field-item-content {
-          text-align: end;
-
-          .dx-switch.dx-widget {
-            margin: 0;
-          }
-        }
-      }
-
-      .dx-scheduler-form-start-date-group .dx-item,
-      .dx-scheduler-form-end-date-group .dx-item,
-      .dx-scheduler-form-recurrence-settings-group .dx-item,
-      .dx-scheduler-form-day-of-month-group .dx-item,
-      .dx-scheduler-form-day-of-year-group .dx-item {
-        align-items: end;
-
-        .dx-datebox input.dx-texteditor-input {
-          padding-inline-end: 0;
-        }
-      }
-      .dx-scheduler-form-recurrence-end-group {
-        .dx-field-item-label {
-          height: $scheduler-appointment-popup-repeat-end-item-height;
-          line-height: $scheduler-appointment-popup-repeat-end-item-height;
-        }
-
-        .dx-radiobutton {
-          height: $scheduler-appointment-popup-repeat-end-item-height !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .dx-scheduler-form-recurrence-end-editors {
-          .dx-texteditor-input-container input.dx-texteditor-input {
-            padding-inline-end: 0;
-          }
-
-          margin: calc($scheduler-appointment-popup-repeat-end-item-vertical-margin / 2) 0;
-
-          .dx-item {
-            .dx-field-item, .dx-field-empty-item {
-              padding: 0;
-              margin: calc($scheduler-appointment-popup-repeat-end-item-vertical-margin / 2) 0;
-              height: $scheduler-appointment-popup-repeat-end-item-height;
-            }
-          }
-        }
-      }
-      .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
-        position: relative;
-
-        .dx-icon {
-          color: $scheduler-workspace-accent-color;
-        }
-      }
-
-      .dx-scheduler-form-repeat-editor .dx-selectbox.dx-state-readonly .dx-scheduler-form-recurrence-settings-button {
-        margin-right: 0;
-      }
-      .dx-scheduler-days-of-week-buttons {
-        display: flex;
-        align-items: center;
-
-        .dx-button {
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-
-  .dx-scheduler-appointment-collector {
-    &.dx-button.dx-state-hover {
-      &::before {
-        pointer-events: none;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-    }
-  }
-
-  .dx-scheduler-appointment-collector-compact {
-    &.dx-scheduler-appointment-collector {
-      width: 24px;
-    }
-
-    .dx-scheduler-appointment-collector-content,
-    .dx-button-content {
-      span:last-child {
-        padding-left: 0;
-      }
-    }
-  }
-
-  .dx-scheduler-agenda {
-    .dx-scheduler-scrollable-appointments {
-      width: 100%;
-      height: 0;
-    }
-
-    .dx-scheduler-appointment {
-      position: relative;
-      box-shadow: none;
-      margin-top: $scheduler-agenda-appointment-margin;
-      margin-bottom: $scheduler-agenda-appointment-margin;
-
-      &.dx-scheduler-last-in-date-agenda-appointment {
-        margin-bottom: $scheduler-agenda-last-in-date-appointment-margin;
-      }
-    }
-  }
-
-  .dx-rtl {
-    .dx-scheduler-appointment-recurrence-icon {
-      left: $scheduler-reduced-icon-offset;
-      right: auto;
-    }
-
-    .dx-scheduler-appointment-reduced.dx-scheduler-appointment-head {
-      .dx-scheduler-appointment-recurrence-icon {
-        left: $scheduler-recurrence-icon-offset;
-        right: auto;
-      }
-    }
-
-    .dx-scheduler-work-space-week,
-    .dx-scheduler-work-space-work-week,
-    .dx-scheduler-work-space-day {
-      .dx-scheduler-appointment-reduced {
-        .dx-scheduler-appointment-content {
-          padding-right: 5px;
-          padding-left: $scheduler-appointment-reduced-content-padding;
-        }
-      }
-    }
-
-    .dx-scheduler-scrollable-appointments,
-    .dx-scheduler-all-day-appointments {
-      left: 0;
-    }
-  }
-
-  .dx-scheduler-small {
-    &.dx-rtl {
-      .dx-scheduler-date-time-shader-top,
-      .dx-scheduler-date-time-shader-bottom {
-        &::before {
-          margin-right: $scheduler-left-column-width * $scheduler-small-size-factor;
-        }
-      }
-    }
-  }
-}
+$scheduler-appointment-base-color: null !default;
+$scheduler-appointment-start-color: null !default;
+$scheduler-appointment-active-color: null !default;
+$scheduler-base-border-color: null !default;
+$scheduler-accent-border-color: null !default;
+$scheduler-current-time-cell-color: null !default;
+$scheduler-time-indicator-color: null !default;
+$scheduler-time-indicator-background-color: null !default;
+$scheduler-workspace-background-color: null !default;
+$scheduler-other-month-cell-opacity: null !default;
+$scheduler-workspace-month-text-color: null !default;
+$scheduler-workspace-accent-color: null !default;
+$scheduler-first-month-cell-background-color: null !default;
+$scheduler-panel-text-color: null !default;
+$scheduler-left-column-width: null !default;
+$scheduler-workspace-active-cell-color: null !default;
+$scheduler-workspace-hovered-cell-color: null !default;
+$scheduler-workspace-focused-cell-color: null !default;
+$scheduler-droppable-cell-background-color: null !default;
+$scheduler-appointment-text-color: null !default;
+$scheduler-fill-focused-appointment: null !default;
+$scheduler-is-shadow-color-for-focused-state: null !default;
+$scheduler-dd-appointment-hover-text-color: null !default;
+$scheduler-tooltip-appointment-text-color: null !default;
+$scheduler-tooltip-list-focused-bg: null !default;
+$scheduler-timeline-cell-height: null !default;
+
+$scheduler-appointment-overlay-bg: null !default;
+$agenda-appointment-hover-bg: null !default;
+$agenda-appointment-active-bg: null !default;
+$agenda-appointment-text-color: null !default;
+$agenda-appointment-title-font-size: null !default;
+
+$scheduler-header-panel-table-cell-height: null !default;
+
+$scheduler-appointment-popup-icon-margin-top: null !default;
+$scheduler-appointment-popup-repeat-end-item-height: null !default;
+$scheduler-appointment-popup-repeat-end-item-vertical-margin: null !default;
+
+// Agenda
+$agenda-appointment-recurrence-icon-color: null !default;
+
+@use "./layout/header" as *;
+@use "./mixins" as *;
+@use "../mixins" as *;
+@use "../icon_fonts" as *;
+@use "./common";
+@use "./tooltip" with (
+  $scheduler-appointment-base-color: $scheduler-appointment-base-color,
+  $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
+  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg
+);
+
+$scheduler-appointment-min-size: 4px;
+$scheduler-appointment-content-padding: 5px 7px;
+$scheduler-appointment-reduced-content-padding: 40px;
+
+$scheduler-hovered-appointment-top-shadow-size: 5px;
+$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color;
+
+$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color;
+$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color;
+$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color;
+$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow;
+
+$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2);
+
+$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color;
+$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color;
+$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color;
+$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color;
+$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color;
+$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color;
+$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow;
+
+$scheduler-grouped-appointment-month-text-size: 12px;
+
+$scheduler-base-border: 1px solid;
+$scheduler-transparent-top-border: 1px solid transparent;
+$scheduler-accent-border: 1px solid;
+
+$scheduler-reduced-icon-offset: 5px;
+$scheduler-recurrence-icon-offset: 20px;
+
+$scheduler-agenda-appointment-margin: 5px;
+$scheduler-agenda-last-in-date-appointment-margin: 20px;
+
+$scheduler-small-size-factor: 0.5;
+
+$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor;
+
+$scheduler-time-indicator-font-size: 30px;
+$scheduler-time-indicator-size: 1px;
+$scheduler-time-indicator-top: 14px;
+$scheduler-time-indicator-left: 12px;
+
+$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1);
+$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color;
+$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0;
+
+@use "./appointment" with (
+  $scheduler-transparent-top-border: $scheduler-transparent-top-border,
+  $scheduler-appointment-base-color: $scheduler-appointment-base-color,
+  $scheduler-appointment-text-color: $scheduler-appointment-text-color,
+  $scheduler-vertical-appointment-shadow: $scheduler-vertical-appointment-shadow,
+  $scheduler-appointment-min-size: $scheduler-appointment-min-size,
+  $scheduler-vertical-appointment-resizing-shadow: $scheduler-vertical-appointment-resizing-shadow,
+  $scheduler-vertical-appointment-hovering-shadow: $scheduler-vertical-appointment-hovering-shadow,
+  $scheduler-vertical-appointment-resizable-hovering-shadow: $scheduler-vertical-appointment-resizable-hovering-shadow,
+  $scheduler-hovered-appointment-top-shadow-size: $scheduler-hovered-appointment-top-shadow-size,
+  $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
+  $scheduler-appointment-start-color: $scheduler-appointment-start-color,
+  $scheduler-appointment-active-color: $scheduler-appointment-active-color,
+  $scheduler-appointment-dragging-shadow: $scheduler-appointment-dragging-shadow,
+  $scheduler-reduced-icon-offset: $scheduler-reduced-icon-offset,
+
+  $agenda-appointment-text-color: $agenda-appointment-text-color,
+  $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color,
+  $agenda-appointment-hover-bg: $agenda-appointment-hover-bg,
+  $agenda-appointment-active-bg: $agenda-appointment-active-bg,
+  $agenda-appointment-title-font-size: $agenda-appointment-title-font-size
+);
+@use "./views" with (
+  $scheduler-workspace-background-color: $scheduler-workspace-background-color,
+  $scheduler-workspace-accent-color: $scheduler-workspace-accent-color,
+  $scheduler-small-size-factor: $scheduler-small-size-factor,
+
+  $scheduler-base-border: $scheduler-base-border,
+  $scheduler-base-border-color: $scheduler-base-border-color,
+  $scheduler-accent-border: $scheduler-accent-border,
+  $scheduler-accent-border-color: $scheduler-accent-border-color,
+
+  $scheduler-current-time-cell-color: $scheduler-current-time-cell-color,
+  $scheduler-time-indicator-color: $scheduler-time-indicator-color,
+
+  $scheduler-workspace-active-cell-color: $scheduler-workspace-active-cell-color,
+  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-hovered-cell-color,
+  $scheduler-workspace-focused-cell-color: $scheduler-workspace-focused-cell-color,
+  $scheduler-focused-cell-shadow: $scheduler-focused-cell-shadow,
+  $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color,
+
+  $scheduler-left-column-width: $scheduler-left-column-width,
+  $scheduler-timeline-cell-height: $scheduler-timeline-cell-height,
+
+  $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity,
+  $scheduler-workspace-month-text-color: $scheduler-workspace-month-text-color,
+  $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
+
+  $scheduler-panel-text-color: $scheduler-panel-text-color,
+);
+
+@function calculate-small-left-column-size($size) {
+  @return $size + $scheduler-left-column-width * $scheduler-small-size-factor;
+}
+
+@mixin scheduler-mixin() {
+  .dx-scheduler-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: $scheduler-workspace-background-color;
+  }
+
+  .dx-scheduler-header {
+    @include header-base($scheduler-base-border, $scheduler-base-border-color);
+  }
+
+  .dx-scheduler-view-switcher-dropdown-button-content {
+    .dx-list-item {
+      display: list-item;
+    }
+  }
+
+  .dx-scheduler-date-time-shader-all-day {
+    width: 100%;
+    background-color: $scheduler-time-indicator-background-color;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .dx-scheduler-date-time-indicator {
+    background-color: $scheduler-time-indicator-color;
+    position: absolute;
+    pointer-events: none;
+    box-shadow: $scheduler-time-indicator-shadow;
+
+    &::before {
+      font-size: $scheduler-time-indicator-font-size;
+      color: $scheduler-time-indicator-color;
+      position: absolute;
+      z-index: 1000;
+      margin-top: -$scheduler-time-indicator-top;
+      margin-left: -$scheduler-time-indicator-left;
+      text-shadow: $scheduler-time-indicator-text-shadow;
+    }
+  }
+
+  .dx-scheduler-date-time-shader {
+    pointer-events: none;
+  }
+
+  .dx-scheduler-work-space-week,
+  .dx-scheduler-work-space-work-week,
+  .dx-scheduler-work-space-day {
+    .dx-scheduler-all-day-appointment .dx-scheduler-appointment-content {
+      padding: 0 7px;
+    }
+
+    .dx-scheduler-appointment-reduced {
+      .dx-scheduler-appointment-content {
+        padding-right: $scheduler-appointment-reduced-content-padding;
+      }
+    }
+
+    .dx-scheduler-appointment-reduced:not(.dx-scheduler-all-day-appointment) {
+      .dx-scheduler-appointment-reduced-icon,
+      .dx-scheduler-appointment-recurrence-icon {
+        top: 9px;
+      }
+    }
+
+    .dx-scheduler-date-time-indicator {
+      margin-left: $scheduler-left-column-width;
+      height: $scheduler-time-indicator-size;
+
+      @include dx-icon(spinright);
+
+      .dx-scheduler-small & {
+        margin-left: $scheduler-small-size-element-offset;
+      }
+    }
+
+    .dx-scheduler-date-time-shader {
+      margin-left: $scheduler-left-column-width;
+
+      .dx-scheduler-small & {
+        margin-left: $scheduler-small-size-element-offset;
+      }
+    }
+
+    .dx-scheduler-date-time-shader-top,
+    .dx-scheduler-date-time-shader-bottom {
+      &::before {
+        width: inherit;
+        height: inherit;
+        content: "";
+        left: inherit;
+        position: absolute;
+        margin-left: $scheduler-left-column-width;
+        background-color: $scheduler-time-indicator-background-color;
+
+        .dx-scheduler-small & {
+          margin-left: $scheduler-small-size-element-offset;
+        }
+      }
+    }
+
+    &.dx-scheduler-work-space-both-scrollbar {
+      .dx-scheduler-date-time-shader,
+      .dx-scheduler-date-time-indicator,
+      .dx-scheduler-date-time-shader-all-day {
+        margin-left: 0;
+      }
+
+      .dx-scheduler-date-time-shader-top,
+      .dx-scheduler-date-time-shader-bottom {
+        &::before {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &.dx-rtl {
+      .dx-scheduler-date-time-indicator {
+        margin-left: 0;
+
+        @include dx-icon(spinleft);
+
+        &::before {
+          margin-right: -$scheduler-time-indicator-left;
+        }
+      }
+
+      .dx-scheduler-date-time-shader-top,
+      .dx-scheduler-date-time-shader-bottom {
+        &::before {
+          margin-left: 0;
+          margin-right: $scheduler-left-column-width;
+        }
+      }
+    }
+  }
+
+  .dx-scheduler-timeline {
+    .dx-scheduler-date-time-indicator {
+      width: $scheduler-time-indicator-size;
+      top: 0;
+
+      @include dx-icon(spindown);
+
+      &::before {
+        margin-left: -$scheduler-time-indicator-top;
+        margin-top: -$scheduler-time-indicator-left;
+      }
+    }
+
+    .dx-scheduler-date-time-shader {
+      height: 100%;
+      position: absolute;
+
+      &::before {
+        width: inherit;
+        height: 100%;
+        content: "";
+        left: 0;
+        position: absolute;
+        background-color: $scheduler-time-indicator-background-color;
+      }
+    }
+
+    .dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell {
+      box-shadow: none;
+
+      &::after {
+        position: absolute;
+        content: '';
+        left: 0;
+        right: 0;
+        bottom: -1px;
+        height: 2px;
+        background-color: $scheduler-time-indicator-color;
+      }
+    }
+
+    .dx-scheduler-appointment-reduced {
+      .dx-scheduler-appointment-recurrence-icon {
+        top: 0;
+      }
+    }
+  }
+
+  .dx-scheduler-work-space-month {
+    .dx-scheduler-appointment-content {
+      padding: 0 7px;
+    }
+
+    .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+      padding: 0 25px 0 7px;
+
+      .dx-rtl & {
+        padding: 0 7px 0 25px;
+      }
+    }
+
+    .dx-scheduler-appointment-recurrence-icon,
+    .dx-scheduler-appointment-reduced-icon {
+      top: 0;
+    }
+  }
+
+  .dx-scheduler-scrollable-appointments,
+  .dx-scheduler-all-day-appointments {
+    position: absolute;
+    top: 0;
+
+    &.dx-rtl {
+      left: 0;
+    }
+  }
+
+  .dx-scheduler-timeline .dx-scheduler-appointment,
+  .dx-scheduler-work-space-month .dx-scheduler-appointment,
+  .dx-scheduler-all-day-appointment {
+    box-shadow: $scheduler-horizontal-appointment-shadow;
+
+    .dx-rtl & {
+      box-shadow: $scheduler-horizontal-appointment-shadow-rtl;
+    }
+
+    &.dx-state-active,
+    &.dx-resizable-resizing {
+      box-shadow: $scheduler-horizontal-appointment-resizing-shadow;
+    }
+
+    &.dx-state-hover {
+      box-shadow: $scheduler-horizontal-appointment-hovering-shadow;
+
+      &.dx-resizable {
+        box-shadow: $scheduler-horizontal-appointment-resizable-hovering-shadow;
+      }
+
+      .dx-rtl & {
+        box-shadow: $scheduler-horizontal-appointment-hovering-shadow-rtl;
+
+        &.dx-resizable {
+          box-shadow: $scheduler-horizontal-appointment-resizable-hovering-shadow-rtl;
+        }
+      }
+    }
+  }
+
+  .dx-scheduler-timeline .dx-draggable-dragging .dx-scheduler-appointment,
+  .dx-scheduler-work-space-month .dx-draggable-dragging .dx-scheduler-appointment,
+  .dx-scheduler-fixed-appointments .dx-draggable-dragging .dx-scheduler-all-day-appointment {
+    box-shadow: $scheduler-horizontal-appointment-resizing-shadow, $scheduler-appointment-dragging-shadow;
+  }
+
+  .dx-scheduler-appointment { // stylelint-disable-line no-duplicate-selectors
+    &.dx-scheduler-appointment-body,
+    &.dx-scheduler-appointment-tail {
+      box-shadow: none;
+    }
+  }
+
+  .dx-scheduler-all-day-appointment .dx-scheduler-appointment-reduced-icon {
+    position: absolute;
+    top: 15%;
+  }
+
+  .dx-scheduler-appointment-reduced.dx-scheduler-appointment-head {
+    .dx-scheduler-appointment-recurrence-icon {
+      right: $scheduler-recurrence-icon-offset;
+    }
+  }
+
+  .dx-scheduler-appointment-content {
+    padding: $scheduler-appointment-content-padding;
+    cursor: pointer;
+    height: 100%;
+
+    @include dx-overflow();
+
+    opacity: 0.99;
+
+    .dx-scheduler-work-space-grouped.dx-scheduler-work-space-month & {
+      font-size: $scheduler-grouped-appointment-month-text-size;
+    }
+
+    > * {
+      @include dx-overflow();
+    }
+  }
+
+  .dx-scheduler-appointment-empty {
+    .dx-scheduler-appointment-content-details,
+    .dx-scheduler-appointment-title,
+    .dx-scheduler-appointment-recurrence-icon {
+      display: none;
+    }
+  }
+
+  .dx-scheduler-appointment-content-details {
+    font-size: 11px;
+    white-space: pre;
+    overflow: hidden;
+
+    .dx-scheduler-all-day-appointment &,
+    .dx-scheduler-work-space-month & {
+      display: none;
+    }
+  }
+
+  .dx-scheduler-appointment-popup {
+    .dx-popup-content {
+      overflow-x: hidden;
+    }
+
+    .dx-form {
+      min-height: 100%;
+      position: relative;
+      overflow: hidden;
+
+      .dx-scheduler-form-main-group {
+        width: 100%;
+        transition: transform 0.3s ease-in-out;
+        transform: translateX(0);
+        position: relative;
+
+        &.dx-scheduler-form-main-group-hidden {
+          transform: translateX(-110%);
+          position: absolute;
+          top: var(--dx-scheduler-animation-top, 0);
+        }
+      }
+
+      .dx-scheduler-form-recurrence-group {
+        width: 100%;
+        transition: transform 0.3s ease-in-out;
+        transform: translateX(0);
+        position: relative;
+
+        &.dx-scheduler-form-recurrence-group-hidden {
+          transform: translateX(110%);
+          position: absolute;
+          top: var(--dx-scheduler-animation-top, 0);
+        }
+      }
+
+      .dx-scheduler-form-recurrence-group.dx-field-item {
+        padding: 0;
+      }
+      .dx-scheduler-form-group-with-icon .dx-item-content > .dx-box-item:has(.dx-scheduler-form-icon) {
+        flex: 0 1 auto !important; // stylelint-disable-line declaration-no-important
+        align-items: start;
+      }
+
+      .dx-scheduler-form-top-label-offset {
+        margin-top: $scheduler-appointment-popup-icon-margin-top;
+      }
+
+      .dx-scheduler-form-icon {
+        display: flex;
+        align-items: center;
+
+        > .dx-field-item-content {
+          line-height: 1;
+        }
+      }
+      .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
+        align-items: center;
+
+        .dx-field-item-content {
+          text-align: end;
+
+          .dx-switch.dx-widget {
+            margin: 0;
+          }
+        }
+      }
+
+      .dx-scheduler-form-start-date-group .dx-item,
+      .dx-scheduler-form-end-date-group .dx-item,
+      .dx-scheduler-form-recurrence-settings-group .dx-item,
+      .dx-scheduler-form-day-of-month-group .dx-item,
+      .dx-scheduler-form-day-of-year-group .dx-item {
+        align-items: end;
+
+        .dx-datebox input.dx-texteditor-input {
+          padding-inline-end: 0;
+        }
+      }
+      .dx-scheduler-form-recurrence-end-group {
+        .dx-field-item-label {
+          height: $scheduler-appointment-popup-repeat-end-item-height;
+          line-height: $scheduler-appointment-popup-repeat-end-item-height;
+        }
+
+        .dx-radiobutton {
+          height: $scheduler-appointment-popup-repeat-end-item-height !important; // stylelint-disable-line declaration-no-important
+        }
+
+        .dx-scheduler-form-recurrence-end-editors {
+          .dx-texteditor-input-container input.dx-texteditor-input {
+            padding-inline-end: 0;
+          }
+
+          margin: calc($scheduler-appointment-popup-repeat-end-item-vertical-margin / 2) 0;
+
+          .dx-item {
+            .dx-field-item, .dx-field-empty-item {
+              padding: 0;
+              margin: calc($scheduler-appointment-popup-repeat-end-item-vertical-margin / 2) 0;
+              height: $scheduler-appointment-popup-repeat-end-item-height;
+            }
+          }
+        }
+      }
+      .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
+        position: relative;
+
+        .dx-icon {
+          color: $scheduler-workspace-accent-color;
+        }
+      }
+
+      .dx-scheduler-form-repeat-editor .dx-selectbox.dx-state-readonly .dx-scheduler-form-recurrence-settings-button {
+        margin-right: 0;
+      }
+      .dx-scheduler-days-of-week-buttons {
+        display: flex;
+        align-items: center;
+
+        .dx-button {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .dx-scheduler-appointment-collector {
+    &.dx-button.dx-state-hover {
+      &::before {
+        pointer-events: none;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+  }
+
+  .dx-scheduler-appointment-collector-compact {
+    &.dx-scheduler-appointment-collector {
+      width: 24px;
+    }
+
+    .dx-scheduler-appointment-collector-content,
+    .dx-button-content {
+      span:last-child {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .dx-scheduler-agenda {
+    .dx-scheduler-scrollable-appointments {
+      width: 100%;
+      height: 0;
+    }
+
+    .dx-scheduler-appointment {
+      position: relative;
+      box-shadow: none;
+      margin-top: $scheduler-agenda-appointment-margin;
+      margin-bottom: $scheduler-agenda-appointment-margin;
+
+      &.dx-scheduler-last-in-date-agenda-appointment {
+        margin-bottom: $scheduler-agenda-last-in-date-appointment-margin;
+      }
+    }
+  }
+
+  .dx-rtl {
+    .dx-scheduler-appointment-recurrence-icon {
+      left: $scheduler-reduced-icon-offset;
+      right: auto;
+    }
+
+    .dx-scheduler-appointment-reduced.dx-scheduler-appointment-head {
+      .dx-scheduler-appointment-recurrence-icon {
+        left: $scheduler-recurrence-icon-offset;
+        right: auto;
+      }
+    }
+
+    .dx-scheduler-work-space-week,
+    .dx-scheduler-work-space-work-week,
+    .dx-scheduler-work-space-day {
+      .dx-scheduler-appointment-reduced {
+        .dx-scheduler-appointment-content {
+          padding-right: 5px;
+          padding-left: $scheduler-appointment-reduced-content-padding;
+        }
+      }
+    }
+
+    .dx-scheduler-scrollable-appointments,
+    .dx-scheduler-all-day-appointments {
+      left: 0;
+    }
+  }
+
+  .dx-scheduler-small {
+    &.dx-rtl {
+      .dx-scheduler-date-time-shader-top,
+      .dx-scheduler-date-time-shader-bottom {
+        &::before {
+          margin-right: $scheduler-left-column-width * $scheduler-small-size-factor;
+        }
+      }
+    }
+  }
+}