$event-selected-dimmer-z: 1;
$event-main-z: 2;
$event-selected-hit-z: 3;
$event-resizer-z: 4;


// link resets
// ----------------------------------------------------------------------------------------------------

a.fc-event,
a.fc-event:hover {
  text-decoration: none;
}

// cursor
.fc-event[href],
.fc-event.fc-event-draggable {
  cursor: pointer;
}


// event text content
// ----------------------------------------------------------------------------------------------------

.fc-event {
  & .fc-event-main {
    position: relative;
    z-index: $event-main-z;
  }
}


// dragging
// ----------------------------------------------------------------------------------------------------

.fc-event-dragging {

  &:not(.fc-event-selected) { // MOUSE
    opacity: 0.75;
  }

  &.fc-event-selected { // TOUCH
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  }

}


// resizing
// ----------------------------------------------------------------------------------------------------
// (subclasses should hone positioning for touch and non-touch)

.fc-event {

  & .fc-event-resizer {
    display: none;
    position: absolute;
    z-index: $event-resizer-z;
  }

}

.fc-event:hover, // MOUSE
.fc-event-selected { // TOUCH

  & .fc-event-resizer {
    display: block;
  }

}

.fc-event-selected {

  & .fc-event-resizer {
    border-radius: calc(var(--fc-event-resizer-dot-total-width) / 2);
    border-width: var(--fc-event-resizer-dot-border-width);
    width: var(--fc-event-resizer-dot-total-width);
    height: var(--fc-event-resizer-dot-total-width);
    border-style: solid;
    border-color: inherit;
    background: var(--fc-page-bg-color);

    // expand hit area
    &:before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
    }

  }

}


// selecting (always TOUCH)
// OR, focused by tab-index
// (TODO: maybe not the best focus-styling for .fc-daygrid-dot-event)
// ----------------------------------------------------------------------------------------------------

.fc-event-selected,
.fc-event:focus {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

  // expand hit area (subclasses should expand)
  &:before {
    content: "";
    position: absolute;
    z-index: $event-selected-hit-z;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  // dimmer effect
  &:after {
    content: "";
    background: var(--fc-event-selected-overlay-color);
    position: absolute;
    z-index: $event-selected-dimmer-z;

    // assume there's a border on all sides. overcome it.
    // sometimes there's NOT a border, in which case the dimmer will go over
    // an adjacent border, which looks fine.
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
  }

}