/*
 * The round icons next to a field's label (InfoHint): the translatable 文A, the link (InfoHint::linkAction, "Open in File
 * Manager"), the handbook's book (HandbookLink) and the ⓘ are one size, shape and blue — a 1.25rem disc with a white glyph; only the glyph differs.
 * 文A is drawn in shared-theme.css; the link is drawn the same way here. The ⓘ is the heroicon's own solid circle (white
 * "i" cut out of it), which fills only 13/16 of its box, so it is scaled up to the others' diameter.
 */
.fi-icon-btn.fi-hint-link-btn > .fi-icon,
.fi-icon-btn.fi-hint-handbook-btn > .fi-icon,
.fi-icon-btn.fi-hint-translatable-btn > .fi-icon {
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    padding: 3px;
    border-radius: 9999px;
    color: #fff;
    background: var(--info-hint-500);
}

.fi-icon.fi-color-info-hint,
.fi-icon-btn.fi-hint-info-btn > .fi-icon {
    transform: scale(1.23);
}

/*
 * The page's book (HandbookLink::pageButton) sits right after its title, on the title's line and a little above its middle: the
 * title (a block) and the book (the hook's output, right after it) share a line.
 */
.fi-header-heading:has(+ .fi-handbook-title-book) {
    display: inline-block;
    vertical-align: top;
}

.fi-handbook-title-book {
    display: inline-block;
    vertical-align: top;
    /* the gap is this margin and the space between two inline boxes (about 4px): 6px in all */
    margin-inline-start: 0.125rem;
    margin-top: 0.3rem;
}