/*
 * Gedrueckte (Toggle-)Buttons im Fenster-Header
 *
 * Ein Button im Header eines Fensters (a.xplainWindowIcon), der den Zustand
 * "pressed" hat (Ext setzt dann x-btn-pressed), bekommt einen leicht grauen
 * Hintergrund, damit der Benutzer erkennt, dass er aktiv ist.
 *
 * Das Theme setzt fuer diese Buttons "background: transparent !important"
 * (.attribute-window .x-window-header .x-btn.xplainWindowIcon, 4 Klassen),
 * daher braucht es hier !important und mindestens gleich viele Klassen.
 * Die Flaeche waechst wie beim Hover per box-shadow ~3px ueber den Button
 * hinaus, ohne das Layout zu veraendern.
 *
 * Eigenes Stylesheet, weil Main.scss erst nach einem Sencha-Build wirkt.
 * No SASS / theme rebuild required.
 */

body .x-window-header a.x-btn.xplainWindowIcon.x-btn-pressed {
    background: #eceef3 !important;
    box-shadow: 0 0 0 3px #eceef3;
    border-radius: 7px;
}

body .x-window-header a.x-btn.xplainWindowIcon.x-btn-pressed:hover {
    background: #e3e6ec !important;
    box-shadow: 0 0 0 3px #e3e6ec;
}

/* Dark Theme */
body.oe-theme-dark .x-window-header a.x-btn.xplainWindowIcon.x-btn-pressed {
    background: #262d3a !important;
    box-shadow: 0 0 0 3px #262d3a !important;
}

body.oe-theme-dark .attribute-window .x-window-header a.x-btn.xplainWindowIcon.x-btn-pressed:hover {
    background: #2c3444 !important;
    box-shadow: 0 0 0 3px #2c3444 !important;
}