/* Import all components */
/* Import all components */
/*******************************
         Site Settings
*******************************/
/*-------------------
       Fonts
--------------------*/
/*-------------------
      Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text  */
/*-------------------
    Border Radius
--------------------*/
/* See Power-user section below
   for explanation of @px variables
*/
/*-------------------
    Brand Colors
--------------------*/
/*--------------
  Page Heading
---------------*/
/*--------------
   Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
/*-------------------
    Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
        Sizes
--------------------*/
/*
  Sizes are all expressed in terms of 14px/em (default em)
  This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
        Page
--------------------*/
/*-------------------
      Paragraph
--------------------*/
/*-------------------
       Links
--------------------*/
/*-------------------
    Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
  Highlighted Text
--------------------*/
/*-------------------
       Loader
--------------------*/
/*-------------------
        Grid
--------------------*/
/*-------------------
     Transitions
--------------------*/
/*-------------------
     Breakpoints
--------------------*/
/*-------------------
      Site Colors
--------------------*/
/*---  Colors  ---*/
/*---  Light Colors  ---*/
/*---   Neutrals  ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Colored Border ---*/
/*-------------------
     Alpha Colors
--------------------*/
/*-------------------
       Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
           Power-User
*******************************/
/*-------------------
    Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
        Paths
--------------------*/
/* For source only. Modified in gulp for dist */
/*-------------------
       Em Sizes
--------------------*/
/*
  This rounds @size values to the closest pixel then expresses that value in (r)em.
  This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
       Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
     Neutral Text
--------------------*/
/*-------------------
     Brand Colors
--------------------*/
/*-------------------
      Borders
--------------------*/
/*-------------------
    Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
  Exact Pixel Values
--------------------*/
/*
  These are used to specify exact pixel values in em
  for things like borders that remain constantly
  sized as emSize adjusts

  Since there are many more sizes than names for sizes,
  these are named by their original pixel values.

*/
/* Columns */
/*******************************
             States
*******************************/
/*-------------------
      Disabled
--------------------*/
/*-------------------
        Hover
--------------------*/
/*---  Shadows  ---*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
        Focus
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
    Down (:active)
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
        Active
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*******************************
     User Global Variables
*******************************/
/*-------------------
     Fonts
--------------------*/
/*-------------------
   Breakpoints
--------------------*/
/*
@mobileBreakpoint            : unit( (63 * @emSize), px);
@tabletBreakpoint            : unit( (79 * @emSize), px);
@computerBreakpoint          : unit( (91 * @emSize), px);
@largeMonitorBreakpoint      : unit( (99 * @emSize), px);
@widescreenMonitorBreakpoint : unit( (119 * @emSize), px);
*/
/*******************************
     PXT Variables
*******************************/
/*-------------------
   Menu
--------------------*/
/*-------------------
   Layout
--------------------*/
/*-------------------
   Background
--------------------*/
/*-------------------
   Full screen
--------------------*/
/*-------------------
   Side Docs
--------------------*/
/*-------------------
   Editor
--------------------*/
/*-------------------
   Blockly
--------------------*/
/*-------------------
   Flyout
--------------------*/
/*******************************
             Blockly
*******************************/
/* Lower Z index for BlocklyWidgetDiv and grid picker tooltips */
.blocklyWidgetDiv {
  z-index: 105;
}
.blocklyGridPickerTooltip {
  z-index: 106;
}
.blocklyGridPickerPadder {
  box-shadow: 0px 0px 8px 1px;
}
/* Set Z index of the Blockly scrollbars to be beneath the BlocklyWidgetDiv */
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
  z-index: 8 !important;
}
.blocklyTooltipDiv {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  /* wrap the JS text inside a blockly Tooltip */
  overflow-wrap: break-word;
}
.blocklyToolboxDiv,
.monacoToolboxDiv {
  background: rgba(0, 0, 0, 0.05) !important;
  z-index: 1;
  -webkit-transition: width 1s, background 0.3s;
  /* Safari */
  -moz-transition: width 1s, background 0.3s;
  /* Mozilla */
  -webkit-transition-timing-function: ease-in;
  /* Mozilla */
  -o-transition: width 1s, background 0.3s;
  /* Opera */
  transition: width 1s, background 0.3s;
  transition-timing-function: ease-in;
}
.blocklyToolboxDiv.blocklyToolboxDeleting {
  background: #db0000 !important;
}
svg.blocklySvg {
  background-color: #fff !important;
}
#blocksEditor .injectionDiv svg {
  overflow: visible;
}
span.blocklyTreeLabel,
text.blocklyText,
input.blocklyHtmlInput {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
}
/* Using 1rem creates font size issues in Edge
text.blocklyText {
    font-size:1rem !important;
} */
span.blocklyTreeLabel {
  font-size: 1.25rem;
}
span.blocklyTreeLabel,
text.blocklyText {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.blocklyFlyoutButtonShadow {
  fill: none !important;
}
.blocklyFlyoutLabelText {
  fill: white !important;
  font-size: 1rem;
}
.blocklyFlyoutHeading .blocklyFlyoutLabelText {
  fill: white !important;
  font-size: 1.5rem;
}
.blocklyFlyoutLabelText:hover {
  fill: white !important;
}
.blocklyFlyoutLabelIcon {
  font-family: 'Icons';
  font-size: 1.5rem;
}
line.blocklyFlyoutLine {
  stroke: white;
}
/* Opacity of blockly flyout background */
.blocklyFlyoutBackground {
  fill: #505050;
  fill-opacity: 0.9 !important;
}
div.blocklyTreeRow,
span.blocklyTreeLabel {
  cursor: pointer;
}
/* This horrendous selector and the next are for subcategories in the Blockly toolbox */
div.blocklyTreeRoot div div div div div.blocklyTreeRow {
  border-left-width: 12px !important;
  padding-left: 0px !important;
}
div.blocklyTreeRoot div div div div div.blocklyTreeRow span.blocklyTreeLabel {
  font-size: 1rem;
}
/* The trash icon inside the toolbox */
#blocklyTrashIcon {
  position: absolute;
  top: 30%;
  left: 0;
  text-align: center;
  width: 100px;
  height: 80px;
  z-index: 100;
  font-size: 5rem;
  color: #E2008C;
}
.rtl #blocklyTrashIcon {
  right: 0;
  left: auto;
}
/* Blockly / Monaco Toolbox Buttons */
#blocklyToolboxButtons,
#monacoToolboxButtons {
  margin-top: 0.1rem;
  font-size: 3rem;
}
/* Blockly Search bar */
.blocklySearchInputField {
  border: 0 !important;
  border-radius: 0 !important;
}
div.blocklyTreeIcon span {
  vertical-align: middle;
}
/* Blockly toolbox icons */
span.blocklyTreeIcon {
  opacity: 1;
  margin: 0.0em 0.25em 0.0em 0.25em;
  width: 30px;
  font-family: 'Icons';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  speak: none;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  font-size: 1.3rem;
  height: 100%;
  display: none;
}
.blocklyTreeSelected .blocklyTreeIcon {
  color: white;
}
.blocklyTreeIcon.blocklyTreeIconsearch::before {
  content: "\f002";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconDefault::before {
  content: "\f12e";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
  content: "\f078";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
  content: "\f077";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconmore::before {
  content: "\f141";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
  content: "\f055";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconloops::before {
  content: "\f01e";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconmath::before {
  content: "\f1ec";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconlogic::before {
  content: "\f074";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconvariables::before {
  content: "\f039";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIcontext::before {
  content: "\f035";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconarrays::before {
  content: "\f0cb";
  vertical-align: middle;
}
.blocklyTreeIcon.blocklyTreeIconfunctions {
  font-family: xicon !important;
}
.blocklyTreeIcon.blocklyTreeIconfunctions::before {
  content: "\f107";
  vertical-align: middle;
}
.blocklyFlyoutLabelIcon.blocklyFlyoutIconfunctions {
  font-family: xicon !important;
}
/* Blockly Slider field */
.blocklyWidgetDiv .goog-slider-horizontal {
  background: white;
  border: 2px solid black;
  border-radius: 5px;
}
/* Fade out disabled blocks, but don't completely lose the colour */
.blocklyDisabled > .blocklyPathDark {
  display: block !important;
  fill-opacity: 0.5;
}
/* This is to ensure the leds inside showLeds fill the entire checkbox */
text.blocklyCheckbox {
  fill: #ff3030 !important;
  text-shadow: 0px 0px 6px #f00;
  font-size: 17pt !important;
}
/*******************************
        Media Adjustments
*******************************/
/* Large Monitor */
@media only screen and (min-width: 1200px) {
  /* Blockly */
  div.blocklyTreeRow {
    min-width: 200px;
    min-height: 40px;
  }
  span.blocklyTreeIcon {
    line-height: 40px;
  }
  #blocklyTrashIcon {
    width: 200px;
  }
}
/* Small Monitor */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Blockly row */
  div.blocklyTreeRow {
    min-width: 180px;
    min-height: 40px;
  }
  span.blocklyTreeIcon {
    line-height: 40px;
  }
  #blocklyTrashIcon {
    width: 180px;
  }
}
/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Blockly */
  div.blocklyTreeRow {
    min-width: 150px;
    min-height: 45px;
    border-left-width: 12px !important;
  }
  span.blocklyTreeIcon {
    line-height: 45px;
  }
  #blocklyTrashIcon {
    width: 150px;
  }
  div.blocklyTreeRoot div div div div div.blocklyTreeRow {
    border-left-width: 18px !important;
  }
}
/* Mobile */
@media only screen and (max-width: 767px) {
  div.blocklyTreeRow {
    min-width: 50px;
    min-height: 50px;
    border-left-width: 6px !important;
  }
  span.blocklyTreeIcon {
    line-height: 50px;
  }
  #blocklyTrashIcon {
    width: 50px;
  }
}
/* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */
@media only screen and (min-width: 992px) {
  /* Blockly */
  div.blocklyTreeRow {
    border-left-width: 12px !important;
  }
  div.blocklyTreeRoot div div div div div.blocklyTreeRow {
    border-left-width: 18px !important;
  }
}
/* <= Small Monitor (Mobile + Tablet + Small Monitor) */
@media only screen and (max-width: 1199px) {
  /* Blockly */
  span.blocklyTreeLabel {
    font-size: 1rem;
  }
}
/* <= Tablet (Mobile + Tablet) */
@media only screen and (max-width: 991px) {
  /* Blockly */
  span.blocklyTreeLabel {
    font-size: 1rem;
  }
}
/* Mobile */
@media only screen and (max-width: 767px) {
  /* Hide blockly tree labels on mobile */
  span.blocklyTreeLabel,
  div.blocklyTreeRow:hover span.blocklyTreeLabel,
  div.blocklyTreeRow.blocklyTreeSelected:hover span.blocklyTreeLabel {
    display: none !important;
  }
  div.blocklyTreeRow {
    padding-right: 0;
    text-align: center;
  }
  div.blocklyTreeRoot div div div div div.blocklyTreeRow {
    border-left-width: 8px !important;
  }
  text.blocklyCheckbox {
    font-size: 17pt !important;
  }
  /* Blockly trash icon */
  #blocklyTrashIcon {
    font-size: 3rem;
  }
  /* Hide the blockly toolbox search */
  #blocklySearchArea {
    display: none !important;
  }
}
