/*
 * Floating panel — Figma "searchbar-open" (4249:756), "Notifications" (4257:928) and the menu
 * drop-downs (4418:2897, 4488:5685, 4722:21563).
 *
 * They share a shell — a white card under its trigger, bordered 1px in `Border/default-medium`,
 * radius 4 — but **not their inside**, which is what the measurements say:
 *
 *   panneau                        retrait  écart  ligne
 *   recherche      4249:756          16       0      36
 *   notifications  4257:928          16       8      56
 *   menu           4418:2897           8       8      36
 *   déconnexion    4722:21563          8       —      36
 *
 * So the group padding of 16 below is the one of the two panels that carry section headings, and
 * the plain lists of links take `--list`.
 *
 * No drop shadow: neither the search panel nor the menu drop-downs carry one — their rendered
 * bounds exceed the node by the stroke alone.
 */

.mo-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + var(--mo-spacing-xxs));
    right: 0;
    width: var(--mo-panel-width, 300px);
    max-width: calc(100vw - 2 * var(--mo-margin-body-lr));
    max-height: min(70vh, 600px);
    overflow-y: auto;
    border: 1px solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
}

/*
 * A panel that is nothing but a list of links: the two menu drop-downs and the sign-out one. It is
 * as wide as its widest entry — the maquette sizes it by hand between 200px (4418:2897) and 265px
 * (4722:21563) — and packs its rows tighter than a panel with headings.
 */
.mo-panel--list {
    --mo-panel-width: max-content;

    min-width: 200px;
}

.mo-panel--list .mo-panel__group {
    padding: var(--mo-spacing-xxs);
}

.mo-panel--list .mo-panel__list {
    gap: var(--mo-spacing-xxs);
}

.mo-panel[hidden] {
    display: none;
}

.mo-panel--start {
    right: auto;
    left: 0;
}

.mo-panel__header {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xs);
    padding: var(--mo-spacing-xs) var(--mo-spacing-sm);
    border-bottom: 1px solid var(--mo-border-default-medium);
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-body-sm);
}

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

.mo-panel__group {
    display: flex;
    flex-direction: column;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-xs);
}

/*
 * Sections are **not** separated. Sampled at mid-width, `searchbar-open` (4249:756) is white across
 * both of its section boundaries and `Notifications` (4257:928) across its one: the only line either
 * panel carries is the seam under the field, or under the panel header, at y=40 in both.
 */

.mo-panel__heading {
    margin: 0;
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-caption);
    font-weight: var(--mo-font-weight-medium);
    line-height: var(--mo-font-size-caption);
    text-transform: uppercase;
}

/*
 * Section headings of the search panel are painted with the brand gradient through the glyphs.
 * `color: transparent` alone would leave the text invisible where the gradient cannot be painted,
 * so the declaration is guarded by the feature query.
 *
 * The box must be the word, not the row: a `background-clip: text` gradient is laid over the
 * padding box of the element, so a block-level heading spread the sweep over the whole 368px of the
 * panel and a short word such as "LABORATOIRES" only ever showed its warm first fifth. The maquette
 * runs the sweep across the word itself, warm on the first glyph and pink on the last (4249:763).
 */
.mo-panel__heading--brand {
    display: inline-block;
    width: fit-content;
    font-weight: var(--mo-font-weight-bold);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .mo-panel__heading--brand {
        background-image: var(--mo-gradient-brand-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/*
 * `base/reset.css` already zeroes the margin, the padding and the marker of any classed list, so
 * this rule only stacks the rows. Redeclaring `padding: 0` here would silently cancel the padding
 * of `.mo-panel__group` on an element carrying both — which is what flattened the menu drop-downs
 * against their border.
 */
.mo-panel__list {
    display: flex;
    flex-direction: column;
}

/* `searchbar-text` (4249:808): a 36px row — 8px of padding around a 20px line. */
.mo-panel__link {
    display: block;
    padding: var(--mo-spacing-xxs);
    border-radius: var(--mo-radius-sm);
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-medium);
    line-height: var(--mo-line-height-body-sm);
    text-decoration: none;
}

button.mo-panel__link {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/*
 * The Hover variant (4249:806) tints the row and **keeps the text dark** — unlike the menu entry
 * above it, which does turn pink. The keyboard indicator is the global focus ring of base/reset.css.
 */
.mo-panel__link:hover,
.mo-panel__link:focus-visible {
    background-color: var(--mo-surface-action-light);
}

.mo-panel__empty {
    margin: 0;
    padding: var(--mo-spacing-sm);
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

/*
 * Footer strip of the notification panel, carrying "Tout marquer comme lu". Its tint is what sets it
 * apart — 4257:973 starts straight on `Surface/action-light` at y=320, with no line above it.
 */
.mo-panel__footer {
    display: flex;
    padding: var(--mo-spacing-xs);
    background-color: var(--mo-surface-action-light);
}

.mo-panel__footer button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mo-text-action);
    font-family: inherit;
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
    text-decoration: underline;
    cursor: pointer;
}