/* 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';
@import 'target-home';

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

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

/* Open Sans font */
@font-face  {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         data-uri('../docs/static/fonts/Open_Sans/OpenSans-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         data-uri('../docs/static/fonts/Open_Sans/OpenSans-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

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

@buttonBackgroundColor: white;
@buttonForegroundColor: #5E5E5E;

.ui.button.editortools-btn, .simtoolbar .ui.button,
    .ui.button.collapse-button, .ui.button.collapsed-button {
    background-color: @buttonBackgroundColor;
    color: @buttonForegroundColor;
    border: none !important;
    box-shadow: none !important;
}
.ui.button.editortools-btn:hover, 
.ui.button.editortools-btn:focus {
    color: darken(@buttonForegroundColor, 0.2) !important;
}

.ui.input.projectname-input input {
    box-shadow: none; border: none !important;
}

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

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

/* Menu bar colors */
.ui.menu .ui.item {
    color: #4A4A4A;
}
.fullscreensim .menubar .ui.menu {
    box-shadow: none !important;
    border-bottom: 0 !important;
}

/* logo */
#logo a.ui.image .ui.logo {
    min-width: 2.0rem;
}

/* Editor menu toggle */
.menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
    background: fade(@blue, 10%) !important;
    border: 1px solid #888888;
    border-radius: 0px !important;
}
.menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
    border-radius: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active {
    color: white;
}

.menubar .ui.item.editor-menuitem .item.toggle {
    height: 45px;
}

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

/* lowercase menu items */
.menubar .ui.menu.fixed > .left.menu > .ui.item > .ui.text,
    .menubar .ui.menu.fixed > .ui.item > span {
    text-transform: lowercase;
}

#filelist {
    background: @simulatorBackground data-uri("../docs/static/backgrounds/simulator.png") 0 0 repeat !important;
}

#downloadArea {
    background: @legoGreyLight;
}

/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
    #filelist {
        background: transparent;
    }
}

/* 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) {

}

/* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */
@media only screen and (min-width: @computerBreakpoint) {
    .fullscreensim #boardview {    
        background: @simulatorBackground data-uri("../docs/static/backgrounds/simulator.png") 0 0 repeat !important;
    }
}
/* Mobile, Tablet AND thin screen */
@media only screen and (max-width: @largestTabletScreen) and (max-height: @thinEditorBreakpoint) {
    .sandboxfooter a:not(.thin) {
        color: @black !important;
    }
}

/** high contrast **/
.hc {
    .ui.menu, #downloadArea,
    .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active {
        background-color: black !important;
        color: white !important;
    }
    .ui.red.corner.label {
        border-color: #d4000d!important;
    }
    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
        border-color: white !important;
    }
}