/* AdminUI page header

The basic components of a header is:

```
.adminui-page-header  (the outer wrapper)
    .adminui-page-header__content   (wrapper around the content of the header)
        .adminui-page-header__brand   (container for a brand)
        .adminui-page-header__nav     (navigation elements)
            .adminui-page-header__navlink        (navigation element link)
            .adminui-page-header__navbutton      (navigation element button)
            .adminui-page-header__navmenutoggle  (navigation element menu toggle)
```

Example: {type: isolated} With brand

    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>

Example: {type: isolated} With brand and navigation
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink">Information</a>
            </nav>
        </div>
    </header>

Example: {type: isolated} Compact
    <header class="adminui-page-header  adminui-page-header--compact">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink">Information</a>
            </nav>
        </div>
    </header>

Example: {type: isolated} Navigation active links
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">Nonactive link</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--active">Active link</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button">Nonactive button</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button adminui-page-header__navlink--active">Active button</a>
            </nav>
        </div>
    </header>

Example: {type: isolated} With navigation buttons and menu toggle button
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button">A button</a>
                <button type="button" class="adminui-page-header__navmenutoggle">
                    <span class="adminui-page-header__navmenutoggle-icon" aria-hidden="true"></span>
                    <span class="adminui-page-header__navmenutoggle-label">Menu</span>
                </button>
            </nav>
        </div>
    </header>




Example: {type: isolated} Compact variant with navigation buttons and menu toggle button
    <header class="adminui-page-header adminui-page-header--compact">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button-compact">A button</a>
                <button type="button" class="adminui-page-header__navmenutoggle">
                    <span class="adminui-page-header__navmenutoggle-icon" aria-hidden="true"></span>
                    <span class="adminui-page-header__navmenutoggle-label">Menu</span>
                </button>
            </nav>
        </div>
    </header>

Example: {type: isolated} With brand image (logo) menu toggle button
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <img class="adminui-page-header__brandimage" src="data:image/svg+xml;base64, ">
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button">A button</a>
                <button type="button" class="adminui-page-header__navmenutoggle">
                    <span class="adminui-page-header__navmenutoggle-icon" aria-hidden="true"></span>
                    <span class="adminui-page-header__navmenutoggle-label">Menu</span>
                </button>
            </nav>
        </div>
    </header>

Example: {type: isolated} Sizes
    <br>
    <strong>--small:</strong>
    <header class="adminui-page-header adminui-page-header--small">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>Default:</strong>
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--large:</strong>
    <header class="adminui-page-header adminui-page-header--large">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--xlarge:</strong>
    <header class="adminui-page-header adminui-page-header--xlarge">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--xxlarge:</strong>
    <header class="adminui-page-header adminui-page-header--xxlarge">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--xxxlarge:</strong>
    <header class="adminui-page-header adminui-page-header--xxxlarge">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>


Styleguide layout.adminui-page-header
*/
.adminui-page-header {
    @include page-header-mixin();
}
