.page-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: #FFF;
    display: table;
    width: 100%;
    border-width: 0.33333rem 0 0;
    border-style: solid;
    border-color: #E8E8E8;
    border-collapse: collapse;
    border-top-color: $primary;
    box-shadow: 0px 4px 2px 0 transparentize($secondary, 0.96),
                0px 1px 4px 0 transparentize($secondary, 0.98),
                0px 2px 1px -1px transparentize($secondary, 0.9);
    &__cell {
        display: table-cell;
        vertical-align: middle;
        border: inherit;
        border-width: 0;
        padding: 0 ($spacer * 2);
        &--logo {
            padding: 0;
            border-right-width: 1px;
            width: $logged-in-sidebar-width;
        }
        &--navbar {
            text-align: right;
        }
    }
    .logged-out & {
        width: $logged-out-sidebar-width;
    }
}

.header-left {
    display: table;
    width: 100%;
    height: ($header-height - 1px);
    span {
        display: table-cell;
        vertical-align: middle;
        &:first-child {
            padding: 0 ($spacer * 2);
            a:hover {
                img {
                    opacity: 0.5;
                }
            }
        }
        &:last-child {
            button {
                font-size: $font-size-lg;
            }
        }
    }
    img {
        max-width: 100%;
        height: auto;
        max-height: calc(#{($header-height - 1px)} - #{($spacer * 4)});
        transition: opacity 0.25s;
    }
}

.header-navbar {
    text-align: left;
    a {
        color: inherit;
    }
}

.navbar-icon-link {
    position: relative;
    .fa {
        font-size: 150%;
        vertical-align: middle;
    }
    &:hover {
        color: $primary;
    }
    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
    }
}

.navbar-user-avatar {
    background-color: $primary;
    display: inline-block;
    vertical-align: middle;
    width: 2rem;
    height: 2rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    > .row {
        height: 2rem;
        color: color-yiq($primary);
        > span {
            font-weight: 700;
            font-size: 87.5%;
        }
    }
    &--link {
        padding-right: 0;
    }
}

/*---------------------------------------------------------------
 ----------- Breadcrumbs */

.page-breadcrumbs {
    background: lighten($body-background, 2%);
    overflow: hidden;
    &__info {
        padding: 0.5rem 2rem;
    }
    .breadcrumb {
        padding-left: ($spacer * 2);
        .breadcrumb-item {
            + .breadcrumb-item::before {
                @include fontello();
            }
            &.active {
                font-weight: $font-weight-bold;
            }
        }
    }
}

.breadcrumb--info {
    float: right;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    & + .close {
        margin-left: 0.5rem;
    }
}

/*---------------------------------------------------------------
 ----------- Responsive */

@media only screen and (max-width: $media-maxW-md) {
    .page-header {
        .logged-out & {
            width: 100%;
        }
        &__cell--navbar {
            font-size: 0.9em;
            .navbar-icon-link .fa {
                font-size: 1.2em;
            }
        }
    }
}

@media only screen and (max-width: $media-maxW-sm) {
    .logged-in .header-logo span {
        display: none;
    }
    .page-header {
        &__cell {
            &--navbar {
                display: none;
            }
            &--logo {
                .header-left {
                    & > span:nth-child(2) {
                        text-align: right;
                        /*
                        .btn--toggle-search {
                            transform: translateX(-125%);
                        }
                        .btn--toggle-sidebar {
                            transform: translateX(100%);
                        }
                        */
                    }
                }
            }
        }
    }
}
