@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';
@import 'site/globals/site.variables';

@import 'blockly-core';

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

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

.blocklyToolboxDiv {
    padding:7px;
}

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

    -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 {
    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);
}

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

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

.blocklyFlyoutBackground {
    fill: #42495F !important;
}

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

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