Videomodal

$easing: $transition-in-default;
$time: $transition-time-default;
$time-short: $transition-time-200;
$time-long: $transition-time-500;
.VideoModal {
    @include Elevation("Modal", $withZindex: true);
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    margin: auto;
    overflow: hidden;
    flex-direction: column;
    background: get-color(neutral, 0);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    pointer-events: none;
    &._small {
        max-width: 640px;
        max-height: 432px;
    }
    &._medium {
        display: block;
        width: 960px;
        max-width: 100%;
        max-height: 100%;
        .VideoModal-body {
            height: auto;
        }
        .VideoModal-x._overlay {
            top: 10px;
            height: 0;
            line-height: 0;
        }
    }
    &._full {
        width: 100vw;
        height: 100vh;
    }
    &-x {
        display: inline-block;
        padding: 10px 0 10px 10px;
        margin-left: 20px;
        font-size: 50px;
        font-weight: 300;
        line-height: .5;
        color: get-color(neutral, 300);
        vertical-align: middle;
        cursor: pointer;
        &::before {
            content: "×";
        }
        &:hover {
            color: get-color(neutral, 500);
        }
        &._overlay {
            position: relative;
            z-index: 1;
            padding: 0;
            margin-left: 0;
            flex-basis: 0;
            color: rgba(get-color(neutral, 1000),.5);
            &::before {
                position: absolute;
                top: 15px;
                right: 15px;
            }
        }
    }
}
.VideoModal-header {
    @include clearfix; // IE9 fallback
    @include Elevation("Navbar", $withZindex: true);
    display: flex;
    padding: 5px 20px;
    flex: 0 0 auto;
    align-items: center;
    background: theme-color(background);
    transition: all $time-long $easing;
    transform: translateY(-100%);
    will-change: transform;
    &-left {
        flex: 1 1 auto;
    }
    &-right {
        flex: 0 1 auto;
    }
    h2 {
        @include font-size-lead;
        margin-bottom: 0;
    }
    &._bottom {
        padding: .75rem 20px;
        transition: none;
        transform: translateY(0);
    }
}
.VideoModal-body {
    display: flex;
    overflow-y: auto;
    flex: 1 1 auto;
    flex-direction: column;
    background: theme-color(background);
    > * {
        width: 100%;
        flex: 1 1 auto;
    }
}
.VideoModal-footer {
    padding: 20px;
    p {
        margin-top: 0;
    }
}
.VideoModal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    > * {
        transition: opacity $time-short $easing;
    }
    .VideoModal-header {
        transition: all $time-long $easing $time-short;
        transform: translateY(0);
    }
}
.MaterialModal-thumbnail {
    @include Elevation("Card", $hasShadow: false, $withZindex: true);
    display: block;
    transition: box-shadow $time-long $easing, opacity $time-long $easing, transform $time-long $easing $time-short, z-index 0s linear $time-long;
    will-change: background-color, box-shadow, opacity, transform;
    &._hidesiblings ~ * {
        opacity: 1;
        transition: all $time $easing, opacity $time-long $easing $time-long;
    }
    > * {
        transition: all $time-long $easing;
    }
    &.is-active {
        @include Elevation("Modal-overlay", $withZindex: true);
        background-color: get-color(neutral, 0);
        transition: opacity $time-short $easing, transform $time-long $easing;
        > * {
            opacity: 0;
            transition: none;
        }
        &._hidesiblings ~ * {
            opacity: 0;
        }
    }
    &._small {
        width: 480px;
        height: 270px;
    }
}
.MaterialModal-trigger {
    cursor: pointer;
    transition: all $time-long $easing;

    will-change: background, position, transform;
    &:hover {
        @include Elevation("Button-hover", $shouldTranslate: true);
    }
    &:active {
        @include Elevation("Button-pressed", $shouldTranslate: true);
    }
}
@media #{$mobile-media} {
    .VideoModal {
        &-button {
            display: none;
        }
        &._medium {
            max-height: none;
            background: transparent;
        }
    }
}
.Modal-enter._top {
    opacity: 0;
    transition: all $time-long $easing;
    transform: translate(-50%, -40%);
    &.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }
}
.Modal-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgba(get-color(neutral, 1000),.5);
    opacity: 0;
    transition: opacity $time-long $easing;
    will-change: opacity;
    body.Modal-open & {
        @include ZIndex("Sidebar-overlay");
        overflow-y: scroll;
        opacity: 1;
    }
}