sparkletown/sparkle

@import "scss/constants";

$border-radius: 22px;
$spacing: 20px;
$text-width: 50rem;
$venue-logo-size: 180px;

.ExternalRoom {
  min-height: 100%;
  padding-bottom: $spacing--xxl;
  display: flex;
  background-position: center;
  background-size: cover;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  &__container {
    margin-top: $spacing--xl;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: z(external-message);
  }

  &__link {
    max-width: $text-width;

    text-align: center;
    overflow-wrap: break-word;
  }

  &__message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: $spacing--xxl 0;
    font-family: Rubik;
    font-weight: $font-weight--300;
    font-size: $font-size--xl;
  }

  &__content {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    border-radius: $border-radius;
    background: $secondary--live;
  }

  &__venue-container {
    padding: $spacing;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  &__venue-title {
    font-weight: $font-weight--700;
    font-size: $font-size--xxl;
  }

  &__venue-subtitle {
    font-weight: $font-weight--300;
    font-size: $font-size--lg;
  }

  &__venue-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: $spacing;
  }

  &__venue-logo {
    @include square-size($venue-logo-size);
    flex-shrink: 0;
    border-radius: $border-radius;
    background-color: $secondary--dark;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  &__venue-description {
    padding: $spacing--sm $spacing;

    background: $secondary--live;
    border-radius: $border-radius;

    max-height: 25vh;
    max-width: $text-width;
    overflow-y: auto;

    font-size: $font-size--md;
    font-weight: $font-weight--400;
    color: opaque-white(0.6);
    overflow-wrap: break-word;
  }

  &__userlist {
    margin: $spacing;
    align-self: flex-start;
  }

  .UserList__avatars {
    justify-content: flex-start;
  }
}