ontime/apps/client/src/features/viewers/countdown/Countdown.scss

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

.countdown {
  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);

  /* =================== MAIN - SELECT ===================*/

  .event-select {
    display: flex;
    margin-top: 8vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    &__title {
      font-size: clamp(1.5rem, 2vw, 2rem);
    }

    &__events {
      font-size: clamp(1rem, 1.5vw, 1.5rem);
      margin-top: 1em;
      overflow-y: auto;
      height: 70vh;
      width: 60vw;
    }
  }

  /* =================== MAIN - EVENT CONTAINER ===================*/

  .countdown-container {
    height: 100%;
    width: 100%;
    gap: min(2vh, 1rem);
    padding: min(2vh, 1rem) clamp(1rem, 10vw, 4rem);

    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-columns: 100%;
    grid-template-areas:
      'header'
      'status'
      'clock'
      'title'
      'timers';

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

    .clock-container {
      grid-area: header;
      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;
      }
    }

    .status {
      grid-area: status;
      color: var(--label-color-override, $viewer-label-color);
        font-size: clamp(2rem, 3.5vw, 3.5rem);
      font-weight: 600;
    }

    /* =================== TIMER + TITLE ===================*/

    .timer {
      grid-area: clock;

      font-family: var(--font-family-override, $viewer-font-family);
      color: var(--timer-color-override, $timer-color);
      font-size: 15vw;
      line-height: 0.9em;
      text-align: center;
      letter-spacing: 0.05em;
      font-weight: 600;
      opacity: 1;

      &--paused {
        opacity: $viewer-opacity-disabled;
      }

      &--finished {
        color: $timer-finished-color;
      }
    }

    .title {
      grid-area: title;
      background-color: var(--card-background-color-override, $viewer-card-bg-color);
      padding: 1rem 1.5rem;
      border-radius: 8px;

      font-weight: 600;
      font-size: clamp(40px, 4.5vw, 80px);
      color: var(--accent-color-override, $accent-color);
      line-height: 1.1em;
      text-align: center;
    }

    /* =================== FOOTER TIMERS ===================*/

    .timer-group {
      grid-area: timers;
      display: grid;
      grid-template-areas:
        'projected-start projected-end'
        'scheduled-start scheduled-end';
      grid-template-columns: 1fr 1fr;
      justify-items: center;
      text-align: center;
      row-gap: clamp(1rem, 5vh, 4rem);
      
      align-self: flex-end;
      height: fit-content;

      &__projected-start {
        grid-area: projected-start;
      }

      &__projected-end {
        grid-area: projected-end;
      }

      &__scheduled-start {
        grid-area: scheduled-start;
      }

      &__scheduled-end {
        grid-area: scheduled-end;
      }

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

      &__value {
        margin-top: 0.5rem;
        font-size: $timer-value-size;
        color: var(--secondary-color-override, $viewer-secondary-color);
        letter-spacing: 0.05em;
        line-height: 0.95em;

        &--delayed {
          color: $delay-color;
        }
      }
    }
  }
}