sparkletown/sparkle

@import "scss/constants.scss";

$video-container-height: 500px;
$preview-zoom: 0.7;
$preview-screen--height: 450px;

.ScreeningRoomPreview {
  overflow: hidden;
  height: $preview-screen--height;
  max-height: 50%;
  margin: $spacing--lg auto;
  position: relative;

  width: 80%;
  background: black;

  &__container {
    width: 100%;
    height: 100%;
  }

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

  &__search-field {
    width: 50%;
    margin: 0 auto;
    zoom: $preview-zoom;
  }

  .ScreeningVideoPreview {
    zoom: $preview-zoom;
  }

  &__category {
    padding: $spacing--md;
    font-size: $font-size--md;
    cursor: pointer;
  }

  &__subcategory {
    padding: $spacing--sm;
    font-size: $font-size--sm;
    cursor: pointer;
  }

  &__subcategories {
    display: flex;
    justify-content: center;
    margin-bottom: $spacing--sm;
    flex-wrap: wrap;
    zoom: $preview-zoom;
  }

  &__categories {
    display: flex;
    justify-content: center;
    margin-bottom: $spacing--sm;
    flex-wrap: wrap;
    zoom: $preview-zoom;
  }

  &__video-previews {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}