.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: 2;
// 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%;
    min-width: 100%;
    &.slided {
        left: 100%;
    }
};
// Container
.bw-front-container {
    margin-left: $spacing-unit;
    margin-right: $spacing-unit;
    padding: $spacing-unit;
}

}