.preview {
  background-color: $ui-black;
  display: grid;
  place-content: center;
  text-align: center;
  position: relative;
}

.mainContent {
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  color: var(--override-colour, $ui-white);

  &[data-phase='pending'] {
    color: $ontime-roll;
  }
  &[data-phase='overtime'] {
    color: $playback-negative;
  }
  &[data-phase='none'] {
    opacity: $opacity-disabled;
  }
}

.secondaryContent {
  border-top: 1px solid $white-7;
  // when the event timer is demoted here (secondary swapped to main) it keeps its colour treatment
  color: var(--override-colour, inherit);

  &[data-phase='pending'] {
    color: $ontime-roll;
  }
  &[data-phase='overtime'] {
    color: $playback-negative;
  }
}

.blackout {
  display: none;
}

.eventStatus {
  position: absolute;
  left: 0;
  margin: 0.5rem 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.statusIcon {
  color: $gray-1000;

  &[data-active='true'] {
    color: $active-indicator;
  }
}