@use "sass:map";
@import "../calendar-day/calendar-day.theme";

@mixin ql-calendar-body-theme($theme, $overrides: ()) {
  $calendar-map: ();

  $calendar-map: map.merge($calendar-map, $overrides);

  $config: mat-get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  ql-calendar-body {
    &.isNotMonthView {
      .calendar-body {
        grid-template-areas:
        "hours-indicator header"
        "hours main";

        grid-template-columns: 5rem 1fr;
        grid-template-rows: var(--calendar-header-height) 1fr;

        .hours-indicator {
          grid-area: hours-indicator;
        }

        .hours {
          grid-area: hours;
        }
      }
    }
  }

  .calendar-body {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas:
        "header"
          "main";

    grid-template-rows: var(--calendar-header-height) 1fr;
    grid-template-columns: 100%;

    .main {
      grid-area: main;
      display: flex;
      flex-flow: row wrap;
    }
    .header {
      grid-area: header;
    }
    .monthly-day {
      box-sizing: border-box;
      flex: 1 1 calc(100% / 7);
      background-color: white;
      border-left: none;
      border-top: none;
      border-right: var(--calendar-border);
      border-bottom: var(--calendar-border);

      // 1, 8, 15, 22, 29 all need border left as they are the first day of the line
      &:nth-of-type(1), &:nth-of-type(8), &:nth-of-type(15), &:nth-of-type(22), &:nth-of-type(29), &:nth-of-type(36) {
        border-left: var(--calendar-border);
      }

      @include ql-calendar-day-theme($theme);
    }

    .weekly-day {
      box-sizing: border-box;
      flex: 1 1 calc(100% / 7);
      background-color: white;
      border-top: none;
      border-right: var(--calendar-border);
      border-bottom: var(--calendar-border);

      &:nth-of-type(1) {
        border-left: var(--calendar-border);
      }
    }
  }


}