@mixin navbar() {
    &--navbar{
        white-space: nowrap;
        display: flex;
        justify-content: space-between;
        background-color: #999999;
        @media screen and (max-width: "800px") {
            flex-direction: column-reverse;
        }
        &__nav{
            display: flex;
            flex-wrap: wrap;
        }
        &__options{
            display: flex;
        }
        &__item{
            display: flex;
            flex-grow: 1;
            position: relative;
            vertical-align: middle;
            overflow: hidden;
            &:before{
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                pointer-events: none;
                background-color: rgba(0,0,0,.15);
            }
            &--button{
                cursor: pointer;
                opacity: .8;
                background: none;
                border: none;
                color:#fff;
                padding: 3px 5px;
                &__title{
                    text-align: left;
                    flex-grow: 1;
                    min-width: 80px;
                }
                &:hover,&:focus{
                    opacity: 1;
                    background-color: rgba(0,0,0,.15);
                }
            }
        }
    }
}