.fc {

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

  & .fc-timegrid-col-frame {
    min-height: 100%; // liquid-hack is below
    position: relative;
  }

}

.fc-media-screen {
  &.fc-liquid-hack {
    & .fc-timegrid-col-frame {
      @include liquid-absolute-override;
    }
  }

  & .fc-timegrid-cols {
    position: absolute; // no z-index. children will decide and go above slots
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    & > table {
      height: 100%;
    }
  }

  & .fc-timegrid-col-bg,
  & .fc-timegrid-col-events,
  & .fc-timegrid-now-indicator-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}

.fc {

  // bg

  & .fc-timegrid-col-bg {
    z-index: $timegrid-col-bg-z;
    @include bg-z-indexes;
  }

  & .fc-timegrid-bg-harness {
    position: absolute; // top/bottom will be set by JS
    left: 0;
    right: 0;
  }

  // fg events
  // (the mirror segs are put into a separate container with same classname,
  // and they must be after the normal seg container to appear at a higher z-index)

  & .fc-timegrid-col-events {
    z-index: $timegrid-col-fg-z;
    // child event segs have z-indexes that are scoped within this div
  }

  // now indicator

  & .fc-timegrid-now-indicator-container {
    bottom: 0;
    overflow: hidden; // don't let overflow of lines/arrows cause unnecessary scrolling
    // z-index is set on the individual elements
  }

}

.fc-direction-ltr {

  & .fc-timegrid-col-events {
    margin: 0 2.5% 0 2px;
  }

}

.fc-direction-rtl {

  & .fc-timegrid-col-events {
    margin: 0 2px 0 2.5%;
  }

}