// Variables
$vertical-menu-width: 150px !default;
$vertical-menu-background: $color-secondary !default;
$vertical-menu-branding-background: $color-primary !default;
$vertical-menu-branding-text-color: $white !default;
$vertical-menu-active-text-color: $white !default;

.vertical-menu {
    transform: translate3d(0, 0, 0);
    margin-left: -$vertical-menu-width;
    width: $vertical-menu-width;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: $vertical-menu-background;
    overflow-y: auto;
    font-size: 18px;
    -webkit-overflow-scrolling: touch;
}
.vertical-menu a,
.vertical-menu-category-title {
    color: $grey;
    border: none;
    padding: 0.6em 0 0.6em 0.6em;
}
.vertical-menu-category-title {
    color: $grey-dark;
}

.vertical-menu .pure-menu,
.vertical-menu .pure-menu ul {
    border: none;
    background: transparent;
}
.vertical-menu .pure-menu ul,
.vertical-menu .pure-menu .menu-item-divided {
    border-top: 1px solid $grey-darkest;
}
.vertical-menu .pure-menu li a:hover,
.vertical-menu .pure-menu li a:focus,
.vertical-menu .pure-menu .vertical-menu-category-title:focus,
.vertical-menu .pure-menu .vertical-menu-category-title:hover {
    background: $grey-darkest;
}
.vertical-menu .pure-menu-selected,
.vertical-menu .pure-menu-heading {
    background: $vertical-menu-branding-background;
}
.vertical-menu .pure-menu-selected a {
    color: $vertical-menu-active-text-color;
}
.vertical-menu .pure-menu-heading {
    font-size: 110%;
    font-weight: bold;
    color: $vertical-menu-branding-text-color;
    margin: 0;
}

.vertical-menu .pure-menu-icon {
    width: 25px;
    display: inline-block;
    text-align: center;
    margin-right: 6px;
    margin-left: -5px;
    position: relative;
    top: 1px;
}