@use 'theme-variables' as *;

@mixin flex-row {
  display: flex;
  flex-direction: row;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin center-align {
  display: flex;
  align-items: center;
  justify-content: center;  
}

@mixin appointment-style {
  position: absolute;
  cursor: pointer;
  height: $scheduler-day-event-height;
  width: $scheduler-day-event-width;
  inset: $scheduler-day-event-position;
}

@mixin location-details {
  font-size: $scheduler-event-time-font-size;
  padding-inline: $scheduler-time-slot-event-padding-inline;
  padding-block-end: $scheduler-time-slot-event-padding-block;
  line-height: $scheduler-event-sub-content-line-height;
}

@mixin time-details {
  font-size: $scheduler-event-time-font-size;
  line-height: $scheduler-event-sub-content-line-height;
  white-space: nowrap;
}

@mixin appointment-details {
  display: block;
  align-items: center;
  height: 100%;
  padding-inline: $scheduler-appointment-padding;
  gap: $scheduler-appointment-padding;
}

@mixin subject-details {
  line-height: $scheduler-time-slots-line-height;
  padding-inline: $scheduler-time-slot-event-padding-inline;
  padding-block-start: $scheduler-time-slot-event-padding-block;
  word-wrap: break-word;
}

@mixin ellipsis-style {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@include export-module('scheduler-layout') {

  .sf-scheduler {
    @include flex-column;
    position: relative;
    overflow: hidden;
    user-select: none;

    .sf-appointment {
      &.sf-drag-clone {
        visibility: hidden;
      }
      .sf-resize-container {
        width: 100%;
        height: 100%;
      }
    }

    .sf-table-container,
    .sf-table-wrap {
      @include flex-column;
      flex: 1;
      overflow: hidden;
      height: 100%;
    }

    .sf-scheduler-toolbar-container {
      border-bottom: 1px solid $scheduler-border-color;
    }

    .sf-toolbar-item button {
      border-radius: $scheduler-btn-radius;
      font-size: $scheduler-font-size-sm;
    }

    .sf-previous-icon,
    .sf-next-icon {
      border: none;
      padding-inline: $scheduler-toolbar-icon-padding-inline;
      padding-block: $scheduler-toolbar-icon-padding-block;

      svg {
        height: $scheduler-toolbar-icon-height;
        width: $scheduler-toolbar-icon-width;
      }
    }

    .sf-main-scroll-container {
      @include flex-column;
      height: 100%;
      overflow-y: auto;
      overflow-x: auto;
    }

    .sf-sticky-header {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .sf-header-section {
      @include flex-row;
      border-bottom: 1px solid $scheduler-border-color;
      min-width: max-content;

      .sf-date-header {
        @include flex-column;
        width: 100%;
      }
    }

    .sf-vertical-view,
    .sf-agenda-view {
      @include flex-column;
      height: 100%;
      overflow: hidden;
    }

    .sf-all-day-appointment-section {
      @include center-align;
      cursor: pointer;
      margin: 0 auto;
      position: absolute;
      inset: auto 0 8px 0;
      height: $scheduler-all-day-expand-btn-size;
      width: $scheduler-all-day-expand-btn-size;
    }

    .sf-appointment-collapse {
      transform: rotate(180deg);
    }

    .sf-event-resize {
      &.sf-top-handler,
      &.sf-bottom-handler {
        position: absolute;
        inset-inline-start: 0;
        inline-size: 100%;
        block-size: 20%;
        min-block-size: 1px;
        max-block-size: 14px;
        cursor: ns-resize;
      }

      &.sf-left-handler,
      &.sf-right-handler {
        position: absolute;
        inset-block: 0;
        block-size: 100%;
        inline-size: 20%;
        min-inline-size: 1px;
        max-inline-size: 14px;
        cursor: ew-resize;
      }

      &.sf-top-handler    { inset-block-start: 0; }
      &.sf-bottom-handler { inset-block-end: 0; }
      &.sf-left-handler   { inset-inline-start: 0; }
      &.sf-right-handler  { inset-inline-end: 0; }

    }

    .sf-mob-resize-dot {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: $scheduler-resize-mob-border-radius;
        border: 1px solid $scheduler-appointment-bg-color;
        background: currentColor;
        opacity: 0.9;
        pointer-events: auto;
        top: 54%;
        left: 50%;

        &.sf-mob-left-resize-handler {
          inset-block-start: 50%;
          inset-inline-start: 4%;
          transform: translate(-50%, -50%);
        }
        &.sf-mob-right-resize-handler {
          inset-block-start: 50%;
          inset-inline-end: 4%;
          transform: translate(50%, -50%);
        }
        &.sf-mob-top-resize-handler {
          inset-inline-start: 50%;
          inset-block-start: 6%;
          transform: translate(-50%, -50%);
        }
        &.sf-mob-bottom-resize-handler {
          inset-block-start: 50%;
          inset-inline-end: 6%;
          transform: translate(-50%, 50%);
        }
    }

    .sf-header-row {
      @include flex-row;
      width: 100%;
      height: $scheduler-header-height;
      min-height: $scheduler-header-height;
    }

    .sf-header-cells {
      flex: 1;
      @include flex-column;
      align-items: center;
      width: $scheduler-header-cells-width;
      border-inline-end: 1px solid $scheduler-border-color;
      gap: $scheduler-header-cells-gap;
    }

    .sf-all-day-row {
      @include flex-row;
      position: relative;
      overflow: hidden;
      transition: height 0.3s ease;
      width: 100%;
      height: auto;
    }

    .sf-all-day-cell {
      @include flex-column;
      flex: 1;
      position: relative;
      overflow: visible;
      border-inline-end: 1px solid $scheduler-border-color;
    }

    .sf-date-header-container {
      flex: 1;
      position: relative;
    }

    .sf-header-date {
      @include center-align;
      font-size: $scheduler-header-date-font-size;
      line-height: $scheduler-header-date-line-height;
      width: $scheduler-current-date-size;
      height: $scheduler-current-date-size;
      border-radius: 50%;
      cursor: pointer;

      &:hover {
        background: $scheduler-cell-hover-bg;
      }
    }

    .sf-left-indent {
      @include flex-column;
      width: $scheduler-time-cell-width;
      flex-shrink: 0;
      position: sticky;
      left: 0;
      z-index: 5;
      border-inline-end: 1px solid $scheduler-border-color;
    }

    .sf-time-cells-wrap {
      width: $scheduler-time-cell-width;
      overflow-y: hidden;
      border-inline-end: 1px solid $scheduler-border-color;
    }

    .sf-scheduler-table {
      @include flex-column;
      width: 100%;
      height: 100%;
    }

    .sf-vertical-view .sf-time-slots {
      @include center-align;
      height: $scheduler-cells-height;
      padding: $scheduler-time-slots-padding;
      font-size: $scheduler-font-size-sm;
      line-height: $scheduler-time-slots-line-height;
      position: relative;
      box-sizing: border-box;
      flex-shrink: 0;

      &.sf-time-cells {
        border-bottom: 1px solid $scheduler-border-color;
        
        &:last-child {
          border-bottom: none;
        }
      }
      
      &.sf-hide-children > span {
        display: none;
      }
    }

    .sf-week-number {
      height: $scheduler-header-height;
      @include flex-column;
      align-items: center;
      padding-top: 10px;
      font-size: $scheduler-font-size-sm;
    }

    .sf-day-view {

      .sf-header-cells {
        align-items: start;
        padding-inline-start: $scheduler-header-cells-padding-inline;
        padding-block-start: $scheduler-header-cells-padding-block;
      }

      .sf-header-date {
        cursor: default;

        &:hover {
          text-decoration: none;
        }
      }

      .sf-header-day {
        padding-inline-start: $scheduler-header-cells-padding-inline;
      }
    }

    .sf-header-day {
      font-size: $scheduler-header-day-font-size;
      line-height: $scheduler-header-day-line-height;
      text-transform: $scheduler-header-day-text-transform;
      letter-spacing: $scheduler-header-day-letter-spacing;
    }

    .sf-right-section {
      flex: 1;
      @include flex-column;
    }

    .sf-table-wrap> :not(.sf-agenda-view) {
      .sf-content-section {
        @include flex-row;
        flex: 1;
        min-width: max-content;
      }
    }

    .sf-work-cells-container {
      flex: 1;
      @include flex-row;
      position: relative;
      z-index: 1;
    }

    .sf-work-cells-row {
      @include flex-row;
      width: 100%;
      height: $scheduler-cells-height;

      &:last-child {
        .sf-work-cells,
        .sf-work-cells.sf-alternate-cells {
          border-bottom: none;
        }
      }
    }

    .sf-day-view,
    .sf-week-view,
    .sf-work-week-view {
      .sf-work-cells {
        flex: 1;
        width: $scheduler-work-cells-width;
        overflow: visible;
        border-block-end: 1px solid $scheduler-border-color;
        border-inline-end: 1px solid $scheduler-border-color;

        &.sf-alternate-cells {
          border-bottom-style: $scheduler-alternate-cell-border;
        }
      }

      .sf-header-day {
        padding-block-start: $scheduler-header-cells-padding-block;
      }
    }

    .sf-more-indicator {
      font-size: $scheduler-more-indicator-font-size;
      position: absolute;
      inset: $scheduler-more-indicator-position;
      line-height: $scheduler-more-indicator-line-height;
      z-index: 2;
    }

    .sf-month-view {

      .sf-header-section {
        border: none;
      }

      .sf-header-row {
        height: $scheduler-month-header-height;
        min-height: $scheduler-month-header-height;
      }

      .sf-date-header-container {
        display: flex;
        align-items: center;
        height: $scheduler-month-header-height;
        flex: none;
      }

      .sf-header-cells {
        padding: $scheduler-month-header-cells-padding;
        width: $scheduler-month-header-cells-width;
      }

      .sf-left-indent {
        width: $scheduler-month-left-indent;
      }

      .sf-week-number {
        min-height: $scheduler-month-row-height;
        padding-top: 6px;
        color: $scheduler-text-color;
        border-bottom: 1px solid $scheduler-border-color;

        &:last-child {
          border-bottom: none;
        }
      }

      .sf-week-number-wrapper {
        @include flex-column;
        height: 100%;
      }

      .sf-right-section {
        border-bottom: 1px solid $scheduler-border-color;
      }

      .sf-work-cells-row {
        min-height: $scheduler-month-row-height;
        border-bottom: 1px solid $scheduler-border-color;

        &:last-child {
          border-bottom: none;
        }
      }

      .sf-work-cells {
        flex: 1;
        border-inline-end: 1px solid $scheduler-border-color;
        @include flex-column;

        .sf-date-header-container {
          justify-content: space-between;
          padding: $scheduler-month-header-cells-padding;
          height: $scheduler-date-header-container-height;
        }

        .sf-date-header {
          font-size: $scheduler-header-day-font-size;
          line-height: $scheduler-header-day-line-height;
        }

        &.sf-current-date .sf-date-header {
          @include center-align;
          height: $scheduler-month-current-date-size;
          width: $scheduler-month-current-date-size;
          border-radius: 50%;
          padding: 0;
        }
        
        .sf-appointment-wrapper {
          @include flex-column();
          flex: 1;
          position: relative;
        }
      }

      .sf-content-table {
        flex: 1;

        &.sf-hide-dates .sf-other-month {
          visibility: hidden;
        }
      }

      .sf-header-day {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
      }

      .sf-resource-group-month-header .sf-date-header-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        flex: 1 1 auto;

        .sf-resource-header .sf-resource-header-cell.sf-header-cells {
          height: $scheduler-month-header-height;
          width: $scheduler-work-cells-width;
        }
      }

      .sf-resource-group-month-cell {
        width: $scheduler-work-cells-width;
      }
    }

    .sf-agenda-view {
      letter-spacing: $scheduler-agenda-letter-spacing;

      .sf-empty-state {
        font-size: $scheduler-agenda-empty-state-font-size;
        line-height: $scheduler-agenda-empty-state-line-height;
        padding: $scheduler-agenda-empty-state-padding;
        @include ellipsis-style;
      }

      .sf-date-header {
        @include flex-row;
        width: 100%;
        overflow: hidden;
      }

      .sf-agenda-date-label {
        width: $scheduler-agenda-header-date-label-width;
        padding: $scheduler-agenda-header-date-label-padding;
        flex-shrink: 0;
      }

      .sf-agenda-date-label .sf-agenda-date-number {
        font-size: $scheduler-agenda-header-date-font-size;
        line-height: $scheduler-agenda-header-date-line-height;
      }

      .sf-agenda-date-label .sf-agenda-date-name {
        font-size: $scheduler-agenda-header-day-font-size;
        line-height: $scheduler-agenda-header-day-line-height;
      }

      .sf-appointment .sf-location {
        font-size: $scheduler-agenda-event-location-font-size;
        line-height: $scheduler-agenda-event-location-line-height;
      }

      .sf-appointment .sf-time {
        font-size: $scheduler-agenda-event-time-font-size;
        line-height: $scheduler-agenda-event-time-line-height;
      }

      .sf-agenda-events-container {
        flex: 1;
        min-width: 0;
        border-bottom: $scheduler-agenda-event-container-border;

        .sf-agenda-event-list {
          @include flex-column;
          margin: $scheduler-agenda-event-list-margin;
          padding: $scheduler-agenda-event-list-padding;
          gap: $scheduler-agenda-event-list-gap;
        }

        .sf-appointment {
          @include flex-row;
        }

        .sf-appointment-details {
          width: 100%;
          padding: $scheduler-agenda-event-details-padding;
          border-inline-start: $scheduler-agenda-event-strip;
        }

        .sf-subject-wrap {
          display: flex;
          align-items: center;
          overflow: hidden;
          white-space: nowrap;
          gap: $scheduler-agenda-event-subject-wrapper-gap;
        }

        .sf-subject {
          font-size: $scheduler-agenda-event-subject-font-size;
          line-height: $scheduler-agenda-event-subject-line-height;
          @include ellipsis-style;
          flex: 0 1 auto;
        }

        .sf-agenda-no-events {
          height: 100%;
          display: block;
          padding: $scheduler-agenda-no-events-padding;
          font-size: $scheduler-agenda-no-events-font-size;
          line-height: $scheduler-agenda-no-events-line-height;
          @include ellipsis-style;
        }

        .sf-location {
          @include ellipsis-style;
          flex: 0 1 auto;
        }

        .sf-event-recurrence-icon {
          flex: none;
        }

        .sf-time {
          padding-top: $scheduler-agenda-event-time-padding;
          @include ellipsis-style;
          width: 100%;
        }
      }

      .sf-agenda-resource-rows,
      .sf-agenda-resource-children {
        width: 100%;
      }
 
      .sf-agenda-resource-row.sf-agenda-resource-row-leaf {
        display: flex;

        >.sf-agenda-events-container {
          padding-inline-start: $scheduler-agenda-resource-padding;
        }
      }
 
      .sf-agenda-resource-row.sf-agenda-resource-row-branch {
        display: flex;
      }
 
      .sf-agenda-date-group {
        display: flex;
 
        .sf-agenda-resource-rows {
          border-inline-start: 1px solid $scheduler-border-color;
        }

        .sf-agenda-resource-group-by-date {
          border-block-end: 1px solid $scheduler-border-color;
        }
      }
 
      .sf-agenda-resource-name {
        padding: $scheduler-agenda-resource-padding;
        min-width: $scheduler-agenda-resource-min-width;
        width: $scheduler-agenda-resource-min-width;
        border-inline-end: 1px solid $scheduler-border-color;
        border-block-end: 1px solid $scheduler-border-color;
      }
 
      .sf-agenda-resource-content {
        width: 100%;

        > .sf-agenda-date-group:last-child {
          .sf-agenda-date-label {
            border-bottom: 1px solid $scheduler-border-color;
          }
        }
 
        &:has(.sf-empty-state) {
          border-bottom: 1px solid $scheduler-border-color;
        }
      }
    }

    .sf-custom-weeks {
      --cell-height: calc(100% / var(--week-count, 1));
      
      .sf-week-number,
      .sf-work-cells-row {
        height: var(--cell-height);
        min-height: $scheduler-month-row-height;
      }
    }

    .sf-content-wrap {
      flex: 1;
      position: relative;
    }

    .sf-table-wrap> :not(.sf-agenda-view), .sf-more-popup-wrapper {
      .sf-subject {
        padding: 0;
        flex: 1;
        font-size: $scheduler-day-event-subject-font-size;
        line-height: $scheduler-day-event-line-height;
        font-weight: $scheduler-subject-font-weight;

        &.sf-text-center {
          text-align: center;
        }
      }
    }

    .sf-content-wrap .sf-event-container {
      display: flex;

      .sf-subject {
        @include subject-details;
      }
    }

    .sf-day-wrapper {
      flex: 1;
      position: relative;
      overflow: visible;
      width: $scheduler-work-cells-width;

      .sf-appointment {
        margin-inline-start: $scheduler-appointment-margin;
      }
    }

    .sf-content-table {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .sf-current-time {
      position: absolute;
      left: 0;
      font-size: $scheduler-current-time-font-size;
      white-space: nowrap;
      pointer-events: none;
      transform: translateY(-50%);
      text-align: center;
      width: 100%;
    }

    .sf-current-timeline,
    .sf-previous-timeline {
      position: absolute;
      pointer-events: none;
      z-index: $scheduler-current-time-z-index;
    }

    .sf-vertical-view,
    .sf-timeline-view {
      .sf-appointment {
        @include appointment-style;
        z-index: 2;

        .sf-inner-appointment {
          height: 100%;
          width: 100%;
          overflow: hidden;
        }

        .sf-event-time,
        .sf-event-location {
          @include location-details;
        }

        .sf-time {
          @include time-details;
        }
      }
    }

    .sf-vertical-view {
      .sf-block-appointment .sf-inner-appointment {
        height: 100%;
        overflow: hidden;
      }

      .sf-current-timeline,
      .sf-previous-timeline {
        height: 1px;
        width: 100%;
      }

      .sf-current-timeline {
        border-top: 1px solid $scheduler-active-font-color;
      }

      .sf-previous-timeline {
        border-top: 1px dashed $scheduler-active-font-color;
      }
    }

    .sf-timeline-view {
      .sf-appointment {
        height: $scheduler-timeline-event-height;
      }

      .sf-block-appointment {
        height: calc(100% - 1px);

        .sf-inner-appointment {
          overflow: hidden;
        }
      }

      .sf-current-time {
        top: 50%;
        width: max-content;
        transform: translateY(0);
        z-index: $scheduler-current-time-z-index;
        inset-inline-start: calc(var(--sf-timeline-indicator-position, 0) - 20px);
      }
    }

    .sf-indicator {
      display: flex;
      justify-content: center;
      align-items: center;

      .sf-icon-size {
        height: $scheduler-icon-size;
        width: $scheduler-icon-size;
      }
    }

    .sf-up-icon {
      margin-top: 4px;
    }

    .sf-down-icon {
      position: absolute;
      bottom: 6px;
      left: 45%;
    }

    .sf-appointment-details {
      @include appointment-details;
    }

    .sf-month-view .sf-appointment-details,
    .sf-header-section .sf-event-clone .sf-appointment-details,
    .sf-header-section .sf-all-day-row .sf-appointment-details {
      display: flex;
    }

    .sf-event-recurrence-icon, .sf-event-recurrence-edit-icon {
      display: flex;

      .sf-icon-size {
        font-size: $font-size-xs;
      }
    }

    .sf-content-wrap, .sf-time-slot-clone-container, .sf-content-table {
      .sf-event-recurrence-icon, .sf-event-recurrence-edit-icon {
        position: absolute;
        inset-block-end: $spacing-5;
        inset-inline-end: $spacing-5;
      }
    }

    .sf-block-indicator {
      line-height: $scheduler-block-indicator-line-height;
    }

    .sf-table-wrap> :not(.sf-agenda-view) .sf-content-section .sf-subject {
        padding-inline: $scheduler-time-slot-event-padding-inline;
    }

    .sf-block-appointment {
      position: absolute;
      height: 100%;
      width: 100%;
      font-size: $scheduler-font-size-sm;
      z-index: 1;

      .sf-subject {
        overflow: hidden;
        font-size: $scheduler-event-subject-font-size;
        line-height: $scheduler-block-event-line-height;
        padding-inline: $scheduler-block-event-padding;
        padding-block: $scheduler-block-event-padding;
        font-weight: $scheduler-block-event-subject-font-weight;
      }
    }

    .sf-read-only {
      opacity: 0.8;
      cursor: default;
    }

    .sf-day-clone-container,
    .sf-time-slot-clone-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .sf-timescale-disabled {
    
      .sf-work-cells-row {
        height: 100%;
      }

      .sf-resize-container {
        display: flex;
        width: 100%;
      }

      .sf-day-wrapper .sf-appointment-details {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: start;
        gap: 0;

        .sf-subject {
          flex: 0;
        }
      }

      .sf-inner-appointment {
        display: flex;
      }
    }

    &.sf-rtl {

      .sf-previous-icon,
      .sf-next-icon,
      .sf-month-view .sf-appointment,
      .sf-all-day-appointment {
        svg {
          transform: rotate(180deg);
        }
      }
    }

    .sf-dragging, .sf-resizing {
      opacity: $scheduler-drag-opacity;
    }

    .sf-vertical-view .sf-event-clone {
      box-sizing: border-box;
      z-index: 1000;
      border: $scheduler-drag-clone-border;
      box-shadow: $scheduler-popup-box-shadow-1;

      .sf-subject {
        @include subject-details;
      }
    }

    .sf-tooltip {
      position: relative;
      overflow: hidden;
    }

    .sf-timeline-grid {
      @include flex-column;
      height: 100%;
      position: relative;

      .sf-timeline-events-container {
        @include flex-column;
        position: absolute;
        inset: 0;

        .sf-timeline-event-row {
          position: relative;
          flex: 1 0 auto;
          min-height: $scheduler-timeline-resource-min-height;
        }
      }
    }

    .sf-timeline-view {
      height: 100%;
      --sf-timeline-resource-column-width: #{$scheduler-timeline-resource-column-width};

      .sf-main-scroll-container {
        display: block;
      }
    
      .sf-appointment {
        border: $scheduler-timeline-cells-border;
    
        .sf-inner-appointment {
          @include flex-row;
        }
    
        .sf-appointment-details {
          width: 100%;
          padding: $scheduler-timeline-event-padding;

          .sf-subject {
            @include ellipsis-style;
          }
        }
      }
    
      .sf-work-cells-row {
        height: 100%;
        min-height: $scheduler-timeline-resource-min-height;
        position: relative;
        z-index: 1;
      }
    
      .sf-sticky-header {
        display: flex;
        min-width: max-content;
        background: $scheduler-header-bg-color;
      }

      .sf-header-row span {
        @include ellipsis-style;
      }

      .sf-header-row {
        position: relative;
        border-bottom: $scheduler-timeline-cells-border;
        min-width: max-content;
        height: auto;
        min-height: auto;
        font-size: $scheduler-timeline-header-font-size;

        .sf-time-slots {
          padding: $scheduler-timeline-header-padding;
          white-space: nowrap;
          min-width: $scheduler-timeline-work-cells-width;
          width: $scheduler-timeline-work-cells-width;
          height: var(--sf-timeline-header-height, auto);
          flex: 1 0 auto;
          border-inline-start: $scheduler-timeline-cells-border;

          &.sf-time-cells {
              border-inline-start: none;
          }

          &:first-child {
            border-inline-start: none;
          }
        }

        .sf-header-row-cells {
          display: flex;
          align-items: center;
          border-inline-start: $scheduler-timeline-cells-border;
          height: $scheduler-timeline-event-height;
          min-width: $scheduler-timeline-work-cells-width;
          width: calc($scheduler-timeline-work-cells-width * var(--sf-scheduler-col-span, 1));
          flex: var(--sf-scheduler-col-span, 1) 0 auto;

          >span {
            position: sticky;
            padding: $scheduler-timeline-header-row-cell-padding;
            white-space: nowrap;
            inset-inline-start: 0;
          }

          &:first-child {
            border-inline-start: none;
          }
        }

        .sf-day-header.sf-header-row-cells {
          min-width: $scheduler-timeline-work-cells-width;
          width: $scheduler-timeline-work-cells-width;
          flex: 1 0 auto;
        }
      }

      .sf-work-cells {
        border-bottom: $scheduler-timeline-cells-border;
        min-width: $scheduler-timeline-work-cells-width;
        width: calc($scheduler-timeline-work-cells-width * var(--sf-scheduler-col-span, 1));
        border-inline-start: $scheduler-timeline-cells-border;
        flex: var(--sf-scheduler-col-span, 1) 0 auto;
      
        &.sf-alternate-cells {
          border-inline-start: $scheduler-timeline-minor-border-start;
        }

        &:first-child {
          border-inline-start: none;
        }
      }

      .sf-resource-left-indent {
        left: 0;
        right: 0;
        width: $scheduler-timeline-resource-column-width;
        border-inline-end: 1px solid $scheduler-border-color;
        border-bottom: 1px solid $scheduler-border-color;
      }

      .sf-timeline-resource-column-wrapper {
        left: 0;
        right: 0;
        z-index: 5;
      }

      .sf-timeline-resource-column {
        @include flex-column;
        width: 100%;
        height: 100%;
        width: $scheduler-timeline-resource-column-width;
      }

      .sf-timeline-resource-row {
        display: flex;
        align-items: center;
        flex: 1;
        font-size: $scheduler-font-size-sm;
        background: $scheduler-header-bg-color;
        border-bottom: 1px solid $scheduler-border-color;
        border-inline-end: 1px solid $scheduler-border-color;
        min-height: $scheduler-timeline-resource-min-height;
        padding-inline-start: calc(var(--sf-scheduler-resource-level, 1) * $scheduler-resource-name-padding);
        padding-inline-end: $scheduler-timeline-resource-row-padding;
      }

      .sf-resource-tree-icon {
        cursor: pointer;
        padding-inline-end: $scheduler-timeline-resource-row-padding;
      }

      .sf-block-indicator {
        position: absolute;
        inset-block-end: 2px;
        z-index: 2;
      }

      .sf-more-indicator {
        padding-inline-start: $scheduler-more-indicator-padding;
      }

      .sf-resource-row-auto-height {

        .sf-work-cells-row,
        .sf-timeline-event-row,
        .sf-timeline-resource-row {
          flex: 0 0 auto;
          height: var(--sf-scheduler-resource-row-height);
        }
      }

      .sf-current-timeline {
        top: 0;
        bottom: 0;
        border-inline-start: $scheduler-timeline-indicator-border;
      }
    }

    .sf-resource-header {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      border-bottom: 1px solid $scheduler-border-color;
      min-height: $scheduler-all-day-expand-btn-size;
      align-items: stretch;
      min-width: max-content;

      &.sf-resource-header-last-level {
        border-bottom: none;
      }
    }

    .sf-resource-header-cell {
      height: $scheduler-resource-header-cell-height;
      flex: var(--sf-scheduler-col-span, 1) 0 auto;
      min-width: calc(var(--sf-spacing) * 3.125 * var(--sf-scheduler-col-span, 1));
      width: calc(var(--sf-spacing) * 3.125 * var(--sf-scheduler-col-span, 1));
      display: flex;
      align-items: center;
      padding: $scheduler-resource-header-cell-padding;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-inline-end: 1px solid $scheduler-border-color;
      box-sizing: border-box;
    }
    
        .sf-sidebar {
          width: $scheduler-sidebar-drawer-width;
          box-shadow: $scheduler-sidebar-drawer-shadow;
          overflow: auto;
        }
    
        .sf-compact-header {
          display: flex;
          padding: $scheduler-compact-header-padding;
          align-items: center;
        }
    
        .sf-compact-menu-btn {
          width: $scheduler-compact-btn-size;
          height: $scheduler-compact-btn-size;
          cursor: pointer;
        }
    
        .sf-compact-breadcrumb {
          overflow: hidden;
          padding: $scheduler-compact-breadcrumb-padding;
        }
    
        .sf-compact-breadcrumb-level {
          display: inline-flex;
          align-items: center;
        }
    
        .sf-resource-name {
          padding: $scheduler-compact-resource-name-padding;
          letter-spacing: $scheduler-compact-resource-name-letter-spacing;
        }
  }

  .sf-scheduler-dialog {

    .sf-dialog-content {
      flex-direction: column;
      gap: $scheduler-editor-popup-content-gap;
    }

    .sf-editor-fields-row {
      flex-direction: row;
      gap: $scheduler-editor-popup-input-gap;

      .sf-form-error {
        position: absolute;
      }
    }

    .sf-editor-field-container {
      flex: 1;
    }

    .sf-description-row .sf-event-description {
      width: 100%;
    }

    .sf-delete-event {
      margin-inline-end: auto;
    }

    .sf-all-day-time-zone-row {
      gap: $scheduler-timezone-gap;
    }
  }

  .sf-quickinfo-popup-wrapper {
    &.sf-popup {
      border-radius: $scheduler-popup-radius;
      min-width: $scheduler-popup-min-width;
      max-width: $scheduler-popup-max-width;
    }

    .sf-popup-close {
      border-radius: $scheduler-btn-radius;
    }

    .sf-quickinfo-popup-footer {
      padding: $scheduler-popup-footer-padding;
      justify-content: end;
      gap: $scheduler-popup-button-gap;
      border-top: $scheduler-popup-footer-border;
      border-radius: $scheduler-popup-footer-border-radius;
    }

    .sf-quickinfo-popup-header {
      padding: $scheduler-popup-header-padding;
      align-items: center;
      border-bottom: $scheduler-popup-header-border;

      .sf-popup-event-subject {
        flex: 1;
        font-size: $scheduler-popup-subject-font-size;
        line-height: $scheduler-popup-subject-line-height;
        font-weight: $scheduler-popup-subject-font-weight;
      }

      .sf-btn.sf-popup-close {
        padding: $scheduler-popup-close-btn-padding;
        
        .sf-btn-icon svg {
          font-size: $scheduler-popup-close-btn-font-size;
        }
      }
    }

    .sf-icon-size {
      font-size: $scheduler-popup-icon-size;
    }

    .sf-quickinfo-popup-content {
      @include flex-column;
      font-size: $scheduler-font-size-sm;
      line-height: $scheduler-popup-content-line-height;
      padding: $scheduler-quickinfo-popup-content-padding;
      gap: $scheduler-event-popup-content-gap;
    }

    .sf-cell-time,
    .sf-location,
    .sf-time-zone,
    .sf-rule-summary,
    .sf-description,
    .sf-resource-details {
      align-items: center;
      gap: $scheduler-popup-icon-gap;
    }
  }

  .sf-more-popup-wrapper {
    border-radius: 4px;
    min-width: $scheduler-more-popup-width;
    max-height: $scheduler-more-popup-height;
    padding: $scheduler-more-popup-padding;

    &.sf-popup .sf-appointment {
      display: flex;
      position: relative;
      cursor: pointer;
      height: $scheduler-day-event-height;
      width: $scheduler-day-event-width;
      padding: $scheduler-more-popup-event-padding;
    }

    .sf-more-event-header {
      height: $scheduler-more-popup-header-height;
      font-size: $scheduler-font-size-md;
      display: flex;
      align-items: center;
      padding: $scheduler-more-popup-header-padding;
    }

    .sf-more-event-date-header {
      flex: 1;
    }

    .sf-more-event-content {
      @include flex-column;
      gap: $scheduler-more-popup-event-gap;
      overflow-y: auto;
      max-height: $scheduler-more-popup-event-content-max-height;
    }
  }

  .sf-mobile-popup {
    position: fixed;
    inset: $scheduler-border-0;
    height: 100%;
    margin: $scheduler-border-0;
    max-height: 100%;
    overflow: hidden;
    z-index: 1004;

    &.sf-more-popup-wrapper {
      .sf-more-event-content .sf-appointment {
        padding: $scheduler-more-popup-event-padding;
        font-size: $scheduler-day-event-subject-font-size;
      }
    }
  }

  .sf-tooltip-wrap.sf-scheduler-tooltip {
    .sf-tooltip-content {
      display: flex;
      flex-direction: column;
      padding: $scheduler-tooltip-content-padding;
      gap: $scheduler-tooltip-content-gap;
    }
    .sf-scheduler-tooltip-subject {
      font-weight: $scheduler-tooltip-subject-font-weight;
    }
    .sf-scheduler-tooltip-text {
      display: flex;
      flex-direction: column;
      gap: $scheduler-tooltip-gap;
    }
  }

  .sf-resource-item-template {
    @include center-align;
    gap: $scheduler-resource-item-template-gap;

    .sf-resource-color-indicator {
      width: $scheduler-resource-color-indicator-width;
      height: $scheduler-resource-color-indicator-width;
      background-color: var(--sf-resource-color);
    }
  }

  @media (max-width: 560px) {
    .sf-scheduler {
      .sf-time-cells-wrap,
      .sf-left-indent {
        width: $scheduler-time-cell-width-sm;
      }

      .sf-vertical-view .sf-time-slots {
        padding: $scheduler-border-0;
      }

      .sf-scheduler-toolbar-container .sf-toolbar-popup-items .sf-view-button {
        border: none;
      }

      .sf-agenda-view {
        .sf-agenda-date-label {
          width: $scheduler-agenda-header-date-label-width-mobile;
          padding: $scheduler-agenda-header-date-label-padding-mobile;
        }
      }
    }

    .sf-scheduler-dialog {
      .sf-title-location-row {
        flex-direction: column;
      }
    }
  }
  
  .sf-external-drag-clone {
    @include appointment-style;

    &.sf-appointment {
      z-index: 10;
  
      &.sf-drag-clone {
        visibility: hidden;
      }
    }

    .sf-appointment-details {
      @include appointment-details;
    }

    &.sf-month-event .sf-appointment-details {
      display: flex;
    
      .sf-subject {
        flex: 1;
      }
    }

    &.sf-all-day-appointment,
    &.sf-month-event {
      .sf-subject {
        text-align: center;
      }
    }

    .sf-subject {
      @include subject-details;
      font-size: $scheduler-day-event-subject-font-size;
      font-weight: $scheduler-subject-font-weight;
    }

    .sf-event-time,
    .sf-event-location {
      @include location-details;
    }

    .sf-time {
      @include time-details;
    }
  }

  .sf-scheduler-cursor-move {
    cursor: move;
  }
}

.sf-cursor-not-allowed {
  .sf-scheduler-toolbar-container .sf-toolbar-item {
    pointer-events: none;
  }
}

.sf-scheduler-cursor-move {
  .sf-header-cells * {
    pointer-events: none;
  }
}