$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-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-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-base-border-color;
$scheduler-transparent-top-border: 1px solid transparent;
$scheduler-accent-border: 1px solid $scheduler-accent-border-color;

$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;

$scheduler-appointment-form-label-padding: 20px;

@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);
  }

  .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-legacy-appointment-popup {
    .dx-form .dx-field-item.dx-appointment-form-switch > div {
      flex-grow: 0;
      width: auto;
    }

    .dx-layout-manager .dx-label-h-align .dx-field-item-content {
      .dx-switch,
      .dx-checkbox {
        margin: 0;
      }
    }

    .dx-field-item-label-location-left {
      padding-right: $scheduler-appointment-form-label-padding;
    }

    .dx-field {
      min-height: 0;
    }

    .dx-field-label {
      width: auto;
    }

    .dx-field-value {
      padding-left: 0;
      padding-right: 0;

      &:not(.dx-widget) > .dx-checkbox {
        float: left;

        &.dx-rtl {
          float: right;
        }
      }
    }
  }

  .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;
        }
      }
    }
  }
}