////////////////////////////////
//       Mobile First
////////////////////////////////
.affix-header {
    width: 100%;
    z-index: 999;
}

.c-header {
    height: $header-height;
    min-height: $header-height;
    width: 100%;

    .header-fixed & {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .header-inner, .header-menu, .nav-header, .nav-header .nav-item {
        height: inherit;
    }

    //margin: 0;
    //padding: 0;
    //border: 0;

    .logo {
        display: block;
        height: $header-height;
        width: auto;
        margin-left: $page-gutter-size;
        float: left;

        &.logo-text {
            padding: $header-logo-text-padding;

            > h1 {
                font-size: $header-logo-text-font-size;
                color: $header-logo-text-color;
                margin: 0;
                cursor: pointer;
            }
        }
    }

    // @TODO: Replace with proper icon that is color-able
    .sidebar-toggle-desktop, .sidebar-toggle-mobile {
        margin: 7px 7px;
        width: 24px;
        height: 20px;
        background-size: 87%;
        // http://www.flaticon.com/free-icon/menu_149187
        //background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxyZWN0IHk9IjMiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyIiBmaWxsPSIjRkZGRkZGIi8+Cgk8cmVjdCB5PSIxNyIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIiIGZpbGw9IiNGRkZGRkYiLz4KCTxyZWN0IHk9IjMxIiB3aWR0aD0iNTAiIGhlaWdodD0iMiIgZmlsbD0iI0ZGRkZGRiIvPgoJPHJlY3QgeT0iNDUiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyIiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
        cursor: pointer;

        .sidebar-hidden & {
            display: none;
        }
    }
    .sidebar-toggle-mobile {
        float: right;
        margin: 15px 20px 0 0;
    }
    .sidebar-toggle-desktop { display: none }

    .header-menu {
        display: block;
        clear: both;
        float: none;
    }

    .nav-header {

        .nav-item {
            float: left;
            margin: 0 0 0 1px;
        }

        .nav-item > .nav-link {
            display: block;
            //color: $header-item-link-color;
            //background: $header-item-bg-color; //lighten($header-bg-color, 20);
            height: $header-height;
            font-weight: 300;
            padding: 15px 20px;
            text-align: center;

            &.nav-link-icon {
            }

            &.nav-link-split {
                position: relative;
                padding-top: 20px;
                text-transform: none;

                .nav-link-top {
                    height: $header-height / 3;
                    width: 100%;
                    display: block;
                    position: absolute;
                    //color: $header-item-split-top-color;
                    //background: $header-item-split-top-bg-color;
                    top: 0;
                    left: 0;
                    line-height: 16px;
                    padding: 0 5px;
                    font-size: 11px;
                    text-transform: lowercase;
                    text-align: left;
                }
            }

        }

        @include media-breakpoint-up(md) {

            .nav-link {
                margin: 0;
            }

        }
    }
}

////////////////////////////////
//       Desktop
////////////////////////////////
@include media-breakpoint-up(md) {
    .c-header {
        //padding: 0 $page-gutter-size;

        .logo {
            display: inline-block;
            width: $sidebar-width;
            > h1 {
                display: inline-block;
            }
        }
        .sidebar-toggle-mobile { display: none }
        .sidebar-toggle-desktop { display: block; float: right; }

        .header-menu {
            padding: 0;
            float: right;
            clear: none;
        }
    }
}