sparkletown/sparkle

@import "scss/constants";

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

.ArtPiece {
  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(art-content);
  }

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

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

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