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

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

/*******************************
    Add your custom CSS here
*******************************/

.download-button {
    &:extend(.ui.button all);
    &:extend(.purple all);
}

.download-button.download-button-full {
    &:extend(.ui.inverted.purple.button all);
}

.download-button:hover {
    &:extend(.green all);
    color: black !important;
}

.play-button.play-button-full {
    &:extend(.ui.inverted.button all);
}

.getting-started-btn {
    &:extend(.ui.button all);
    &:extend(.orange all);
}

.ui.menu .item.editor-menuitem {
    background: @primaryColor !important;
    margin: 0.5rem;
    padding: 0.7rem;
    border-radius: 0.5rem;
}
.ui.menu.fixed .item.blocks-menuitem, .ui.menu.fixed .item.javascript-menuitem {
    border-radius: 0.2rem !important;
}

#filelist {
    background: #fff url(https://az742082.vo.msecnd.net/pub/psopafpj) 0 0 repeat !important;
}

/*******************************
             Blockly
*******************************/

.blocklyTreeRow {
    border-bottom: 1px solid #ecf0f1 !important;
    margin-bottom: 0px !important;
}

/* Blockly toolbox font size same as the page font */
.blocklyTreeLabel {
    font-family: @pageFont !important;
    font-weight: 200;
}

.blocklyToolboxDiv, .monacoToolboxDiv {
    background-color: white !important;
    border-left: 1px solid #ecf0f1 !important;
}

.blocklyFlyoutBackground {
    fill: #525A67 !important;
    fill-opacity: 0.5 !important;
}

/* Remove shadow around blockly blocks */
.blocklyPathDark, .blocklyPathLight {
    display: none;
}

.organization {
    top: 1.6em;
}

/* Blockly Toolbox Buttons */
.blocklyToolboxButtons .blocklyAddPackageButton {
    &:extend(.ui.inverted.pink.button all);
    &:extend(.circular all);
}

.blocklyToolboxButtons .blocklyUndoButton {
    &:extend(.ui.inverted.blue.button all);
    &:extend(.circular all);
}

/*******************************
             Monaco
*******************************/

.monaco-editor, .monaco-editor .inputarea {
    background: #ecf0f1;
}

.monacoDraggableBlock {
    background: #ecf0f1;
    border: solid 3px #ecf0f1;
}

.monaco-editor-background {
    background: #ecf0f1;
}

.monacoFlyout {
    background: rgba(82, 90, 103, 0.5);
}


/* Mobile */
@media only screen and (max-width: @largestMobileEditorBreakpoint) {
    #filelist {
        background: transparent !important;
    }
    .organization {
        top: auto;
    }
}

/* Tablet */
@media only screen and (min-width: @tabletEditorBreakpoint) and (max-width: @largestTabletEditorBreakpoint) {
    .organization {
        top: auto;
    }
    /* Blockly Toolbox buttons */
    #blocklyToolboxButtons, #monacoToolboxButtons {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }
}

/* Small Monitor */
@media only screen and (min-width: @computerEditorBreakpoint) and (max-width: @largestSmallMonitorEditorBreakpoint) {
    .organization {
        top: auto;
    }
    /* Blockly Toolbox buttons */
    #blocklyToolboxButtons, #monacoToolboxButtons {
        margin-right: 1rem;
        margin-left: 1rem;
    }
}

/* Large Monitor */
@media only screen and (min-width: @largeMonitorEditorBreakpoint) {
    .blocklyTreeRow {
        width: 230px;
        padding-left: 1rem;
    }
    /* Blockly Toolbox buttons */
    #blocklyToolboxButtons, #monacoToolboxButtons {
        margin-right: 2rem;
        margin-left: 2rem;
    }
}