sparkletown/sparkle

@import "scss/constants.scss";
@import "../VenueLandingPage/VenueLandingPage.scss";

$tab-item-height: 35px;
$tab-item-image-size: 100px;
$tab-item-room-height: 170px;
$tab-item-room-width: 180px;

// hide landing page content
.venue-entrance-experience-container {
  height: 0;
}

.EmergencyView {
  background-color: opaque-black(0.8);
  display: flex;
  flex-direction: column;
  z-index: z(emergency-content);
  position: absolute;
  height: calc(100vh - #{$reserved-page-height});
  width: 100%;

  overflow: auto;

  background-attachment: fixed;
  background-size: cover;
  background-position: center;

  &__main {
    margin-top: -($spacing--xxl * 2);
    padding: $spacing--xxl * 2 $tab-item-height 0px $tab-item-height;
  }

  &__weekdays {
    display: flex;
    flex-wrap: wrap;
    background-color: opaque-black(0.8);
    margin: 0 (-$tab-item-height);
    padding: $spacing--xxl;

    &-column {
      width: 33%;
      display: flex;
      flex-direction: column;
      padding-left: $spacing--xxl * 3;
      cursor: default;

      .ScheduleItem {
        cursor: pointer;
      }
    }
  }

  &__tabs {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: $font-size--xl;
    font-weight: 900;
    margin: 0 auto;
    cursor: pointer;
    z-index: 15;
    background-color: opaque-black(0.8);
  }

  &__item {
    height: $tab-item-height;
    margin: $spacing--md;

    &--active {
      border-bottom: $border-radius--xs solid $accent--under;
    }
  }

  &__venue {
    margin: $spacing--lg;
    font-weight: 900;
    font-size: $font-size--lg;
  }

  &__content {
    display: flex;
    flex-wrap: wrap;
    background-color: opaque-black(0.8);
    margin: (-$font-size--xl) (-$tab-item-height) 0px (-$tab-item-height);
    padding: $font-size--xl $spacing--xxl $tab-item-height $spacing--xxl;
  }

  &__room {
    min-height: $tab-item-room-height;
    width: $tab-item-room-width;
    border-radius: $border-radius--md;
    background-color: opaque-white(0.2);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin: $spacing--lg;
    cursor: default;
    padding: $spacing--sm;
  }

  &__body {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    text-align: center;

    &-image {
      max-width: $tab-item-image-size;
      max-height: $tab-item-image-size;
      padding: $spacing--xs;
    }
  }

  &__info {
    display: flex;
    width: 90%;

    &-status {
      display: flex;
      background-color: $accent--under;
      border-radius: $border-radius--md;
      padding: $spacing--sm;
      width: $spacing--xxl * 2;
      height: $spacing--xxl;
      align-items: center;
      justify-content: center;
    }

    &-audience {
      display: flex;
      background-color: opaque-white(0.2);
      border-radius: $border-radius--md;
      padding: $spacing--sm;
      width: $spacing--xxl * 2;
      height: $spacing--xxl;
      justify-content: space-around;
      margin-left: auto;

      span {
        font-size: $font-size--sm;
      }
    }
  }
}