@use '@angular/material' as mat;
@mixin sc-scheduling-timeline-theme($theme) {
  $background: map-get($theme, background);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $success: map-get($theme, success);
  $warning: map-get($theme, warning);
  $danger: map-get($theme, danger);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $scBackground: map-get($theme, sc-background);
  // mat-color($foreground, divider) !important;
  // background-color: mat-color($background, card);
  
  .timeline {
    &-row {
      background-color: mat.get-color-from-palette($background, card) !important;
      border-bottom-color: mat.get-color-from-palette($foreground, divider) !important;
    }

    &-body {
      background-color: mat.get-color-from-palette($background, card) !important;

      &-overlay {
        background-color: mat.get-color-from-palette($background, card) !important;
        border-right-color: mat.get-color-from-palette($foreground, divider) !important;
      }
    }

    &-container {
      background-color: mat.get-color-from-palette($background, card) !important;
    }

    &-header {
      // color: #575962;

      &-overlay {
        background-color: mat.get-color-from-palette($background, card) !important;
        border-right-color: mat.get-color-from-palette($foreground, divider) !important;
        border-bottom-color: mat.get-color-from-palette($foreground, divider) !important;
      }

      .timeline-header-kw {
        background-color: mat.get-color-from-palette($background, card) !important;
        border-top-color: mat.get-color-from-palette($foreground, divider) !important;
        border-bottom-color: mat.get-color-from-palette($foreground, divider) !important;
      }

      .timeline-header-week {
        border-left-color: mat.get-color-from-palette($foreground, divider) !important;

        .timeline-header-day {
          background-color: mat.get-color-from-palette($background, card);
          border-right-color: mat.get-color-from-palette($foreground, divider) !important;
          border-bottom-color: mat.get-color-from-palette($foreground, divider) !important;
        }
      }

      .timeline-header-days {
        border-bottom-color: mat.get-color-from-palette($foreground, divider) !important;

        .timeline-header-hours {
          >* {
            background-color: mat.get-color-from-palette($background, card);
            border-right-color: mat.get-color-from-palette($foreground, divider) !important;
          }
        }
      }
    }

    &-row:not(.timeline-header) {
      background-color: mat.get-color-from-palette($background, card);

      .timeline-row-vertical-header {
        background-color: mat.get-color-from-palette($background, card);
        border-right-color: mat.get-color-from-palette($foreground, divider) !important;
        border-top-color: mat.get-color-from-palette($foreground, divider) !important;
        border-bottom-color: mat.get-color-from-palette($foreground, divider) !important;
      }

      .timeline-row-data {
        background-color: mat.get-color-from-palette($background, card) !important;
        border-bottom-color: mat.get-color-from-palette($foreground, divider) !important;

        &-hour {
          border-right-color:  mat.get-color-from-palette($foreground, divider) !important;
        }
      }
    }

    & .bg-highlight {
      background-color: mat.get-color-from-palette($foreground, divider) !important;
    }
  }
}