/* Suite-knoppen rechtsboven in de header (breedte, thema, testweergave, vernieuwen, instellingen).
   Identiek in website/css, webapp/public/css, finance/public/css en life/public. Iconen: suite-icons.js.
   Volgorde overal: breedte, thema, test, vernieuwen, instellingen. */
/* :not(#_) tilt de specificiteit boven site-regels als ".top .btn-icon" uit, zonder !important. */
.suite-tool:not(#_) {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    background: transparent;
    color: inherit;
    line-height: 0;
    cursor: pointer;
    box-shadow: none;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
/* display laag houden, zodat een site de knop zelf mag verbergen (bijv. op mobiel). */
:where(.suite-tool) { display: inline-grid; place-items: center; }
.suite-tool:not(#_)[hidden] { display: none; }
.suite-tool:not(#_) svg { display: block; width: 20px; height: 20px; }
.suite-tool:not(#_):hover { border-color: #ddb247; color: #ddb247; background: transparent; }
.suite-tool:not(#_):focus-visible { outline: 2px solid #ddb247; outline-offset: 2px; }
.suite-tool:not(#_).on,
.suite-tool:not(#_)[aria-pressed="true"]#test-view-btn { background: #ddb247; border-color: #ddb247; color: #0c1828; }
html.test-view-on .suite-tool:not(#_).on,
html.test-view-on .suite-tool:not(#_)[aria-pressed="true"]#test-view-btn { background: #d9a6ff; border-color: #d9a6ff; color: #241333; }
.suite-tool:not(#_).flash-ok { border-color: #8db39b; color: #8db39b; }
.suite-tool:not(#_).flash-err { border-color: #e38b6a; color: #e38b6a; }
.suite-tools { display: inline-flex; align-items: center; gap: 6px; }