$sidebar-color-main: $oui-color-zodiac; $sidebar-color-secondary: $oui-color-rhino;

@keyframes openNavEntry {

from {
    left: -40%;
    opacity: 0;
}
to {
    left: 0;
    opacity: 1;
}

}

@keyframes selectedNavEntry {

from {
    transform: rotate(0);
}
to {
    transform: rotate(90deg);
}

}

.navbar {

min-height: 0;
padding: 0;
border: none;
margin-bottom: 0;

&__toggle {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: $space-l3;
    padding: $space-base;
    border: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
    background-color: $sidebar-color-main;
    text-align: left;
}

&__icon {
    display: inline-block;
    width: $space-base;
    height: $space-base;
    margin-right: $space-base;
    position: relative;

    &--active {
        .navbar__icon-bar {
            &--top {
                transform: rotate(45deg) translate(1px, 1px);
            }
            &--middle {
                transform: scaleX(0) translateY(-50%);
            }
            &--bottom {
                transform: rotate(-45deg) translate(1px, -1px);
            }
        }
    }

    &-bar {
        display: block;
        width: 100%;
        height: 2px;
        background-color: white;
        border-radius: 1px;
        position: absolute;
        left: 0;
        transition: all .2s ease-in;

        &--top {
            top: 0;
            transform: rotate(0) translate(0, 0);
            transform-origin: top left;
        }

        &--middle {
            top: 50%;
            transform: scaleX(1) translateY(-50%);
            transform-origin: center;
        }

        &--bottom {
            bottom: 0;
            transform: rotate(0) translate(0, 0);
            transform-origin: bottom left;
        }
    }
}

&__title {
    color: white;
}

&__entries,
&__subentries {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

&__entries {
    width: 80%;
    height: calc(100% - #{$space-l3});
    position: fixed;
    top: 0;
    left: -80%;
    z-index: 10;
    background-color: $sidebar-color-main;
    overflow-y: auto;
    transition: left .2s;

    &--active {
        left: 0;
    }
}

&__subentries {
    height: 0;
    position: relative;
    overflow-y: auto;
    background-color: $sidebar-color-secondary;

    &--active {
        height: auto;

        .navbar__link--lvl-2 {
            animation: openNavEntry .35s ease-in-out;
            left: 0;
            opacity: 1;
        }
    }
}

&__entry {
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

&__link {
    display: block;
    padding: $space-base;
    position: relative;
    color: white;

    &--lvl {
        &-2 {
            padding-left: $space-l2;
            position: relative;
            left: -40%;
            opacity: 0;
        }
    }

    &:hover,
    &:active,
    &:focus {
        color: white;
        text-decoration: none;
        background-color: $oui-color-turquoise-a15;
    }

    &-chevron {
        margin-right: .8rem;
        font-size: .8rem;
        color: white;
        opacity: .6;
        transform: rotate(0);

        &--active {
            transform: rotate(90deg);
            animation: selectedNavEntry .15s ease-in;
        }
    }

    &-active {
        font-weight: 600;

        &-icon {
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);

            &::after {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border: solid $space-s1 transparent;
                border-right-color: white;
            }
        }
    }
}

}

@media screen and (min-width: $screen-md){

.navbar {
    height: 100%;
    position: fixed;

    &__entries {
        position: static;
        width: 100%;
        height: 100%;
    }

    &__title {
        display: block;
        box-sizing: border-box;
        padding: $space-base $space-base $space-l2 $space-base;
        text-align: center;
        font-weight: 600;
    }
}

}