@use '@/theme/viewerDefs' as *;

.backstage {
  margin: 0;
  box-sizing: border-box; /* reset */
  overflow: hidden;
  width: 100%; /* restrict the page width to viewport */
  height: 100vh;

  font-family: var(--font-family-override, $viewer-font-family);
  background: var(--background-color-override, $viewer-background-color);
  color: var(--color-override, $viewer-color);
  gap: $view-element-gap;
  padding: $view-outer-padding;
  font-size: $base-font-size;

  display: grid;
  grid-template-columns: 1fr 40vw;
  grid-template-rows: auto 12px 1fr auto;
  grid-template-areas:
    'header    header'
    'progress  schedule-nav'
    'card      schedule'
    'info      schedule';

  .empty-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 25vh;
    color: var(--label-color-override, $viewer-label-color);
  }

  /* =================== HEADER + EXTRAS ===================*/

  .project-header {
    grid-area: header;
    font-size: $header-font-size;
    font-weight: 600;
    display: flex;
    gap: 1rem;
  }

  .logo {
    max-width: min(200px, 20vw);
  }

  .title {
    line-height: 1.1em;
  }

  .clock-container {
    margin-left: auto;
    font-weight: 600;

    .label {
      font-size: $timer-label-size;
      color: var(--label-color-override, $viewer-label-color);
      text-transform: uppercase;
    }

    .time {
      font-size: $timer-value-size;
      color: var(--secondary-color-override, $viewer-secondary-color);
      letter-spacing: 0.05em;
      line-height: 0.95em;
    }
  }

  /* =================== MAIN - NOW ===================*/

  .progress-container {
    grid-area: progress;
    width: 100%;
    margin: 0 auto -8px;
  }

  .card-container {
    grid-area: card;
    display: flex;
    flex-direction: column;
    gap: $view-element-gap;
  }

  .event {
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
    padding: $view-card-padding;
    border-radius: $element-border-radius;

    &.blink {
      animation-name: blink;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 3;
      animation-duration: 1s;
    }
  }

  .timer-group {
    border-top: 2px solid var(--background-color-override, $viewer-background-color);
    margin-top: max(1vh, 16px);
    padding-top: max(1vh, 16px);
    display: flex;
    row-gap: 0.5em;
  }

  .timer-gap {
    flex: 1;
    max-width: 7.5em;
  }

  .time-entry {
    &__label {
      font-size: $timer-label-size;
      color: var(--label-color-override, $viewer-label-color);
      font-weight: 600;
      text-transform: uppercase;
    }

    &__value {
      font-size: $base-font-size;
      color: var(--secondary-color-override, $viewer-secondary-color);
      letter-spacing: 0.05em;
      line-height: 0.95em;
    }

    &--pending {
      color: var(--timer-pending-color-override, $ontime-roll);
    }
  }

  /* =================== MAIN - SCHEDULE ===================*/

  $schedule-left-spacing: clamp(16px, 4vw, 64px);
  .schedule-container {
    grid-area: schedule;
    overflow: hidden;
    height: 100%;
    padding-left: $schedule-left-spacing;
  }

  .schedule-nav-container {
    grid-area: schedule-nav;
    padding-left: $schedule-left-spacing;
  }

  /* =================== MAIN - INFO ===================*/

  .info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: $view-element-gap;
    align-self: end;
    overflow: hidden;
  }

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

  .info-card {
    display: flex;
    gap: $view-element-gap;

    &__label {
      font-size: $timer-label-size;
      color: var(--label-color-override, $viewer-label-color);
      font-weight: 600;
      text-transform: uppercase;
    }

    &__message {
      font-size: $base-font-size;
      line-height: 1.2em;
      white-space: pre-line;
      overflow: hidden;
      flex: 1;
    }

    &__qr {
      padding: 0.5rem;
      background-color: $ui-white;
      border-radius: 2px;
    }

    &__img {
      padding: 0.5rem;
      border-radius: 2px;
    }
  }
}

/* =================== MOBILE ===================*/
@media screen and (max-width: 768px) {
  .backstage {
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .project-header {
      flex-direction: column;
      position: relative;
      gap: 0.5rem;
    }

    .logo img {
      height: min(50px, 10vh);
    }

    .timer-group {
      flex-wrap: wrap;
    }

    .clock-container {
      position: absolute;
      top: 0;
      right: 0;
    }

    .schedule-nav-container {
      padding-left: 0;
      justify-content: center;
    }

    .schedule-container {
      padding-left: 0;
      flex: 1;
    }

    .info {
      width: 100%;
      text-align: right;
    }

    .qr {
      display: none;
    }

    .info--stretch {
      flex: 1;
    }
  }
}

/* =================== ANIMATION ===================*/

@keyframes blink {
  0% {
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
  }
  50% {
    background-color: var(--card-background-color-blink-override, $playback-start);
  }
  100% {
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
  }
}
