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

@import 'fieldeditors';

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

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

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

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

.projectname-input {
    &:extend(.inverted all);
}

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

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


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

/* Specifying rounded toolbox borders. */
div.blocklyTreeRow {
    border-radius: 3px;
    margin-bottom: 3px !important;
    border: 1px solid #1e1e1e;
    border-left-width: 1px !important;
}
div.blocklyTreeRoot div div div div div.blocklyTreeRow {
    border-left-width: 1px !important;
}

/* Highlight category item */
div.blocklyTreeRow.blocklyTreeSelected, div.blocklyTreeRoot div div div div div.blocklyTreeRow.blocklyTreeSelected {
    border: 2px solid #fc3;
    border-left-width: 2px !important;
}

/* This removes any padding at the top of the toolbox */
div.blocklyTreeRoot {
    padding: 0px !important;
}

/* Blockly Text */
span.blocklyTreeLabel {
    font-family: "Gotham SSm A","Gotham SSm B","Montserrat","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif  !important;
    text-transform: uppercase !important;
    font-size:1rem !important;
}

svg.blocklySvg {
    background: #00487C; /* For browsers that do not support gradients */
}

.blocklyFlyoutBackground {
    fill: #282828 !important;
}
.monacoFlyout {
    background: rgba(40, 40, 40, 0.9);
}

.blocklyToolboxDiv, .monacoToolboxDiv {
    padding: 0.5rem;
    border-right: solid 1px #282828;
    background-color: #383838 !important;
}

.blocklyScrollbarHandle {
    fill: #000 !important;
    fill-opacity:.8;
}

/* Editor menu toggle */
.ui.menu .item.editor-menuitem {
    background: fade(@black, 20%) !important;
}

/* Search box */
#blocklySearchArea {
    margin: 0.5rem;
}
.blocklySearchInputField {
    border-radius: 0.2rem !important;
}

.sandboxfooter a:not(.thin) {
    color:white !important;
}

/* Scrollbars */
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}

/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
    #filelist {
        background: transparent;
    }
    div.blocklyTreeRow {
        padding-bottom: 2rem !important;
    }
    #blocklyTrashIcon {
        margin: 0.2rem;
    }
}

/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
}

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

/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
}
/* Mobile, Tablet AND thin screen */
@media only screen and (max-width: @largestTabletScreen) and (max-height: @thinEditorBreakpoint) {
    .sandboxfooter a:not(.thin) {
        color: @black !important;
    }
}