/*
Copyright 2015-2018, University of Colorado Boulder
This PhET-iO file requires a license
USE WITHOUT A LICENSE AGREEMENT IS STRICTLY PROHIBITED.
For licensing, please contact phethelp@colorado.edu
*/

:root {

  /* sizing and spacing */
  --gutter-size: 7px;
  --control-panel-width: 155px;
  --search-bar-height: 28px;
  --search-input-border-bottom-height: 2px;
  --search-controls-width: 170px;

  --control-panel-padding: 12px;
  --tree-panel-padding: 4px;
  --instance-panel-padding: 4px;

  /* colors */
  --gutter-color: #bcbcbc;
  --panel-color: #eeeeee;

  /* fonts */
  --title-font: "Trebuchet MS", Helvetica, sans-serif;
  --code-font: "Lucida Console", Monaco, monospace;
  --text-font: Arial, Helvetica Neue, Helvetica, sans-serif;
  --tree-panel-font-size: 0.9em;
}

html,
body {
  margin: 0;
  overflow: hidden;
  background: var(--gutter-color);
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: calc(100% - 2 * var(--gutter-size));
  height: calc(100% - 2 * var(--gutter-size));
  border: var(--gutter-size) solid var(--gutter-color);
}

/* Studio divs ------------------------------------------------------------------------------------------------------ */

#left {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
}

#tree-panel {
  width: 100%;
  height: calc(100% - var(--search-bar-height) - var(--search-input-border-bottom-height));
  overflow: scroll;
  white-space: nowrap;
  background: var(--panel-color);
}

#search-bar {
  background: white;
  height: var(--search-bar-height);
}

#search-input {
  height: var(--search-bar-height);
  font-family: var(--code-font);
  font-size: var(--tree-panel-font-size);
  border: none;
  border-bottom: var(--search-input-border-bottom-height) solid var(--gutter-color);
  float: left;
  width: calc(100% - var(--search-controls-width) - 2 * var(--tree-panel-padding));
  padding: 0 0 0 5px;
}

#search-controls {
  float: right;
  padding-top: 5px;
  background: white;
  width: var(--search-controls-width);
}

#search-counts {
  float: left;
  background: white;
  margin: 1px 3px 0;
}

.search-button {
  float: right;
  width: 24px;
  height: 18px;
  margin: 0 3px;
  padding: 0;
}

#right {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
}

#top {
  width: 100%;
  float: left;
}

#top-left {
  min-width: 20px;
  max-width: calc(100% - var(--control-panel-width) - var(--gutter-size));
  min-height: 20px;
  height: 100%;
  display: inline-block;
  float: left;
}

#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: black;
}

/* sim iframe */
#source {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  border: none;
}

#top-right {
  min-width: var(--control-panel-width);
  height: 100%;
  float: left;
  display: inline-block;
}

#control-panel {
  height: calc(100% - 2 * var(--control-panel-padding));
  padding: var(--control-panel-padding);
  overflow-y: scroll;
  background: var(--panel-color);
}

#bottom {
  width: 100%;
  float: left;
}

#instance-and-type-container {
  height: 100%;
  overflow-y: scroll;
  font-family: var(--text-font);
  font-size: 1em;
  background: var(--panel-color);
}

#instance-panel {
  min-height: 7vw;
  overflow-wrap: break-word;
  padding: var(--instance-panel-padding);
}

#type-panel {
  background: #eeeeee;
}

/* General styling -------------------------------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  font-family: var(--title-font);
}

p {
  font-size: 16px;
  margin: 4px;
}

ul, td {
  color: #222222;
}

.metadata-name {
  margin-right: 5px;
}

li {
  font-size: 16px;
  color: #222222;
}

hr {
  margin: 0.75em
}

dd {
  margin-left: 40px;
  color: #222222;
}

dt {
  font-weight: bold;
}

/* Tree panel contents styling -------------------------------------------------------------------------------------- */

p.treeElement {
  font-size: var(--tree-panel-font-size);
  font-family: var(--code-font);
  cursor: pointer;
  margin: 4px 4px 4px 0;
}

.selectedTreeElement {
  background: yellow;
}

.selectedTreeElementAncestor {
  background: #fffec5;
}

/* Support for linked elements*/

.linkedElement {
  color: blue; /*TODO: match this styling with the linked div panel?  Or generally improve it?*/
}

.linkedDivDescriptor {
  font-size: 1.3em;
  margin-bottom: 12px;
}

/*Showing the div for a linked element, but inline*/
.linkedDiv {
  background: #fcfcfc;
  border: var(--gutter-color);
  border-style: dashed;
  border-width: 4px;
  padding: 8px;
  margin-left: 6px;
  margin-right: 12px;
}

/* Control panel contents styling ----------------------------------------------------------------------------------- */

h5.count-title {
  font-size: 14px;
  font-family: var(--title-font);
  margin: 0 0 4px 0;
}

.heading-title {
  margin: 8px 0 8px 0;
}

.heading-title:first-child {
  margin-top: 0;
}

label.radio-button-label {
  font-family: var(--text-font);
  font-weight: 300;
  margin: 4px 0 6px 0;
  cursor: pointer;
}

.radio-button {
  margin: -0px 2px 6px 2px;
  vertical-align: center;
  display: inline-block;
  cursor: pointer;
}

#control-panel-buttons {
  width: 100%;
  margin-top: 20px;
}

.control-panel-button {
  width: calc(var(--control-panel-width) - 2 * var(--control-panel-padding));
  font-size: 15px;
  font-family: var(--title-font);
  margin-top: 10px;
  border: 2px solid black;
  border-radius: 2px;
  background: white;
}

/* Instance panel contents styling ---------------------------------------------------------------------------------- */

.friendlyName {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: black;
  margin-bottom: 4px;

  /*This causes the friendly name to take its own line, and the next part appears below it.*/
  display: block;
}

.codeName {
  font-size: 1em;
  font-family: var(--code-font);
  background: yellow;
  margin-bottom: 4px;
}

.tiny {
  margin: 0;
  padding: 0;
}

.displayBlock {
  display: block;
  margin: 0;
  padding: 0;
  margin-top: 4px;
}

.propertyValue {
  display: block;
  margin-top: 4px;
  color: blue;
}

.phetio-documentation {
  width: calc(100% - 2 * var(--instance-panel-padding));
  margin-top: 8px;
  font-size: 16px;
}

.disabled {
  opacity: .5
}

/* Type panel contents styling -------------------------------------------------------------------------------------- */

h5.typeName {
  font-weight: 900;
  font: 1.2em "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
  color: cornflowerblue;
  margin: 12px 4px 12px 4px;
}

/* Highlighting for the supertype links */
a.supertypeLink {
  text-decoration: underline;
}

/* It looks odd for the anchors to become colored, so suppress it. */
a.supertypeLink:visited {
  color: cornflowerblue;
}

.typeDeclarationBody span {
  color: #222222;
}

.typeDeclarationBody {
  padding: 0 1.25em;
}

/* Gutters */

.gutter {
  display: inline-block;
  background: var(--gutter-color);
  cursor: grab;
  float: left;
}

.gutter-horizontal {
  height: 100%;
}

.gutter-vertical {
  width: 100%;
}