/* Common styles for all themes */

:root {
    color      : var(--text);
    font-family: Arial, sans-serif;
    font-size  : 16px;
}

body {
    background: var(--background);
    margin    : 0;
    overflow  : hidden;
}

*:focus {
    box-shadow:
        0 0 0 1px var(--background),
        0 0 0 3px var(--focus-ring),
        0 0 0 4px var(--background);
    outline   : none;
    z-index   : 1;
}



/********************************** Button ***********************************/

[role="button"] {
    align-items    : center;
    background     : var(--button);
    border-color   :
        var(--border-light)
        var(--border-dark )
        var(--border-dark )
        var(--border-light)
    ;
    border-radius  : 3px;
    border-style   : solid;
    border-width   : 1px;
    display        : flex;
    justify-content: center;
    padding        : 4px;
}

[role="button"][aria-pressed="true"]:not([active]) {
    background  : var(--button-pressed);
    border-color:
        var(--border-dark )
        var(--border-light)
        var(--border-light)
        var(--border-dark )
    ;
    padding: 5px 3px 3px 5px;
}

[role="button"]:not([active]):hover {
    background: var(--button-hover);
}

[role="button"][active]:not([aria-pressed="true"]) {
    background  : var(--button-pressed);
    border-color:
        var(--border-dark )
        var(--border-light)
        var(--border-light)
        var(--border-dark )
    ;
    padding: 5px 3px 3px 5px;
}

[role="button"][aria-pressed="true"][active] {
    background  : var(--button-pressed);
    border-color:
        var(--border-dark )
        var(--border-light)
        var(--border-light)
        var(--border-dark )
    ;
    padding: 6px 2px 2px 6px;
}



/********************************** MenuBar **********************************/

[role="menubar"] {
    border-bottom: 1px solid var(--border-weak);
    column-gap   : 4px;
    padding      : 4px;
}

[role="menubar"] > [role="menuitem"] {
    border-radius: 3px;
    padding      : 4px;
}

[role="menubar"] > * [role="menuitem"] {
    border-radius: 3px;
    padding      : 4px;
}

[role="menubar"] [role="menuitem"]:hover,
[role="menubar"] [role="menuitem"]:focus,
[role="menubar"] [role="menuitem"][aria-expanded="true"] {
    background: var(--button-hover);
}

[role="menubar"] [role="menu"] {
    background   : var(--background);
    border-radius: 4px;
    box-shadow   :
        0 0 0 1px var(--border-strong),
        4px 4px 5px var(--shadow)
    ;
    min-height   : 16px;
    min-width    : 16px;
    padding      : 4px;
}