.fc-daygrid-event { // make root-level, because will be dragged-and-dropped outside of a component root
  position: relative; // for z-indexes assigned later
  white-space: nowrap;
  border-radius: 3px; // dot event needs this to when selected
  font-size: var(--fc-small-font-size);
}

// --- the rectangle ("block") style of event ---

.fc-daygrid-block-event {

  & .fc-event-time {
    font-weight: bold;
  }

  & .fc-event-time,
  & .fc-event-title {
    padding: 1px;
  }

}

// --- the dot style of event ---

.fc-daygrid-dot-event {
  display: flex;
  align-items: center;
  padding: 2px 0;

  & .fc-event-title {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0; // important for allowing to shrink all the way
    overflow: hidden;
    font-weight: bold;
  }

  &:hover,
  &.fc-event-mirror {
    background: rgba(0, 0, 0, 0.1);
  }

  &.fc-event-selected:before {
    // expand hit area
    top: -10px;
    bottom: -10px;
  }

}

.fc-daygrid-event-dot { // the actual dot
  margin: 0 4px;
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: calc(var(--fc-daygrid-event-dot-width) / 2) solid var(--fc-event-border-color);
  border-radius: calc(var(--fc-daygrid-event-dot-width) / 2);
}


// --- spacing between time and title ---

$daygrid-event-inner-margin: 3px;

.fc-direction-ltr {
  & .fc-daygrid-event .fc-event-time {
    margin-right: $daygrid-event-inner-margin;
  }
}

.fc-direction-rtl {
  & .fc-daygrid-event .fc-event-time {
    margin-left: $daygrid-event-inner-margin;
  }
}