/* ─────────────────────────────────────
   The formatting popover
   ─────────────────────────────────────

   ⭐ FORMATTING WHERE THE TEXT IS, on every surface that hides its Trix
   toolbar — the composer and focus mode today. Positioned by
   static/js/editor-popover.js against the selection rectangle; the editor
   wrapper is the containing block, so the coordinates it sets are relative to
   the editor rather than the page.

   ⛔ IT LIVED IN entry-form.css UNTIL 2026-08-25, which focus mode does not
   load. Moving it here rather than copying it is the whole point of
   tests/core/test_shared_css_is_actually_loaded.py. */

.editor-popover {
    position: absolute;
    z-index: 40;
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    background: var(--card-background);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* `hidden` on a flex container has to be said twice — `display: flex` beats
   the attribute's UA `display: none`, and the popover would otherwise sit at
   0,0 over the first line of the entry. */
.editor-popover[hidden] {
    display: none;
}

.editor-popover__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background var(--duration-quick) var(--ease-out),
                color var(--duration-quick) var(--ease-out);
}

.editor-popover__btn:hover {
    color: var(--text-color);
    background: var(--background-hover);
}

.editor-popover__btn:focus-visible {
    outline: var(--border-width-md) solid var(--primary);
    outline-offset: -2px;
}

/* Mirrors what Trix itself considers active for the selection. */
.editor-popover__btn[aria-pressed="true"] {
    color: var(--primary);
    background: var(--primary-light);
}

@media (max-width: 600px) {
    /* Centred rather than pinned to the selection: on a phone the selection is
       usually made with a long-press, so the finger is exactly where the
       popover would otherwise appear. */
    .editor-popover {
        left: 50% !important;
        transform: translateX(-50%);
    }
}