/* Header */

#header-background {
    background-size: cover, 70% 100%;
    background-position: center top, right top;
    background-repeat: no-repeat, no-repeat;
}

#header {
    @include vendor('display', 'flex');
    border-bottom: solid 5px _palette(accent);
    position: relative;

    > * {
        margin-bottom: 0;
    }

    .logo {
        @include vendor('flex', '2');
        border-bottom: 0;
        color: inherit;
        font-family: _font(family-heading);
        font-size: 1.125em;
    }

    .icons {
    }
}

/* Inverted */

#header.inverted {
    border-bottom: solid 5px _palette(accent-inverted);
}

#header-background.inverted {
    background-color: _palette(bg-alt-inverted);
}