.fc {

  & .fc-timegrid-slots {
    position: relative;
    z-index: $timegrid-slots-z;
  }

  & .fc-timegrid-slot { // a <td>
    height: 1.5em;
    border-bottom: 0; // each cell owns its top border

    &:empty:before {
      content: '\00a0'; // make sure there's at least an empty space to create height for height syncing
    }
  }

  & .fc-timegrid-slot-minor {
    border-top-style: dotted;
  }

  & .fc-timegrid-slot-label-cushion {
    display: inline-block;
    white-space: nowrap;
  }

  & .fc-timegrid-slot-label {
    vertical-align: middle; // vertical align the slots
  }


  // slots AND axis cells (top-left corner of view including the "all-day" text)

  & .fc-timegrid-axis-cushion,
  & .fc-timegrid-slot-label-cushion {
    padding: 0 4px;
  }


  // axis cells (top-left corner of view including the "all-day" text)
  // vertical align is more complicated, uses flexbox

  & .fc-timegrid-axis-frame-liquid {
    height: 100%; // will need liquid-hack in FF
  }

  & .fc-timegrid-axis-frame {
    overflow: hidden;
    display: flex;
    align-items: center; // vertical align
    justify-content: flex-end; // horizontal align. matches text-align below
  }

  & .fc-timegrid-axis-cushion {
    max-width: 60px; // limits the width of the "all-day" text
    flex-shrink: 0; // allows text to expand how it normally would, regardless of constrained width
  }

}

.fc-direction-ltr {

  & .fc-timegrid-slot-label-frame {
    text-align: right;
  }

}

.fc-direction-rtl {

  & .fc-timegrid-slot-label-frame {
    text-align: left;
  }

}

.fc-liquid-hack {

  & .fc-timegrid-axis-frame-liquid {
    @include liquid-absolute-override;
  }

}