.label {
  font-size: $inner-section-text-size;
  color: $label-gray;

  &.active {
    color: $action-text-color;
  }
}

.previewContainer {
  display: grid;
  gap: $element-spacing;
  grid-template-columns: 2fr 1fr;
}

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

.corner {
  transform: rotate(45deg);

  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
  color: $ui-white;
  transition-property: color;
  transition-duration: $transition-time-action;

  &:hover {
    color: $ontime-color;
  }
}

.options {
  display: flex;
  flex-direction: column;
  gap: $element-spacing;
}

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

.mainContent {
  font-size: 1rem;
  font-weight: 600;
  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;
}

.blackout {
  display: none;
}

.timerIndicators {
  display: flex;
  flex-direction: column;
}

.statusIcon {
  color: $gray-1000;

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

.divider {
  border-top: 1px solid $gray-1000;
}