sparkletown/sparkle

@import "scss/constants";

$info-bar-width: 96px;
$chat-bar-width: 96px;
$chat-wrapper-height: 260px;

.ViewingWindow {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;

  &__title-sidebar {
    font-size: $font-size--xl;
    font-weight: $font-weight--700;
  }

  &__short-description-sidebar {
    font-size: $font-size--lg;
    font-weight: $font-weight--700;
  }

  &__rendered-markdown {
    font-size: $font-size--md;
  }

  &__content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    margin: 0;
    padding: 0 $chat-bar-width 0 $info-bar-width;
    overflow: hidden;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    z-index: z(viewing-window-content);
  }

  &__aspect-container {
    display: grid;
    place-items: center;
    height: 100%;
    padding: $spacing--xl;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
    z-index: z(viewing-window-content);
  }

  &__youtube-video {
    height: 100%;
    width: 100%;
  }

  &__video-chat-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: $spacing--xs;
    margin: 0;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    height: $chat-wrapper-height;

    .participant-container {
      width: unset;
      flex-grow: 0;
      flex-shrink: 0;
      border-radius: $spacing--xl;

      .VideoParticipant {
        max-width: 200px;
        max-height: 200px;
        height: 100%;
        padding: 0;
        margin: 0;

        display: flex;
        border-radius: $border-radius--xl;

        video {
          border-radius: $border-radius--xl;
          width: 100%;
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
}