@import url("../typography-GNdFSua.css");
@import url("../variables--lXYN8U.css");

.container:has(.toolbar) {
    background-color: var(--toolbar-background-color);
    padding: 8px 8px;
}

.toolbar {
    background-color: var(--toolbar-background-color);
    color: var(--toolbar-color);
    font-family: var(--font), sans-serif;
    font-size: var(--font-size);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: right;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: right;

    a {
        text-decoration: none;
        display: inline-block;
        color: inherit;

        &.login {
            margin-left: 50px;
        }

        &:hover {
            text-decoration: underline;
            color: inherit;
        }
    }

    .profile-slug {
        display: flex;
        justify-content: right;
        gap: 0.5em;
        width: min(20%, 200px);

        span {
            align-self: center;
        }

        img.avatar {
            width: 30px;
            height: 30px;
            align-self: center;
        }
    }

    #toolbar-menu {
        width: max(20%, 200px);
        position: absolute;
        right: 0;
        top: 50px;
        background-color: #fff;
        box-shadow: var(--box-shadow);
        display: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;

        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 9;

        li {
            padding: 0;
            margin: 0;
            background-color: #fff;
        }

        a {
            color: var(--background-color);
            display: inline-block;
            padding: 0.4em 0.6em;
            width: 100%;
            background-color: #fff;

            &:hover {
                background-color: var(--background-color);
                color: #fff;
                text-decoration: none;
            }
        }
    }

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