sparkletown/sparkle

@import "scss/constants";

$control-buttons-padding-right: 80px;

.PosterPage {
  padding: $announcement-banner-height $spacing--xl 0;

  &__header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    padding: $spacing--xs;

    &--middle-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;

      font-size: $font-size--lg;
      font-weight: $font-weight--500;
    }

    &--right-cell {
      display: flex;
      justify-content: flex-end;
      padding-right: $control-buttons-padding-right;
    }
  }

  &__header-info {
    display: flex;
    justify-content: space-between;
  }

  &__more-info-url {
    display: inline;
    text-align: right;
    font-size: $font-size--sm;
    margin-bottom: $spacing--sm;
    font-weight: normal;
  }

  &__title {
    margin: 0 0 $spacing--md;
    text-align: center;
    font-size: $font-size--lg;
    font-weight: $font-weight--600;
  }

  &__author-box {
    font-size: $font-size--md;
    font-weight: normal;
    margin: 0 0 $spacing--md;
  }

  &__description {
    font-size: $font-size--sm;
    font-weight: normal;
    margin: 0 0 $spacing--md;
  }

  &__description-secondary {
    font-size: $font-size--sm;
    font-weight: normal;
    margin: 0 0 $spacing--md;
  }

  &__categories {
    display: flex;
  }

  &__content {
    display: grid;
    grid-template-columns: $video-participant-optimal-width 1fr 1fr $video-participant-optimal-width;
    grid-template-rows: repeat(auto-fill, $video-participant-optimal-height);
    gap: $spacing--xs;

    grid-template-areas:
      ".  iframe iframe ."
      ".  iframe iframe ."
      ".  iframe iframe ."
      ".    .     .     ."
      "listeners listeners listeners listeners";
  }

  &__control--stop {
    background-color: var(--danger--under);
    color: $accent--over;
    opacity: 0.8;
  }

  &__iframe {
    grid-area: iframe;
    width: 100%;
    // Take exactly the same amount of space as 3 participants would take
    height: calc(
      3 * #{$video-participant-optimal-height} + 2 * #{$spacing--xs}
    );
    border: none;
  }

  &__video-participant {
    width: $video-participant-optimal-width;
    height: $video-participant-optimal-height;
  }

  &__join-video-participants-btn {
    width: $video-participant-optimal-width;
    height: $video-participant-optimal-height;

    display: flex;
    justify-content: center;
    align-items: center;

    color: $content--over;
    font-size: $font-size--xxl;

    cursor: pointer;

    border: dashed $secondary--live thin;
    border-radius: $border-radius--md;

    &:hover {
      background-color: $secondary--live;
    }
  }

  // Increase specificity to override third-party lib styles
  div.PosterPage__listeners {
    grid-area: listeners;
    margin-left: unset;
    margin-right: unset;
    margin-bottom: $spacing--lg;
  }
}