[data-component='Filmstrip'] {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  > .active-peer {
    width: 95vmin;
    padding: 10vmin 1vmin 1vmin 1vmin;

    > [data-component='Peer'] {
      border: 5px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
    }
  }

  > .filmstrip {
    display: flex;
    background: rgba(0, 0, 0 , 0.5);
    width: 100%;
    overflow-x: auto;
    padding: 1vmin 0;
    margin-top: auto;

    > .film {
      height: 15vmin;
      flex-shrink: 0;        
      padding-left: 1vmin;

      &:last-child {
        padding-right: 1vmin;
      }

      > .film-content {
        height: 100%;
        width: 100%;
        border: 1px solid rgba(255,255,255,0.15);

        > [data-component='Peer'] {
          max-width: 15vmin * (4 / 3);
          cursor: pointer;

          &.screen {
            max-width: 15vmin * (2 * 4 / 3);
            border: 0;
          }
        }
      }

      &.active {
        > .film-content {
          border-color: #FFF;
        }
      }

      &.selected {
        > .film-content {
          border-color: #377EFF;
        }
      }
    }
  }
}