.bw-front {
    // No transition
    transition: none;

    // Positioning and sizing
    position: absolute;
    top: 0%;
    left: $desktop-menu-size;
    right: 0%;
    min-height: 100%;
    &.slided {
        left: $desktop-menu-size;
    }

    /* Setting a z-index of 0 to so that
     * this is in front of the back layer
     * with a z-index of -1 (see _back.scss) */
    z-index: 0;

    // Only vertical scrolling
    overflow-x: hidden;

    // Coloring
    color: black;
    background-color: $white-color;
    border-color: $back-color;

    // Shadow
    box-shadow: -2pt 0pt 8pt darken($back-color, 33%);

    // Mobile
    @include on-mobile {
        // Animated transition
        transition: left 0.5s ease-in-out;

        // Positioning and slide handling
        top: 0%;
        left: 0%;
        right: 0%;
        left: 0%;
        min-width: 100%;
        &.slided {
            left: 100%;
        }
    };

    // Container
    .bw-front-container {
        margin-left: $spacing-unit;
        margin-right: $spacing-unit;
        padding: $spacing-unit;
    }
}