.fullscreen {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;

    &, * {
        will-change: transform, opacity;
    }

    // Photo
    &__image {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        opacity: 0;
        transform: scale(1.1);
        background: $color-primary;
        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;

        img {
            position: relative;
            z-index: 200;
            display: block;
            height: 100%;
            width: auto;
            margin: 0 auto;
        }

        // Open
        &.is-open {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }
    }

    // Controls
    &__close {
        position: fixed;
        z-index: 201;
        bottom: 24px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        opacity: 0;
        transform: scale(1.1) translateY(24px) translateZ(0);
        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;

        // Visible state
        &.is-visible {
            opacity: 1;
            transform: scale(1) translateY(0) translateZ(0);
        }
    }

    // Loading
    &__loading {
        position: absolute;
        z-index: 202;
        top: 50%;
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) translateZ(0);
        transform-origin: 50% 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        background-color: $color-primary;
        border-radius: 100%;
        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;

        // Hidden state
        &.is-hidden {
            transform: scale(1.05) translate(-50%, -50%) translateZ(0);
            opacity: 0;
        }
    }
}