/* Import all components */
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';

/* Reference import */
@import (reference) "semantic.less";

.greenscreen {
    .videoContainer {
        position: absolute !important;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width:100%;
        height:100%;
        background-color: @greenScreenColor !important;
    }
    .videoContainer video {
        max-width:100%;
        max-height:100%;
        object-fit: cover;
    }
    .videoContainer video.flipx {
        transform: scaleX(-1);
    }

    #maineditor, #simulator .editor-sidebar, .blocklyToolbox, svg.blocklySvg,
    .monaco-editor, .monaco-editor .margin, .monaco-editor .monaco-editor-background,
    .monacoToolboxDiv, #simulator .editor-sidebar .tutorial-container-outer.active, .tutorial-container-outer {
        background-image: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .toolbox-title {
        background-color: @white;
    }

    .monaco-editor .lines-content, .monaco-editor .view-line, .monaco-editor .view-lines {

        > span {
            background: var(--pxt-target-background3);
            color: var(--pxt-target-foreground3);
        }
    }

    .blocklyMainBackground {
        fill-opacity: 0 !important;
    }

    .blocklyTreeRow, .blocklyTreeRow.blocklyTreeSelected {
        box-shadow: 1px 1px #000 !important;
    }

    .blocklyBlockBackground {
        stroke-width: 2px;
    }

    .blocklyBlockBackground[fill="@{greenScreenBlockColor}"] {
        fill: @greenScreenGreen !important;
    }

    .pxtToolbox:not(.invertedToolbox) {
        .blocklyTreeRow:not(.blocklyTreeSelected) {
            background: white;
            .blocklyTreeIcon, .blocklyTreeLabel {
                color: black !important;
            }
        }
    }
}

.fullscreensim.greenscreen {
    div#boardview {
        background-image: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}