/* 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';

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

/*******************************
    Add your custom CSS here
*******************************/
.openproject {
    background: #4ECC60 !important;
}

.blocks-menuitem.active, .javascript-menuitem.active {
    background: #738791 !important;
}

.help-dropdown-menuitem, .more-dropdown-menuitem {
    background: #424955 !important;
    margin-right:0px !important;
}

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

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

#filelist .menu {
  width: 100%;
}

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

.blocklyTreeRow {
    border-radius:5px;
}

/* Specifying top and bottom rounded toolbox borders. */
.blocklyTreeRow.blocklyTreeRowTop {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.blocklyTreeRow.blocklyTreeRowBottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.blocklyTreeRow:hover {
    background: @invertedBackground !important;
}

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

/* Blockly Text */
.blocklyTreeLabel {
    font-family: @pageFont !important;
}

.blocklyTreeLabel {
    font-size:1rem !important;
}

.blocklyFlyoutBackground {
    fill: @grey;
}

.blocklyToolboxDiv {
    /*left:30px !important;*/
    padding:7px;
}

/* Blockly Toolbox Buttons */
#blocklyToolboxButtons .blocklyAddPackageButton {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}

#blocklyToolboxButtons .blocklyUndoButton {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}

.organization {
    top: 1.6em;
}

/* Mobile */
@media only screen and (max-width: @largestMobileEditorBreakpoint) {
    .blocklyTreeLabel {
        font-size: 0.5rem !important;
    }
    .organization {
        top: auto;
    }
}

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

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

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

/*******************************
             Menu Bar
*******************************/

#menubar {
    height: 5rem;
}

#fileNameInput {
    width: 350px;
}