// Normalize
@import './normalize';

// Moving into parts
@import './variables';
@import './scenegraph';
@import './sidebar';
@import './components';
@import './modals';
@import './toolbar';
@import './forms';
@import './gallery';
@import './chat';

body.aframe-inspector-opened,
.toggle-edit {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.wf-roboto-n4-active body.aframe-inspector-opened,
.wf-roboto-n4-active .toggle-edit {
  font-family: Roboto, BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.Select,
code,
pre,
input,
textarea,
select {
  font-family: Consolas, Andale Mono, Monaco, Courier New, monospace;
}

.wf-robotomono-n4-active .Select,
.wf-robotomono-n4-active code,
.wf-robotomono-n4-active pre,
.wf-robotomono-n4-active input,
.wf-robotomono-n4-active textarea,
.wf-robotomono-n4-active select {
  font-family: Roboto Mono, Consolas, Andale Mono, Monaco, Courier New, monospace;
}

body.aframe-inspector-opened {
  color: #fff;
  font-size: 12px;
  margin: 0;
  overflow: hidden;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
}

a {
  cursor: pointer;
}

button {
  position: relative;
}

code {
  font-family: Consolas, Andale Mono, Monaco, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}

textarea {
  tab-size: 4;
  white-space: pre;
  word-wrap: normal;
}

textarea.success {
  border-color: #8b8 !important;
}

textarea.fail {
  background-color: rgba(255, 0, 0, 0.05);
  border-color: #f00 !important;
}

textarea,
input {
  outline: none; /* osx */
}

.toggle-edit {
  background-color: #ed3160;
  color: #fff;
  font-size: 12px;
  left: 3px;
  margin: 0;
  padding: 6px 10px;
  position: fixed;
  text-align: center;
  text-decoration: none;
  top: 3px;
  width: 204px;
  z-index: 99999;
}

.toggle-edit:hover {
  background-color: rgb(228, 43, 90);
}

input {
  background-color: transparent;
  border: 1px solid #555;
  color: #fff;
}

input,
.texture canvas {
  transition: 0.1s background-color ease-in-out, 0.1s border-color ease-in-out, 0.1s color ease-in-out;
}

.texture-uploader {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
  overflow: hidden;
  border: 1px solid #666;
  background: black;
}

.texture-uploader:hover {
  border-color: white;
}

.texture-uploader a.button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
}

.texture-uploader input {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.01;
  position: absolute;
  z-index: 1000;
}

input[type=text],
input[type=number],
input.string,
input.number {
  min-height: 14px;
  outline: none;
}

input.number {
  background-color: transparent !important;
  border: 0;
  color: #20b1fb !important;
  cursor: col-resize;
  font-size: 12px;
  padding: 2px;
}

input.string:focus,
input.number:focus {
  border: 1px solid #20b1fb;
  color: #fff;
  cursor: auto;
}

input.error {
  border: 1px solid #a00;
}

input,
textarea,
select {
  background: #222;
  border: 1px solid transparent;
  color: #888;
}

input[type=color] {
  background-color: #333;
  border: 1px solid #111;
  cursor: pointer;
}

.texture canvas {
  cursor: pointer;
}

.texture canvas:hover {
}

input[type=color] {
  cursor: pointer;
  height: 16px;
  padding: 0;
  width: 64px;
}

/* Note: these vendor-prefixed selectors cannot be grouped! */
input[type=color]::-webkit-color-swatch {
  border: 0;  /* To remove the gray border. */
}

input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;  /* To remove the inner padding. */
}

input[type=color]::-moz-color-swatch {
  border: 0;
}

input[type=color]::-moz-focus-inner {
  border: 0;  /* To remove the inner border (specific to Firefox). */
  padding: 0;
}

div.vec2,
div.vec3,
div.vec4 {
  display: inline;
}

.vec2 input.number,
.vec3 input.number {
  width: 46px;
}

.vec4 input.number {
  width: 34px;
}

.hidden {
  visibility: hidden;
}

.uploader-normal-button .hidden {
  display: none;
}

.texture canvas + input {
  margin-left: 5px;
}

.texture .fa {
  padding-right: 5px;
}

.texture .fa-external-link {
  font-size: 14px;
  padding-top: 2px;
}

a.button {
  color: @grey;
  font-size: 16px;
  margin-left: 10px;
  text-decoration: none;
}

a.button:hover {
  color: @brand-color;
}

.hide {
  display: none;
}

span.value {
  color: #fff;
  display: inline-block;
}

span.mixinlist {
  color: #888 !important;
  display: inline-block;
}

span.mixinlist ul {
  background-color: #222;
  list-style-type: none;
  margin: 5px 0 0;
  padding: 5px;
}

span.mixinlist ul li {
  font-size: 11px;
  margin-bottom: 3px;
}

span.mixinlist ul li:last-child {
  margin-bottom: 0;
}

span.mixin {
  display: inline-block;
  width: 100px;
}

.mixinlist {
  margin-left: 120px;
}

span.subcomponent {
  color: #999;
  float: none !important;
  margin-left: 10px;
  vertical-align: top !important;
}

.a-canvas.state-dragging {
  cursor: grabbing;
}

.tagName {
  font-weight: 500;
}

.local-transform {
  padding-left: 10px;
}

.local-transform label {
  color: #aaa;
  padding-left: 5px;
}

.local-transform a.button {
  padding-top: 0;
}

a.flat-button {
  background-color: #262626;
  color: @grey;
  font-size: 11px;
  margin-left: 10px;
  padding: 5px;
  text-decoration: none;
}

a.flat-button:hover {
  color: @brand-color;
}

a.help-link {
  opacity: 0.4;
}

a.help-link:hover {
  opacity: 1;
}

#right-panels {
  align-items: stretch;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  right: 0;
  top: 0;
}

#aframe-inspector-panels {
  display: flex;
  justify-content: space-between;
}

/* This is a temporaly hack, we should style the editor instead of overwriting
   the a-scene to fix the "display: block" issue. */
.aframe-inspector-opened a-scene {
  display: inline !important;
}

.aframe-inspector-opened a-scene .a-canvas {
  background-color: #191919;
  z-index: 9998;
}

.new_asset_options {
  margin: 10px;
}

.new_asset_options > ul {
  margin-left: 10px;
  padding: 5px;
}

.new_asset_options > ul > li {
  padding: 10px 0;
}

.new_asset_options .imageUrl {
  margin-left: 5px;
  width: 350px;
}

span.entity-name {
  color: #fff;
  font-family: Consolas, Andale Mono, Monaco, Courier New, monospace;
  font-size: 16px;
}

.add-component {
  width: 200px;
}

.row input[type=text],
.row input[type=number],
.row input.string,
.row input.number {
  background: #222;
  border: 1px solid transparent;
  color: @brand-color;
  min-height: 20px;
  padding-left: 5px;
  padding-right: 5px;
}

.row input.string {
  box-sizing: border-box;
  width: 165px;
}

.help-lists {
  display: flex;
  justify-content: space-around;
}

.help-list {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
  width: 350px;
}

.help-list li {
  margin-right: 40px;
}

.help-key-unit {
  line-height: 1.8;
  margin-right: 2em;
  padding: 5px 0;
}

.help-key {
  bottom: 2px;
  margin-right: 4px;
  min-width: 60px;
  position: relative;
}

.help-key span {
  background-color: #2e2e2e;
  background-repeat: repeat-x;
  border: 1px solid #666;
  border-radius: 3px;
  box-shadow: 0 0 5px #000;
  color: #999;
  display: inline-block;
  font-size: 12px;
  padding: 0 8px;
  text-align: center;
}

.help-key-def {
  color: #bbb;
  display: inline-block;
  margin-left: 1em;
}

.add-component {
  text-align: left;
}

.add-component .option {
  display: flex;
  justify-content: space-between;
}

.add-component .option span {
  color: @brand-color;
}

.add-component-container {
  align-items: center;
  background-color: #2b2b2b;
  display: flex;
  justify-content: center;
  padding: 10px;
}

.aregistry-button {
  font-size: 12px;
  margin-left: 10px;
  padding: 8px;
}

.aregistry-button:hover {
  background-color: @brand-color;
}

.aregistry-button img {
  height: 20px;
  width: 20px;
}

.assets.search {
  margin-top: 10px;
  width: 200px;
}

.assets.search .fa-search {
  top: 7px;
}

/* Dropdown menu */
.dropbtn {
  border: none;
  color: white;
  cursor: pointer;
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  background-color: #f9f9f9;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  display: none;
  left: 8px;
  min-width: 38px;
  position: absolute;
  z-index: 999;
}

.dropdown-content a {
  background-color: #232323;
  color: #7d7d7d;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #4ecbff;
  color: #fff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  color: @brand-color;
}

.savedRecordings {
  display: inline-block;
  margin-top: 10px;
  vertical-align: middle;
  width: 80%;
}
