/* Shared visual examples for the Block Reference and App User Guide. */

/* Current TITAN toolbar controls ----------------------------------- */
.ui-pill,
#help-content > .ref-cat:first-of-type .ref-blk {
  display:inline-flex;
  width:max-content;
  min-height:30px;
  align-items:center;
  gap:5px;
  margin:2px;
  padding:6px 13px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.22);
  color:#fff;
  font-family:'Nunito',sans-serif;
  font-size:.78rem !important;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}

.ui-pill.pill-dark,.guide-menu-button { background:#4a5568 !important; }
.ui-pill.pill-green,.guide-run-button { background:#2e8b4a !important; }
.ui-pill.pill-red,.guide-stop-button { background:#9b1c1c !important; }
.ui-pill.pill-blue,.guide-connect-button { background:#3a7ec2 !important; }
.ui-pill.pill-orange,.guide-upload-button { background:#c85c00 !important; }
.ui-pill.pill-status,.guide-status-pill {
  min-height:28px;
  border-color:rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.62) !important;
  font-size:.68rem !important;
}
.guide-panel-tab { border-color:#2a5a2a !important;background:#0e2a1a !important;color:#7dbf7d !important; }
.guide-console-button { border-color:#2a5a2a !important;background:#0e2a1a !important;color:#4a8a4a !important; }
.guide-python-button { background:#3a5a9a !important; }
.guide-tab,.tab-mock {
  min-height:31px;
  border:1px solid #c8b87a !important;
  border-bottom:0 !important;
  border-radius:6px 6px 0 0 !important;
  background:#f5f0e4 !important;
  box-shadow:none !important;
  color:#2a5a2a !important;
}
.guide-new-tab { background:#2a3a2a !important;color:#d8ead8 !important; }
.guide-slot { min-width:30px;justify-content:center;padding-inline:8px !important; }

/* Blockly statement blocks ---------------------------------------- */
#help-content > .ref-cat:not(:first-of-type) .ref-block-wrap,
.block-program {
  overflow-x:auto;
  padding:7px 7px 11px 2px;
  scrollbar-color:#527057 transparent;
}

#help-content > .ref-cat:not(:first-of-type) .ref-blk,
.blk {
  position:relative;
  display:inline-flex;
  width:max-content;
  max-width:none;
  min-height:39px;
  align-items:center;
  gap:5px;
  margin:2px;
  padding:10px 17px 15px;
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,25px 0,30px 6px,42px 6px,47px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 14px),calc(100% - 9px) calc(100% - 6px),47px calc(100% - 6px),42px 100%,30px 100%,25px calc(100% - 6px),0 calc(100% - 6px));
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),transparent 32%,rgba(0,0,0,.16)) !important;
  box-shadow:none;
  color:#fff;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.28));
  font-family:'Nunito',sans-serif;
  font-size:.75rem;
  font-weight:800;
  line-height:1.25;
  vertical-align:middle;
  white-space:nowrap;
}

.blockly-hat {
  padding-top:13px !important;
  clip-path:polygon(0 12px,8px 5px,20px 1px,38px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 14px),calc(100% - 9px) calc(100% - 6px),47px calc(100% - 6px),42px 100%,30px 100%,25px calc(100% - 6px),0 calc(100% - 6px)) !important;
}

.blockly-terminal {
  padding-bottom:10px !important;
  clip-path:polygon(0 0,25px 0,30px 6px,42px 6px,47px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%) !important;
}

.blockly-reporter,
#help-content > .ref-cat.sensor-category .ref-blk,
.blk.blk-sensor {
  min-height:32px;
  padding:7px 14px;
  border-radius:999px;
  clip-path:none;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));
}

.blockly-boolean {
  min-height:34px;
  padding:7px 18px;
  border-radius:0;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
}

.ref-oval {
  border:1px solid rgba(0,0,0,.32);
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
  color:#252525;
}
.ref-slot {
  border:1px solid rgba(0,0,0,.3);
  border-radius:4px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.14);
  color:#252525;
}

.block-program { display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:0 !important; }
.block-program .blk { display:flex;margin:0 0 -5px; }

@media (min-width:701px) {
  #help-content > .ref-cat:not(:first-of-type) .ref-block-wrap { min-width:min(48%,480px);max-width:52%; }
}

@media (max-width:700px) {
  #help-content .ref-card { flex-direction:column; }
  #help-content .ref-block-wrap { min-width:100% !important;max-width:100% !important; }
  .ui-mock-header { overflow-x:auto; }
}