@use 'theme-variables' as *;

@mixin appointment-color {
  background: $scheduler-appointment-bg-color;
  border-radius: $scheduler-appointment-border-radius;
  color: $scheduler-appointment-font-color;
}

@mixin appointment-focus {
  border: $scheduler-border-0;
  box-shadow: $scheduler-event-box-shadow-1, $scheduler-event-box-shadow-2, $scheduler-event-box-shadow-3;
}

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

  .sf-scheduler {
    background: $scheduler-header-bg-color;
    border: $scheduler-border-size $scheduler-border-type $scheduler-border-color;

    .sf-btn-outlined {
      border: 1px solid $scheduler-btn-border-color;
    }

    .sf-toolbar-selected.sf-btn-outlined {
      border: 1px solid $scheduler-active-border-color;
      background: $scheduler-toolbar-selected-bg;

      &:hover {
        background: $scheduler-toolbar-selected-hover-bg;
      }
    }

    .sf-resource-header {
      .sf-header-cells.sf-current-day {
        color: $scheduler-active-font-color;
      }
    }

    .sf-date-header {
      border-color: $scheduler-border-color;
      border-style: $scheduler-border-type;
      border-width: 0;

      .sf-header-cells {
        background: $scheduler-header-bg-color;
        color: $scheduler-header-font-color;
      }

      .sf-current-day {
        color: $scheduler-active-font-color;
      }
    }

    .sf-timeline-view {
      .sf-day-header.sf-current-day {
        color: $scheduler-active-font-color;
      }
    }

    .sf-all-day-appointment-section {
      &:hover,
      &:focus {
        background: $scheduler-cell-hover-bg;
        border-radius: 100%;
      }
    }

    .sf-left-indent,
    .sf-right-section {
      background: $scheduler-header-bg-color;
    }

    .sf-time-cells-wrap {
      background-color: $scheduler-bg-color;
    }

    .sf-vertical-view .sf-time-slots {
      color: $scheduler-text-color;
      border-bottom: none;

      &.sf-time-cells {
        border-bottom: 1px solid $scheduler-border-color;
      }
    }

    .sf-work-cells-row {
      background-color: $scheduler-bg-color;
      border-color: $scheduler-border-color;
      color: $scheduler-text-color;
    }

    .sf-work-cells,
    .sf-timescale-disabled .sf-day-wrapper {
      background: $scheduler-work-cells-bg-color;
      color: $scheduler-text-color;
      padding: 0;

      &.sf-weekend {
        background: $scheduler-work-cells-bg-color;
      }

      &.sf-work-hours,
      &.sf-work-days {
        background: $scheduler-workhour-bg-color;
      }

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

      &.sf-selected {
        background-color: $scheduler-cell-selected-bg;
      }

      &:focus {
        background-color: $scheduler-cell-focus-bg-color;
      }
    }

    .sf-vertical-view div.sf-selected-cell {
      background: $scheduler-selected-cell-bg;
    }

    .sf-current-time {
      color: $scheduler-active-font-color;
    }

    .sf-table-wrap> :not(.sf-agenda-view),
    .sf-more-popup-wrapper {
      .sf-appointment {
        @include appointment-color;

        &:focus {
          @include appointment-focus;
        }
      }
    }

    .sf-more-indicator {
      &:focus {
        text-decoration: underline;
      }
    }

    .sf-block-appointment {
      background: $scheduler-block-appointment-bg-color;
    }

    .sf-other-month {
      color: $scheduler-other-month-date;
    }

    .sf-current-date .sf-date-header,
    .sf-current-day .sf-header-date {
      background-color: $scheduler-focus-color;
      color: $scheduler-current-date-color;
    }

    .sf-agenda-view {
      color: $scheduler-agenda-text-color;

      .sf-empty-state {
        color: $scheduler-agenda-empty-state-color;
      }

      .sf-agenda-events-container {
        .sf-appointment {
          &.sf-appointment-active {
            background: $scheduler-agenda-selected-event-bg;
          }

          &:hover {
            background: $scheduler-agenda-event-hover-bg;
          }

          &:focus {
            background: $scheduler-agenda-event-focus-bg;
          }
        }

        .sf-event-recurrence-icon,
        .sf-event-recurrence-edit-icon {
          color: $scheduler-agenda-event-recurrence-icon-color;
        }

        .sf-location {
          color: $scheduler-agenda-event-location-color;
        }

        .sf-agenda-no-events {
          color: $scheduler-agenda-no-events-color;
        }
      }
    }
  }

  .sf-scheduler-dialog {
    background: $scheduler-editor-bg-color;
  
    .sf-dlg-footer-content {
      background: $scheduler-editor-footer-bg-color;
    }
  }

  .sf-quickinfo-popup-wrapper {
    background: $scheduler-quick-popup-bg;
    box-shadow: $scheduler-popup-box-shadow-1;

    .sf-quickinfo-popup-header {
      .sf-btn.sf-popup-close {
        color: $scheduler-popup-close-icon-color;
        &:hover,
        &:focus {
          color: $scheduler-popup-close-icon-hover-color;
          background-color: $scheduler-popup-close-icon-hover-active-bg-color;
        }
        &:active {
          color: $scheduler-popup-close-icon-active-color;
          background-color: $scheduler-popup-close-icon-hover-active-bg-color;
        }
      }
    }

    .sf-quickinfo-popup-content {
      color: $scheduler-popup-content-color;
    }

    .sf-quickinfo-popup-footer {
      background-color: $scheduler-popup-footer-bg-color;
    }
  }

  .sf-more-popup-wrapper {
    background-color: $scheduler-bg-color;
    box-shadow: $scheduler-popup-box-shadow-2;
  }

  .sf-mobile-popup {
    .sf-more-event-content .sf-appointment {
      @include appointment-color;

      &:focus {
        @include appointment-focus;
      }
    }
  }

  .sf-external-drag-clone {
    @include appointment-color;

    &:focus {
      @include appointment-focus;
    }
  }

    .sf-scheduler {
      .sf-compact-header {
        background: $scheduler-compact-header-bg-color;
        border-bottom: 1px solid $scheduler-border-color;
        color: $scheduler-compact-header-color;
      }
    }
}