//
// Sidebar navigation
// --------------------------------------------------

$ft-nav-width: 25rem;
$ft-nav-margin: 2rem;

// Layout
.ft-nav-container {
    padding: 2rem;
    transition: padding-left 0.5s ease;
}
.ft-nav-container.ft-nav-enabled {
    padding-left: $ft-nav-width + $ft-nav-margin;
}

.ft-nav {
    z-index: 1000;
    position: fixed;
    height: 100%;
    width: $ft-nav-width;
    left: -$ft-nav-width;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    transition: all 0.5s ease;
}
.ft-nav.ft-nav-enabled {
    left: 0;
}

@media(min-width:768px) {
    .ft-nav-container {
        padding-left: $ft-nav-width + $ft-nav-margin;
    }
    .ft-nav {
        left: 0;
    }
}

// Style
.ft-nav {
    background: $ft-color-gray-darkest;
    color: #fff;

    span.icon {
        font-size: 1.5em;
        margin-right: 0.4em;
    }
}
.ft-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ft-nav ul li {
    margin: 0;
    padding: 0;
}
.ft-nav ul li a {
    border-left: 5px solid transparent;
    color: $ft-color-gray-light;
    background: $ft-color-gray-dark;
    padding: 1rem;
    display: block;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    &:hover {
        border-left: 5px solid $ft-color-blue;
        color: $ft-color-white;
        background: $ft-color-gray-darker;
        text-decoration: none;
    }
}
.ft-nav li>ul {
}
.ft-nav li>ul li a {
    color: $ft-color-gray-lighter;
    background: $ft-color-gray;
    padding-left: 3em;
    text-transform: none;

    &:hover {
        color: $ft-color-white;
        background: $ft-color-gray;
    }
}
.ft-nav ul li a.ft-nav-active {
    border-left: 5px solid $ft-color-red;
    color: $ft-color-white;
    background: $ft-color-gray-darker;
}
.ft-nav li>ul li a.ft-nav-active {
    color: $ft-color-white;
    background: $ft-color-gray;
}

// Title/logo
.ft-nav-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}
.ft-nav-brand {
    font-family: 'Lobster', cursive;
    font-size: 2em;
    text-shadow: 2px 5px 0 $ft-color-gray;
}

// Footer
.ft-nav-auth {
    color: $ft-color-gray;
    font-size: 0.8em;
    text-align: center;
    margin: 2em 0;
}