header.module.css

.header {
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-inner {
    composes: width-limit from '../styles/application.module.css';

    display: grid;
    grid-template:
        "logo search nav" auto /
        auto 1fr auto;
    align-items: center;
    padding: var(--space-xs) var(--space-m);
    color: white;

    a {
        color: white; text-decoration: none;
        &:hover { color: white; }
    }

    @media only screen and (max-width: 900px) {
        grid-template:
            "logo search menu" auto /
            auto 1fr auto;
    }

    @media only screen and (max-width: 820px) {
        grid-template:
            "logo menu" auto
            "search search" auto /
            auto 1fr;
    }

    .hero & {
        grid-template:
            "logo nav" auto
            "search search" auto /
            auto 1fr;

        @media only screen and (max-width: 900px) {
            grid-template:
                "logo menu" auto
                "search search" auto /
                auto 1fr;
        }
    }
}

.index-link {
    grid-area: logo;
    display: flex;
    align-items: center;

    h1 {
        margin: 0;
        font-size: var(--space-m);
    }
}

.logo {
    width: auto;
    height: calc(var(--space-m) * 1.4);
    margin-right: var(--space-xs);
}

.search-form {
    grid-area: search;
    margin: 0 var(--space-m);

    @media only screen and (max-width: 820px) {
        margin: var(--space-s) 0;
    }

    .hero & {
        justify-self: center;
        padding: var(--space-l) 0 var(--space-l-xl);
        margin: 0;
    }
}

.hero-title {
    display: none;
    margin: 0 0 var(--space-m);
    font-size: var(--space-m-l);
    text-align: center;
    color: white;
    text-shadow: 1px 3px 2px var(--green900);

    .hero & {
        display: block;
    }
}

.sep {
    margin: 0 var(--space-2xs);
    opacity: 0.5;
}

.nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-self: end;

    @media only screen and (max-width: 900px) {
        display: none;
    }
}

.menu {
    grid-area: menu;
    justify-self: end;
    display: none;

    @media only screen and (max-width: 900px) {
        display: flex;
        align-items: center;
    }
}

.menu-item-with-separator {
    border-top: 1px solid var(--gray-border);
}

.color-scheme-menu {
    margin-right: var(--space-xs);
}

.login-button {
    composes: button-reset from '../styles/shared/buttons.module.css';
    display: inline-flex;
    align-items: center;
    /* negative margin for larger click target */
    margin: calc(var(--space-2xs) * -1);
    padding: var(--space-2xs);
    cursor: pointer;

    &:disabled {
        cursor: wait;
    }

    .spinner {
        --spinner-color: white;
        --spinner-bg-color: rgba(255, 255, 255, .2);

        margin-right: var(--space-2xs);
    }
}

.login-icon {
    width: 1em;
    margin-right: var(--space-2xs);
    opacity: 0.5;
}

.avatar {
    margin-right: var(--space-2xs);
}

.wizard-hat {
    margin-right: var(--space-3xs);
}

.current-user-links {
    left: auto;
    right: 0;
    min-width: 200px;
}

.dropdown-button {
    background: none;
    border: 0;
    padding: 0;

    img {
        /* 22px is the hard coded size of a UserAvatar when @size="small" */
        margin-top: calc((22px - 1em) * -0.5);
    }
}

.login-menu-item,
.logout-menu-item,
.sudo-menu-item {
    composes: button-reset from '../styles/shared/buttons.module.css';
    cursor: pointer;

    &:disabled {
        cursor: wait;
    }

    .spinner {
        margin-right: var(--space-2xs);
    }
}

.sudo-menu-item {
    flex-direction: column;

    > .expires-in {
        font-size: 80%;
        font-style: italic;
        padding-top: var(--space-3xs);
    }
}