/**
 * Override other styles to support vertical filmstrip mode.
 */
.vertical-filmstrip {
    .filmstrip {
        align-items: flex-end;
        box-sizing: border-box;
        display: flex;
        flex-direction: column-reverse;
        height: 100%;

        /**
         * Hide videos by making them slight to the right.
         */
        .filmstrip__videos {
            right: 0;
            transition: right 2s;

            &.hidden {
                bottom: auto;
                right: -196px;
            }
        }

        #filmstripLocalVideo {
            height: auto;
            justify-content: flex-end;
        }

        /**
         * Remove unnecssary padding that is normally used to prevent horizontal
         * filmstrip from overlapping the left edge of the screen.
         */
        #filmstripLocalVideo,
        #filmstripRemoteVideos {
            padding: 0;
        }

        #filmstripRemoteVideos {
            display: flex;
            flex: 1;
            flex-direction: column;
            height: auto;
            overflow-x: hidden !important;

            .remote-videos-container {
                flex-direction: column;
            }
        }

        /**
         * Rotate the hide filmstrip icon so it points towards the right edge
         * of the screen.
         */
        &__toolbar {
            transform: rotate(-90deg);
        }

        /**
         * Move the remote video menu trigger to the bottom left of the
         * video thumbnail.
         */
        .remotevideomenu {
            bottom: 0;
            left: 0;
            top: auto;
            right: auto;
            transform: rotate(-90deg);
        }

        #remoteVideos {
            flex-direction: column-reverse;
            height: 100%;
        }

        .videocontainer {
            /**
             * Move status icons to the bottom right of the thumbnail.
             */
            &__toolbar {
                text-align: right;

                .toolbar-icon {
                    float: none;
                }
            }
        }
    }

    /**
     * For video labels that display on the top right to adjust its position as
     * the filmstrip itself or filmstrip remote videos appear and disappear.
     */
    .video-state-indicator {
        transition: right 2s;

        &.with-filmstrip {
            &#recordingLabel {
                right: 200px;
            }

            &#videoResolutionLabel {
                right: 150px;
            }
        }
    }

    /**
     * Move toastr closer to the bottom of the screen and move left to avoid
     * overlapping of videos when they are configured at default height.
     */
    #toast-container {
        &.notification-bottom-right {
            bottom: 25px;
            right: 130 + 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
        }
    }
}