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

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

  background: var(--background-color-override, $viewer-background-color);
  height: 100vh;
  color: var(--color-override, $viewer-color);
  display: grid;
  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
  grid-template-rows: auto 1fr auto minmax(25vh, auto);
  grid-template-areas:
    ' clck clck .... .... ....'
    ' timr timr timr timr timr'
    ' prog prog prog prog prog'
    ' now  now  .... next next';
  gap: 1vw;
  padding: 1vw;

  &--finished {
    border: 1vw solid $timer-finished-color;
  }


  /* =================== TITLES ===================*/

  .event {
    background-color: var(--outdent-background-color-override, $viewer-outdent-bg-color);
    padding: 1vh 2vw;
    border-radius: 1vw;
    max-width: 100%;

    &.now {
      grid-area: now;

    }
    &.next {
      grid-area: next;
    }
  }

  /* =================== MAIN ===================*/

  .timer-container {
    grid-area: timr;
    justify-self: center;
    align-self: center;
    color: white;

    .end-message {
      text-align: center;
      font-size: 12vw;
      line-height: 18vw;
      font-weight: 600;
      color: $timer-finished-color;
      padding: 0;
    }

    .timer {
      opacity: 1;
    }
  }

  .progress-container {
    grid-area: prog;
    width: 80%;
    margin: 0 auto;
    opacity: 1;
    transition: 0.5s;
  }

  .timer--paused,
  .progress-container--paused {
    opacity: 0.6;
    transition: 0.5s;
  }


  /* =================== OVERLAY ===================*/

  .message-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $viewer-overlay-bg-color;
    z-index: -1;
    opacity: 0;
    transition: 0.5s;

    &--active {
      opacity: 1;
      transition: 0.5s;
      transition-property: opacity;
      z-index: 2;
    }
  }

  .message {
    width: inherit;
    padding: 2vw;
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 15vw;
    line-height: 30vh;
    text-align: center;
    font-weight: 600;
  }

  /* =================== MAIN ===================*/

  .clock-container {
    grid-area: clck;
    padding: 1vh 2vw;

    .label {
      font-size: 1.3vw;
      color: var(--accent-color-override, $accent-color);
    }

    .clock {
      font-family: 'Open Sans', sans-serif;
      font-size: 4vw;
      letter-spacing: 0.4vw;
    }
  }

}