$web-video: true !default;
@if $web-video {

    // Video
    // Works specifically with our video includes

    .video {
        font-family: $font-text-secondary;
        margin: 0 0 $line-height-default 0;
        position: relative;

        img {
            width: 100%;
        }

        .video-link {
            display: block;
            height: 100%;
        }

        .video-description {
            margin-top: $line-height-default;
            text-align: left;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .video-wrapper {
            position: relative;

            // Create placeholder with 16:9 aspect ratio
            // when there is no image to display
            &.video-no-image {
                aspect-ratio: 16/9;
                background-color: $color-accent;
                border-radius: $box-border-radius;
                width: 100%;
            }

            // JS will add an iframe here; when it does:
            &.contains-iframe {
                float: none;
                clear: both;
                width: 100%;
                aspect-ratio: 16/9;


                iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        // Don't indent a paragraph after a video.
        & + p {
        	text-indent: 0;
        }

        .video-options {
            margin-top: 1rem;
            position: relative;

            .video-options-button {
                @include button();
                display: block;
                margin: 0 auto;
            }

            .video-options-content {

                // Always visible by default
                @include dialog-styles();
                background-color: $color-background;
                margin-top: 1rem;

                // When triggered by JS, display as 'dropdown'
                &.js-video-options-content {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: 1rem;
                    visibility: hidden;

                    &.js-video-options-content-visible {
                        visibility: visible;
                        z-index: 1;
                    }
                }

                > :last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}
