@use '../blockMixins' as *;

$skip-opacity: 0.1;

.eventBlock {
  @include block-styling;
  background-color: $block-bg;

  display: grid;
  grid-template-areas:
    'binder ...        ...     ...'
    'binder pb-actions times   actions'
    'binder pb-actions title   next-ind'
    'binder pb-actions estatus estatus'
    'binder ...        ...     ...';

  grid-template-columns: $block-binder-width auto 1fr auto;
  grid-template-rows: 0.25rem 2.25rem 2.25rem 2.25rem 0.25rem;
  align-items: center;
  padding-right: $block-clearance;
  gap: 2px;

  transition-property: background-color;
  transition-duration: $transition-time-feedback;

  @mixin declare-overrides() {
    --status-color-override: #{$gray-200};
    --status-color-active-override: #{$green-400};
  }

  &.selected {
    background-color: $gray-1350;
  }

  &.play {
    background-color: $green-700;
    @include declare-overrides;
  }

  &.roll {
    background-color: $blue-700;
    @include declare-overrides;
  }

  &.pause {
    background-color: rgba($ontime-paused, 0.6);
    @include declare-overrides;
  }

  &.hasCursor {
    outline: 1px solid $block-cursor-color;
  }

  /* we stop the eventActions from having opacity to fix issue with dropdown drawing order */
  &.past:not(.skip) {
    .delayNote,
    .statusElements,
    .eventTitle,
    .eventNote,
    .eventTimers,
    .eventStatus,
    .playbackActions,
    .binder {
      opacity: 0.4;
    }
  }

  &.skip {
    border: 1px solid $white-3;

    .delayNote,
    .eventTitle,
    .eventNote,
    .binder,
    .eventTimers,
    .eventStatus {
      opacity: $skip-opacity;
    }
  }
}

.binder {
  grid-area: binder;
  height: 100%;
  display: grid;
  place-content: center;
  position: relative;
  cursor: pointer;

  border-radius: $block-border-radius 0 0 $block-border-radius;

  background-color: $gray-1050; // to override inline
  color: $section-white;
  font-size: 1rem;

  .drag {
    @include drag-style;
    position: absolute;
    margin-top: 0.25rem;
  }

  .cue {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 5.5rem;
    text-align: center;

    font-weight: 600;
    letter-spacing: 0.5px;
    rotate: -90deg;
  }
}

.playbackActions {
  grid-area: pb-actions;
  display: flex;
  flex-direction: column;
  margin: 0 0.5rem;
  gap: 0.5rem;
}

.eventTimers {
  grid-area: times;
  display: flex;
  align-items: center;
  gap: $block-clearance;
  height: 100%;

  .delayNote {
    font-size: 0.75rem;
    line-height: 0.8rem;
    color: $ontime-delay-text;
  }
}

.eventTitle {
  grid-area: title;
  overflow: hidden;
  max-height: calc(2.5em + 2px);
  line-height: 1.25em;
}

.eventActions {
  grid-area: actions;
  display: flex;
  gap: $block-clearance;
  justify-content: flex-end;
}

.progressBg {
  grid-area: progb;
  border-radius: 2px;
  background-color: $gray-1100;
  opacity: 1;
  height: 100%;
}

.progressBg.hidden {
  opacity: 0;
}

.flip {
  transform: rotateY(180deg);
}

.statusElements {
  grid-area: estatus;
  display: grid;
  grid-template-areas:
    'notes status'
    'progb progb';
  gap: 2px;
  grid-template-rows: auto 0.25rem;
  align-items: center;
  height: 100%;
  padding: 2px 0;
}

.eventNote {
  grid-area: notes;
  display: block;
  font-size: calc(1rem - 3px);
  color: $block-text-color;
  line-height: calc(1rem - 3px);

  max-height: 2rem;
  overflow-y: hidden;
}

.nextTag {
  grid-area: next-ind;
  font-size: 1rem;
  color: $orange-500;
  letter-spacing: 0.03px;
  font-weight: 600;
  text-align: right;
}

.indicators {
  grid-area: next-ind;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;

  .indicator {
    background-color: transparent;
    margin: 0.4rem;
    margin-right: 0;
    border-radius: 0.7rem;
    width: 0.7rem;
    height: 0.7rem;
  }
  .indicator.delay {
    background-color: $ontime-delay;
  }
  .indicator.nextDay,
  .indicator.overlap,
  .indicator.spacing {
    background-color: $gray-600;
  }
}

.eventStatus {
  grid-area: status;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  color: var(--status-color-override, $gray-500);

  .statusIcon {
    width: 1rem;
    height: 1rem;
  }

  .statusIcon.active {
    color: var(--status-color-active-override, $active-indicator);
  }

  .statusIcon.disabled {
    color: $gray-1000;
  }
}