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

/* The styles in this file are a stripped down version of the timer */
.pip-timer {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* reset */
  overflow: hidden;
  width: 100%; /* restrict the page width to viewport */
  height: 100vh;
  transition: opacity 0.5s ease-in-out;

  font-family: $viewer-font-family;
  background: $viewer-background-color;
  color: $viewer-color;
  gap: $view-element-gap;

  display: flex;
  flex-direction: column;

  &--finished {
    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
    outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
    transition: $viewer-transition-time;
  }

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

  .timer-container {
    flex: 1;
    align-content: center;
    justify-self: center;
    align-self: center;

    width: 100%;
    overflow: hidden;

    .timer {
      opacity: 1;
      font-family: $viewer-font-family;
      color: var(--timer-colour, $ui-white);
      line-height: 0.9em;
      text-align: center;
      letter-spacing: 0.05em;
      font-weight: 600;

      transition-property: font-size;
      transition-duration: $viewer-transition-time;

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

      // use a class instead of a phase, to allow suppressing overtime style
      &--finished {
        color: var(--timer-overtime-color-override, $timer-finished-color);
      }

      &[data-phase='warning'] {
        color: var(--timer-colour, var(--timer-warning-color-override));
      }
      &[data-phase='danger'] {
        color: var(--timer-colour, var(--timer-danger-color-override));
      }
      &[data-type='none'] {
        transition: 1s;
        opacity: 0;
      }
    }
  }

  .secondary {
    white-space: nowrap;
    max-height: 100%;
    height: auto;

    margin-top: 0.125em;
    padding-block: 0.125em;

    font-weight: 600;
    text-align: center;
    color: $external-color;
    letter-spacing: 0.5px;
    line-height: 1;
    transition-property: opacity, height;
    transition-duration: $viewer-transition-time;
    border-top: 1px solid color-mix(in srgb, $external-color 10%, transparent);

    &--hidden {
      opacity: 0;
      height: 0;
    }
  }

  .progress-container {
    width: 100%;
    margin: 0 auto;
    opacity: 1;
    transition: $viewer-transition-time;

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

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

  .message-overlay {
    position: fixed;
    inset: 0;
    padding: 2vw;
    background: $viewer-background-color;
    opacity: 0;
    transition: opacity $viewer-transition-time;

    &--active {
      z-index: $zindex-floating;
      opacity: 1;
    }
  }

  .message {
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;

    color: $viewer-color;
    text-align: center;
    font-weight: 600;
  }
}