$daygrid-non-business-z: 1;
$daygrid-bg-event-z: 2;
$daygrid-highlight-z: 3;
$daygrid-topbottom-z: 4;
$daygrid-weeknum-z: 5;
$daygrid-event-z: 6;
$daygrid-event-mirror-z: 7;


// help things clear margins of inner content
.fc-daygrid-day-frame,
.fc-daygrid-day-events,
.fc-daygrid-event-harness { // for event top/bottom margins
  &:before { @include clearfix; }
  &:after { @include clearfix; }
}


.fc {

  & .fc-daygrid-body { // a <div> that wraps the table
    position: relative;
    z-index: 1; // container inner z-index's because <tr>s can't do it
  }

  & .fc-daygrid-day {
    &.fc-day-today {
      background-color: var(--fc-today-bg-color);
    }
  }

  & .fc-daygrid-day-frame {
    position: relative;
    min-height: 100%; // seems to work better than `height` because sets height after rows/cells naturally do it
  }

  // cell top

  & .fc-daygrid-day-top {
    display: flex;
    flex-direction: row-reverse;
  }

  & .fc-day-other .fc-daygrid-day-top {
    opacity: 0.3;
  }

  // day number (within cell top)

  & .fc-daygrid-day-number {
    position: relative;
    z-index: $daygrid-topbottom-z;
    padding: 4px;
  }

  & .fc-daygrid-month-start { // on .fc-daygrid-day-number
    font-weight: bold;
    font-size: 1.1em;
  }

  // event container

  & .fc-daygrid-day-events {
    margin-top: 1px; // needs to be margin, not padding, so that available cell height can be computed
  }

  // positioning for balanced vs natural

  & .fc-daygrid-body-balanced {
    & .fc-daygrid-day-events {
      position: absolute;
      left: 0;
      right: 0;
    }
  }

  & .fc-daygrid-body-unbalanced {
    & .fc-daygrid-day-events {
      position: relative; // for containing abs positioned event harnesses
      min-height: 2em; // in addition to being a min-height during natural height, equalizes the heights a little bit
    }
  }

  & .fc-daygrid-body-natural { // can coexist with -unbalanced
    & .fc-daygrid-day-events {
      margin-bottom: 1em;
    }
  }

  // event harness

  & .fc-daygrid-event-harness {
    position: relative;
  }

  & .fc-daygrid-event-harness-abs {
    position: absolute;
    top: 0; // fallback coords for when cannot yet be computed
    left: 0; //
    right: 0; //
  }

  & .fc-daygrid-bg-harness {
    position: absolute;
    top: 0;
    bottom: 0;
  }

  // bg content

  & .fc-daygrid-day-bg {
    & .fc-non-business { z-index: $daygrid-non-business-z }
    & .fc-bg-event { z-index: $daygrid-bg-event-z }
    & .fc-highlight { z-index: $daygrid-highlight-z }
  }

  // events

  & .fc-daygrid-event {
    z-index: $daygrid-event-z;
    margin-top: 1px;
  }

  & .fc-daygrid-event.fc-event-mirror {
    z-index: $daygrid-event-mirror-z;
  }

  // cell bottom (within day-events)

  & .fc-daygrid-day-bottom {
    font-size: .85em;
    margin: 0 2px;

    // can't use flexbox well inside tables. for floating
    &:before { @include clearfix; }
    &:after { @include clearfix; }
  }

  & .fc-daygrid-more-link {
    position: relative;
    z-index: $daygrid-topbottom-z;
    margin-top: 1px;
    max-width: 100%;
    border-radius: 3px;
    padding: 2px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1; // undo themes that have thick line-height
    cursor: pointer;

    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }

  // week number (within frame)

  & .fc-daygrid-week-number {
    position: absolute;
    z-index: $daygrid-weeknum-z;
    top: 0;
    padding: 2px;
    min-width: 1.5em;
    text-align: center;
    background-color: var(--fc-neutral-bg-color);
    color: var(--fc-neutral-text-color);
  }

  // popover

  & .fc-more-popover .fc-popover-body {
    min-width: 220px;
    padding: 10px;
  }

}

.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
  margin-left: 2px;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  margin-right: 2px;
}

.fc-direction-ltr {

  & .fc-daygrid-more-link {
    float: left;
  }

  & .fc-daygrid-week-number {
    left: 0;
    border-radius: 0 0 3px 0;
  }

}

.fc-direction-rtl {

  & .fc-daygrid-more-link {
    float: right;
  }

  & .fc-daygrid-week-number {
    right: 0;
    border-radius: 0 0 0 3px;
  }

}

.fc-liquid-hack {

  & .fc-daygrid-day-frame {
    position: static; // will cause inner absolute stuff to expand to <td>
  }

}