/*
 * Top bar of the back office — Figma "Frame 4" (4683:20859).
 *
 * From 1440px it is the card of the maquette: a white card veiled with the brand gradient at 20%
 * and bordered with its warm end, holding the two actions of the maquette pushed to the right. It
 * scrolls with the content: only the rail is sticky, so a long screen is not read through a 72px
 * band.
 *
 * Below 1440px the maquette draws nothing (see docs/technique/back-office-layout.md), and this bar
 * is not what stands in for it: `.mo-admin-topbar` itself is hidden, and Admin:Sidebar shows the
 * same two actions — `admin/_topbar_actions.html.twig`, the shared inner markup styled below — in
 * its own dark band instead, next to the button that opens Admin:Drawer.
 */

.mo-admin-topbar {
    display: none;
}

/*
 * "Version publique" collapses to its icon alone below 1440px. The label is clipped rather than
 * `display: none`, so it stays the button's accessible name instead of moving to a second, easily
 * forgotten `aria-label`.
 *
 * Chained to `.mo-button`: `button.css` is imported after this file, so a single class here would
 * lose its `padding-inline` to `.mo-button`'s own at equal specificity.
 */
.mo-admin-topbar__public.mo-button {
    width: calc(var(--mo-scale-500) + 2 * var(--mo-border-width-xs));
    padding-inline: 0;
}

.mo-admin-topbar__public-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Administrator chip. The trigger of the drop-down, hence the relative positioning: `.mo-panel`
 * anchors itself to it. Below 1440px it collapses to the same square as the button beside it, its
 * name clipped the same way as the label above and its chevron simply hidden — it is already
 * `aria-hidden`, so nothing depends on it staying in the accessibility tree.
 */
.mo-admin-topbar__user {
    position: relative;
}

.mo-admin-topbar__user-button {
    display: flex;
    width: calc(42px + 2 * var(--mo-border-width-xs));
    height: calc(42px + 2 * var(--mo-border-width-xs));
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--mo-border-width-xs) solid var(--mo-border-default-light);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
    color: var(--mo-text-body);
    font-family: inherit;
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-body-md);
    cursor: pointer;
}

.mo-admin-topbar__user-button:hover,
.mo-admin-topbar__user-button:focus-visible {
    border-color: var(--mo-border-action);
    color: var(--mo-text-action);
}

.mo-admin-topbar__user-button svg {
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
    flex: none;
}

.mo-admin-topbar__user-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mo-admin-topbar__user-chevron {
    display: none;
}

@media (min-width: 1440px) {
    /*
     * `Frame 4` (4683:20859) is 74px tall and paints exactly that — its own 2px stroke is inside.
     * It leaves 16px above `Frame 7`, whose 42px chip paints 2px past its frame, so 12px of the
     * band actually shows: the padding gives back the band's border **and** the chip's stroke.
     * Where a container's height is pinned by the maquette, its padding has to absorb the outside
     * stroke of what it holds; elsewhere the two pixels are left where the maquette puts them.
     */
    .mo-admin-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: var(--mo-spacing-xs);
        padding: calc(var(--mo-spacing-xs) - 2 * var(--mo-border-width-xs))
            calc(var(--mo-spacing-sm) - 2 * var(--mo-border-width-xs));
        border: var(--mo-border-width-xs) solid var(--mo-gradient-brand-warm);
        border-radius: var(--mo-radius-md);
        background-color: var(--mo-surface-default-white);
        background-image: var(--mo-gradient-brand-veil);
    }

    .mo-admin-topbar__public.mo-button {
        width: auto;
        padding-inline: var(--mo-scale-300);
    }

    .mo-admin-topbar__public-label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        overflow: visible;
        clip-path: none;
        white-space: nowrap;
        border: 0;
    }

    /*
     * The chip is a 42px frame (4683:20864) whose 2px stroke falls outside it, so it paints 46px —
     * exactly like the chip of the portal header, and like the `button` instance beside it, which is
     * a 40px frame painting 44. See components/button.css for the reading.
     */
    .mo-admin-topbar__user-button {
        width: auto;
        max-width: 250px;
        justify-content: flex-start;
        gap: var(--mo-spacing-xxs);
        padding: 0 var(--mo-scale-200);
    }

    .mo-admin-topbar__user-name {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        overflow: hidden;
        clip-path: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 0;
    }

    .mo-admin-topbar__user-chevron {
        display: block;
    }
}