$font-size-openlmis-header-title: $font-size-extra-large !default;

body > header {
    border: 0px;
    padding: 0px;
    > * {
        width: 100%;
        margin: 0px;
    }
}

.openlmis-header {
    align-items: flex-end;
    background: linear-gradient(to top, $light-gray 0%, lighten($light-gray, 40%) 80%, $white 100%);
    display: flex;
    flex-wrap: nowrap;
    padding: 1em 2em;
    z-index: 1; // to be above navbar

    > * {
        flex: 0 0 auto;
        align-items: flex-end;
    }

    > .title {
        display: block;
        text-indent: -30000em;
        overflow: hidden;
        background-image: url('common/openlmis-logo.svg');
        background-repeat: no-repeat;
        background-size: auto $font-size-openlmis-header-title;
        flex-grow: 1;
        font-size: $font-size-openlmis-header-title;
        height: $font-size-openlmis-header-title;
    }
}

.openlmis-header.is-offline {
    background: transparent;
    color: $light-gray;
    > .title {
        background-image: url('common/openlmis-logo-white.svg');
    }
}

.openlmis-header-actions {
    > * {
        display: flex;
        justify-content: flex-end;
        > * {
            flex: 0 0 auto;
            margin: 0px;
            margin-right: 1em;
            &:last-child{
                margin-right: 0em;
            }
        }
    }
}

.status-offline {
    @extend a.is-offline;
    margin-right: 0;   
}

.openlmis-header-info {
    display: flex;
    flex-direction: row;
    > * {
        flex: 0 0 auto;
    }
}