.common-button {
    color: var(--pxt-neutral-foreground2) !important;
    background-color: var(--pxt-neutral-background2) !important;
    border-color: var(--pxt-neutral-foreground2) !important;
}

.common-button:hover, .common-button:focus {
    outline: 2px solid var(--pxt-colors-yellow-background) !important;
    z-index: 1;
}

/* 
 * Inverted image colors
 */
.barcharticon,
.blockly-ws-search-next-btn,
.blockly-ws-search-previous-btn,
.blockly-ws-search-close-btn {
    filter: invert(1);
}

/* Sim toolbar */
#simulator .editor-sidebar .simtoolbar .debug-button.active,
#simulator .editor-sidebar .simtoolbar .debug-button.active:hover,
#simulator .editor-sidebar .simtoolbar .debug-button.active:hover i {
    /* Make active state more apparent by inverting the colors */
    background: var(--pxt-neutral-foreground2) !important;
    color: var(--pxt-neutral-background2) !important;
}

/* Image Editor */
.image-editor-topbar, .image-editor-bottombar, .image-editor-sidebar {
    background: var(--pxt-neutral-background1) !important;
}
.image-editor-tool-buttons {
    background: none !important;
}
.image-editor-button,
.image-editor-input,
.image-editor-confirm {
    border: 1px solid var(--pxt-neutral-foreground1);
}
.image-editor-canvas, .image-editor-canvas:hover, .image-editor-canvas:focus {
    outline: none !important;
}
.cursor-button {
    /* remove margin since we now have a border around the cursor buttons and it looks better centered */
    margin-right: 0;
}

/* Toolbox */
.pxtToolbox:not(.invertedToolbox) span.blocklyTreeLabel {
    color: var(--pxt-target-foreground3);
}

.pxtToolbox:not(.invertedToolbox) .blocklyTreeSelected span.blocklyTreeLabel,
.pxtToolbox:not(.invertedToolbox) .blocklyTreeSelected span.blocklyTreeIcon {
    color: var(--pxt-target-foreground3);
}

.pxtToolbox:not(.invertedToolbox) .blocklyTreeRow:not(.blocklyTreeSelected) .blocklyTreeLabel {
    color: var(--pxt-target-foreground3) !important;
}

.pxtToolbox:not(.invertedToolbox) .blocklyTreeRow:not(.blocklyTreeSelected):hover,
.pxtToolbox:not(.invertedToolbox) .blocklyTreeRow:not(.blocklyTreeSelected):focus {
    background-color: #404040 !important;
}