.fullscreen-container {
    flex-grow: 1;
    margin-right: 12px;
}

.fullscreen-toggle {
    background: none;
    border: none;
    cursor: pointer;
    height: 28px;

    @include icon(before, zoom-in2);

    text-indent: 200%;
    overflow: hidden;

    clear: both;
    float: right;

    position: relative;
    top: 1px;
    right: 12px;

    z-index: 100;
}

html:not(.is-fullscreen-immediately) {
    #top-bar,
    #navigation-level-1,
    #navigation-level-2 {
        transition: top var(--transition-duration), margin-bottom var(--transition-duration), opacity var(--transition-duration);
    }
    #sidebar {
        transition: left var(--transition-duration), margin-right var(--transition-duration), opacity var(--transition-duration);
    }
    #main-footer {
        transition: opacity var(--transition-duration), max-height var(--transition-duration), padding var(--transition-duration);
    }
}

html.is-fullscreen {
    #top-bar,
    #navigation-level-1,
    #navigation-level-2 {
        margin-bottom: -70px;
        opacity: 0;
        top: -142px;
    }

    #sidebar {
        left: -300px;
        margin-right: -270px;
        opacity: 0;
    }

    #main-footer {
        opacity: 0;
        max-height: 0;
        padding: 0;
    }

    .fullscreen-toggle.unfullscreen {
        display: block;
    }
}