/* Import all components */
@import 'pxtsemantic';
@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
*******************************/

/* Roboto font */
@RobotoFont: data-uri("../docs/static/fonts/Roboto_400_normal.woff");

@font-face  {
    font-family: 'Roboto';
    src: @RobotoFont format("woff");
}

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

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

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

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

.ui.button.editortools-btn {
    &:extend(.ui.blue.button all);
}

.ui.button.exit-tutorial-btn {
    &:extend(.ui.blue.button all);
}

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

#downloadArea {
    background: transparent !important;
}

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

div.blocklyTreeRow {
    box-shadow: inset 0 -1px 0 0 #ecf0f1;

    margin-bottom: 0px !important;

    -webkit-transition-property: background-color; /* Safari */
    -webkit-transition-duration: 1s; /* Safari */
    transition-property: background-color;
    transition-duration: 1s;
}

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

.blocklyToolboxDiv, .monacoToolboxDiv {
    background-color: white !important;
    border-left: 1px solid #ecf0f1 !important;
    box-shadow: 4px 0px 2px -4px rgba(0,0,0,0.12), 4px 0px 2px -4px rgba(0,0,0,0.24);
}

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

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

.organization {
    top: 1.6em;
}

/* Blockly Field: Grid picker */
.blocklyGridPickerTooltip {
    padding: 3px 5px;
    background-color: #fefefe;
    border: black solid 3px;
    color: black;
    border-radius: 10px;
}

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

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

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


/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
    #filelist {
        background: transparent !important;
    }
    .blocklyToolboxDiv, .monacoToolboxDiv {
        border-left: 0 !important;
    }
    div.blocklyTreeRoot {
        padding: 0;
    }
}

/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
    #filelist {
        background: transparent !important;
    }
    .blocklyToolboxDiv, .monacoToolboxDiv {
        border-left: 0 !important;
    }
    div.blocklyTreeRoot {
        padding: 0;
    }
}

/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
}

/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
}