$scheduler-appointment-base-color: null !default;
$scheduler-appointment-start-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-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;

// Agenda
$agenda-appointment-recurrence-icon-color: null !default;

@use "./layout/header" as *;
@use "./mixins" as *;
@use "../mixins" as *;
@use "../icons" 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-default-header-height: 56px;

$scheduler-appointment-min-size: 4px;
$scheduler-appointment-content-padding: 5px 7px;
$scheduler-appointment-reduced-content-padding: 40px;
$scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px;
$scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px;

$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-appointment-start-color: $scheduler-appointment-start-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 {
      border-bottom: 2px solid $scheduler-time-indicator-color;
      box-shadow: none;

      &::before {
        content: none;
      }
    }

    .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 {
      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-appointment-recurrence-icon {
    position: absolute;
    background-repeat: no-repeat;
    top: 3px;
    right: $scheduler-reduced-icon-offset;
    display: block;

    &.dx-icon-repeat {
      font-size: 18px;
    }
  }

  .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-recurrence {
    .dx-scheduler-appointment-content {
      padding: $scheduler-appointment-recurrence-content-padding;

      .dx-rtl & {
        padding: $scheduler-appointment-recurrence-content-padding-rtl;
      }
    }
  }

  .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-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 {
    background-color: $scheduler-appointment-base-color;
    color: $scheduler-appointment-text-color;

    &.dx-button,
    &.dx-button.dx-state-hover,
    &.dx-button.dx-state-active,
    &.dx-button.dx-state-focused {
      background-color: $scheduler-appointment-base-color;
      color: $scheduler-appointment-text-color;
      border: none;
      box-shadow: none;

      .dx-button-content {
        line-height: inherit;
      }
    }

    &.dx-button.dx-state-hover {
      &::before {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: $scheduler-appointment-start-color;
        opacity: 0.98;
      }

      .dx-scheduler-appointment-collector-content,
      .dx-button-content {
        color: $scheduler-dd-appointment-hover-text-color;
        opacity: 0.99;
      }
    }
  }

  .dx-scheduler-appointment-collector-compact {
    .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;
        }
      }
    }
  }
}