body {
  background-color: #222;
  margin: 0;
  overflow: hidden;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Roboto+Mono&display=swap");

#editor-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

  font-family: "Inter", sans-serif;
  color: var(--clr-text);
}

::selection {
  background-color: var(--clr-accent);
}

* {
  box-sizing: border-box;
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Likely future */
}

/* width */

::-webkit-scrollbar {
  width: 12px;
}

/* Track */

::-webkit-scrollbar-track {
  background: transparent;
  width: 10px;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: rgba(133, 133, 133, 0.5);
  border: 2px solid rgba(255, 255, 255, 0);
  background-clip: padding-box;

  border-radius: 100px;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* disable pointer event for mouse viewport navigation */

#editor-ui {
  pointer-events: none;
}

#editor-ui > * {
  pointer-events: all;
}

:root {
  --border: 1px solid var(--clr-bg-lighter);
  --border-muted: 0.5px solid var(--clr-bg-lighter);
}

.react-contextmenu {
  display: none;
  z-index: 1000;
}

.react-contextmenu--visible {
  display: block;
  cursor: default;

  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);

  background-color: var(--clr-bg);
  border: var(--border);
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);

  border-radius: 4px;
}

.react-contextmenu-item {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
}

.react-contextmenu-item:hover {
  background-color: var(--clr-accent-muted);
}

.react-contextmenu-item--divider {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  background-color: transparent !important;
}

.react-contextmenu-item--divider::after {
  content: "";
  display: block;
  border: var(--border-muted);
}

.inspector-container {
  height: 100vh;
}

.entity-list-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

h1,
h2,
h3,
h4 {
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-m);
  font-weight: 400;
}

.header-label {
  font-weight: normal;
  font-size: 0.75rem;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  font-weight: 500;

  opacity: 0.5;
}

#editor-ui {
  font-size: 14px;
}

.typography-base {
  font-family: "Inter", sans-serif;
  color: var(--clr-text);
  font-size: 14px;
}

.inspector-text {
  font-size: 12px;
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-s);
  opacity: 0.4;
}

/* .header-label {
  padding-top: var(--spacing-s);
} */

:root {
  --clr-text: hsl(0, 0%, 100%);
  --clr-accent: rgb(155, 81, 224);
  --clr-accent-lighter: rgb(183, 115, 247);
  --clr-accent-muted: rgba(155, 81, 224, 0.5);
  --clr-bg: rgb(41, 41, 41);
  --clr-bg-darker: rgb(31, 31, 31);
  --clr-bg-lighter: rgb(59, 59, 59);
  --clr-bg-lightest: rgb(83, 83, 83);

  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-m: 1rem;
  --spacing-l: 2rem;

  --shadow-default: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

body {
  font-size: 14px;
}

form {
  display: flex;
  flex-direction: column;
}

input[type="text"],
input[type="password"] {
  font-family: "Inter", sans-serif;

  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);

  background-color: var(--clr-bg);
  border: 1px solid var(--clr-bg-lighter);
  font-size: 12px;

  border-radius: 4px;

  width: 100%;

  color: var(--clr-text);
}

input[type="text"]:focus,
input[type="password"]:focus {
  border: 1px solid var(--clr-text);
  /* background-color: var(--clr-bg-lighter); */
  background-color: var(--clr-bg-lighter);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}

.field {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--spacing-m);
}
.field > * {
  flex-grow: 1;
  margin-right: var(--spacing-s);
}
.field > *:last-child {
  margin-right: 0rem;
}

.field:last-child {
  margin-bottom: var(--spacing-s);
}

.field--stack {
  flex-direction: column;
}

.field--stack > * {
  margin-bottom: var(--spacing-s);
}
.field--stack > *:last-child {
  margin-bottom: 0rem;
}

.field--no-stretch > * {
  flex-grow: 0;
}

label {
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;
  letter-spacing: 0.065em;
}

label > *:first-child {
  margin-top: 4px;
}

label:focus-within {
  color: var(--clr-text);
}

.btn-primary:disabled {
  opacity: 0.3;
}

button[type="submit"],
.btn-primary,
.btn-secondary {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);

  color: var(--clr-text);
  background-color: var(--clr-accent);
  border: 1px solid var(--clr-accent);

  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.065em;

  border-radius: 4px;
}

button[type="submit"]:hover,
.btn-primary:hover {
  background-color: var(--clr-accent-lighter);
}

button[type="submit"]:active,
.btn-primary:active {
  background-color: var(--clr-accent-muted);
}

.btn-secondary {
  color: var(--clr-accent-lighter);
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-accent);
}

.btn-secondary:hover {
  background-color: var(--clr-accent-muted);
}

.btn-auxiliary {
  padding: 2px;
  color: var(--clr-text);
  background-color: var(--clr-bg-lighter);
  border: 1px solid var(--clr-bg-lighter);
  border-radius: 4px;
}

.panel {
  --panel-size: 12rem;

  position: absolute;
  display: flex;
  flex-direction: column;

  /* the border handle is outside the box */
  box-sizing: content-box;

  /* min-width: 12rem; */
  color: var(--clr-text);
  background-color: var(--clr-bg);

  /* padding-top: var(--spacing-s); */
  z-index: 100;

  overflow-x: hidden;
  overflow-y: scoll;
}

.panel__button {
  cursor: pointer;
  position: fixed;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  border: none;
  z-index: 0;
}

.panel__button--left,
.panel__button--right {
  height: 10rem;
  width: 1rem;
}

.panel__button {
  --offset: var(--spacing-m);
  position: fixed;
  z-index: 10000;
  padding: 0rem;
}
.panel__button > img {
  width: 1rem;
}

.panel__button--left {
  top: var(--offset);
  left: 0rem;
}
.panel__button--right {
  top: var(--offset);
  right: 0rem;
}

.panel__drag-handle {
  --drag-handle-size: 0.75rem;
  position: absolute;

  width: var(--drag-handle-size);
  height: 100%;

  cursor: col-resize;

  /* for debug */
  /* background-color: var(--clr-accent);
  opacity: 1; */

  z-index: 1000;
}

.panel__drag-handle--right {
  top: 0rem;
  right: 0rem;
  /* left: calc(0rem - var(--drag-handle-size) / 2); */
}

.panel__drag-handle--left {
  top: 0rem;
  left: 0rem;
  /* right: calc(0rem - var(--drag-handle-size) / 2); */
}

.panel--left {
  left: 0rem;
  max-height: 100vh;
  min-height: 100vh;
}
.panel--top {
  top: 0rem;
  max-width: 100vw;
}
.panel--right {
  right: 0rem;
  min-height: 100vh;
  max-height: 100vh;
}
.panel--bottom {
  bottom: 0rem;
  max-width: 100vw;
}

.panel-hor-spacing {
  padding-left: var(--spacing-m);
  padding-right: var(--spacing-m);
}

.panel__header {
  margin-bottom: var(--spacing-m);
  margin-top: var(--spacing-m);
}

.entity-inspector-head {
  background-color: var(--clr-accent);

  /* border-top: 4px solid var(--clr-accent); */
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);

  font-size: 2em;
  min-width: 15rem;
}

.entity-inspector-head--empty {
  border-top-width: 0px;
  background-color: transparent;
}

.entity-inspector-head__entity-name {
  margin-top: var(--spacing-xs);
  /* font-weight: bold; */
}

.entity-inspector-empty-state {
  padding: var(--spacing-m);
  opacity: 0.5;
  font-size: 1rem;
}

.collapsable-section {
  /* reset the padding */
  padding-left: 0rem;
  width: 100%;
  /* border: 1px solid var(--clr-bg-lighter); */
}

.collapsable-section__toggle {
  position: sticky;
  top: 0rem;

  display: flex;
  flex-direction: row;
  align-items: center;

  width: 100%;
  padding-left: var(--spacing-m);
  padding-right: var(--spacing-m);
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  text-align: left;

  color: var(--clr-text);
  background-color: var(--clr-bg);
  border: none;
  border-top: 1px solid var(--clr-bg-lighter);

  z-index: 1;
}

/* the toggle icon */
.collapsable-section__toggle > img {
  margin-right: var(--spacing-s);
  opacity: 0.2;
}

.collapsable-section__group {
  position: relative;
  /* reset the padding */
  padding-top: var(--spacing-s);
  padding-left: var(--spacing-m);
  padding-right: var(--spacing-m);
  width: 100%;
}
.collapsable-section__group:first-child {
  padding-top: var(--spacing-s);
}
.collapsable-section__group:last-child {
  padding-bottom: var(--spacing-m);
}

.collapsable-section__group-container {
  box-sizing: border-box;
  width: 100%;
}

.number-slider {
  font-family: "Roboto Mono", monospace;

  position: relative;

  /* prevent ghost image on drag */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;

  cursor: col-resize;
  width: 100%;
}

.number-slider__value {
  box-sizing: border-box;

  padding: var(--spacing-xs) !important;
  margin: 0rem;

  /* line-height: 1em; */
  border: 1px solid rgba(0, 0, 0, 0);
  outline: none;
  background-color: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: #fff;

  font-family: "Roboto Mono", monospace !important;
  font-size: inherit !important;

  color: var(--clr-accent-lighter);
}

.number-slider__value:focus {
  background-color: var(--clr-bg-lighter);
}

.value-editor {
  width: 100%;
}

.value-editor__group-name {
  font-size: 12px;
  letter-spacing: 0.04em;

  opacity: 0.5;
}

.value-editor__group-container {
  /* margin-top: var(--spacing-xs); */
  width: 100%;
}

.value-editor__group-container--3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--spacing-xs);

  /* margin-top: var(--spacing-xs); */
  width: 100%;
}

.value-editor__field {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.value-editor__field--3-col {
  display: grid;
  grid-template-columns: 1fr 4fr;
  column-gap: var(--spaciong-xs);
  overflow: hidden;
}

.value-editor__label {
  font-size: 12px;

  margin-top: 0px !important;
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);

  opacity: 0.7;
}

.value-editor__description {
  display: block;
  /* float: inline-end; */
  /* vertical-align: middle; */
  font-size: 9px;
  letter-spacing: 0.05em;
  padding-top: 2px;
  padding-bottom: 2px;
  /* background-color: var(--clr-accent-muted); */
  border-radius: 3px;

  opacity: 0.5;
}

.value-editor__button-icon {
  float: right;

  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: none;

  font-size: 12px;

  background-color: transparent;
  color: var(--clr-lighter);
  border-radius: 50rem 50rem 50rem 50rem;
}

.value-editor__button-icon > img {
  height: 1rem;
}

.value-editor__button-icon:hover {
  background-color: var(--clr-bg-lightest);
}

.value-editor__button-icon:active {
  opacity: 0.7;
}

.asset-explorer-header {
  margin: 0rem;
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);
  padding-left: var(--spacing-m);
  position: sticky;
  top: 0rem;

  background: linear-gradient(
    to top,
    rgba(41, 41, 41, 0) 0%,
    rgba(41, 41, 41, 0.8) 50%,
    rgba(41, 41, 41, 1) 100%
  );
  z-index: 10;
}

/*2 columns layout for sidebar and files */
.asset-explorer {
  display: grid;
  /* grid-template-columns: 2fr 5fr;
  grid-template-rows: 60vh 2rem; */

  height: 60vh;

  /* grid-template-areas:
    "side-bar main-content"
    "side-bar bottom-bar"; */
}

.asset-explorer-main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.asset-explorer__bottom-bar {
  grid-area: bottom-bar;
}
.asset-explorer__side-bar {
  grid-area: side-bar;
  overflow: hidden;
}
.asset-explorer__main-content {
  flex-grow: 1;
  overflow-y: scroll;
}

.folder-content-view-container {
  overflow-y: scroll;
  overflow-x: hidden;
}

/**
 * 
 * Breadcrumbs
 * 
 */
.breadcrumbs {
  padding: var(--spacing-xs);
  height: 100%;
  /* border-top: 1px solid var(--clr-bg-lightest); */
  /* border-bottom: 1px solid var(--clr-bg-lightest); */
  background-color: rgba(99, 99, 99, 0.2);
  overflow: hidden;
  overflow-y: scroll;
}

.breadcrumbs,
.breadcrumbs > * {
  display: flex;
  flex-direction: row;
}

.breadcrumbs__connector {
  width: 1rem;
  opacity: 0.2;
}

.breadcrumbs__folder {
  padding: var(--spacing-xs) var(--spacing-xs);

  color: var(--clr-text);
  background-color: transparent;
  border: none;
  border-radius: 4px;

  opacity: 0.5;
}
.breadcrumbs__folder:last-child {
  opacity: 1;
}

.breadcrumbs__folder:hover {
  background-color: var(--clr-bg-lightest);
  opacity: 1;
}

input.draft-edit-field,
div.draft-edit-field {
  display: flex;

  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);

  margin: 0rem;

  border: 1px solid transparent;

  font-size: 12px;
  line-height: 12px;

  box-sizing: border-box;
}

div.draft-edit-field {
  line-height: 15px;
}

input.draft-edit-field:focus {
  border: 1px solid var(--clr-accent);
}

.folder-content-view {
  display: grid;
  padding-top: var(--spacing-m);
  padding-left: var(--spacing-m);
  padding-right: var(--spacing-m);
  padding-bottom: var(--spacing-m);

  --icon-scale: 7rem;

  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--icon-scale), var(--icon-scale))
  );
}

.folder-content-view__item {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: left;

  color: var(--clr-text);
  background-color: transparent;
  border: none;

  --clr-selection: var(--clr-bg-lighter);

  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);

  border-radius: 4px;
}

.folder-content-view__item--focused {
  --clr-selection: var(--clr-accent-muted);
}

.folder-content-view__item > img {
  width: 100%;
  min-height: var(--icon-scale);
  object-fit: contain;
}

.folder-content-view__item--selected {
  background-color: var(--clr-selection);
}

.folder-content-view__item--selected > .folder-content-view__item-label {
  opacity: 1;
}

.folder-content-view__item-label {
  font-size: 12px;
  text-align: center;
  opacity: 0.6;
}

/**
 * 
 * File Tree
 * 
 */
.tree-view {
  --clr-selection: var(--clr-bg-lightest);

  background-color: var(--clr-bg-lighter);
  height: 100%;
  border-radius: 4px 0px 0px 4px;

  padding-left: var(--spacing-s);
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);

  display: flex;
  flex-direction: column;

  overflow-y: scroll;
  overflow-x: scroll;
}

.tree-view--focused {
  --clr-selection: var(--clr-accent-muted);
}

.tree-view__item {
  display: flex;
  align-items: center;

  background-color: transparent;
  color: var(--clr-text);
  border: none;

  border-radius: 4px;
}

.tree-view__item--selected {
  background-color: var(--clr-selection);
}

.tree-view__item-label {
  margin-left: var(--spacing-xs);
  text-align: left;
}

.grid-resize-handle-wrapper {
  position: relative;
  width: 0px !important;
}

.grid-resize-handle-horizontal,
.grid-resize-handle-vertical {
  position: absolute;
  background-color: transparent;
  transition: background-color 0.1s linear;

  z-index: 100;
}

.grid-resize-handle-horizontal {
  width: 4px;
  height: 100%;
}
.grid-resize-handle-vertical {
  width: 100%;
  height: 4px;
}

.grid-resize-handle-horizontal:hover,
.grid-resize-handle-vertical:hover {
  background-color: var(--clr-accent);
}

.modal-container {
  position: fixed;
  left: 0rem;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  z-index: 100000;
}

.modal-content {
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;

  min-width: 20rem;
  max-width: 40rem;

  background-color: var(--clr-bg);

  display: flex;
  flex-direction: column;

  border-radius: 8px;
  /* to preserve border radius */
  overflow: hidden;
}

.modal-content--padding {
  padding: var(--spacing-m);
}

.explorer-controls {
  border-top: 1px solid var(--clr-bg-lightest);
  padding: var(--spacing-s);
  display: flex;
  flex-direction: row-reverse;
}

.explorer-controls > * {
  margin-left: var(--spacing-s);
}

.drop-down-select {
  width: 100%;
  position: relative;
}

.drop-down-select__toggle {
  display: flex;
  align-items: center;

  width: 100%;
  background-color: var(--clr-bg-lighter);
  color: var(--clr-text);

  border: 1px solid var(--clr-bg-lighter);
  text-align: left;

  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);

  font-size: 12px;
}

.drop-down-select__toggle:hover {
  border: 1px solid var(--clr-accent);
}

.drop-down-select__toggle > img {
  margin-left: auto;
}

.drop-down-select__sheet {
  position: absolute;
  width: 100%;

  background-color: var(--clr-bg-lighter);

  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);

  z-index: 100;
}

.drop-down-select__item {
  cursor: default;
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
  opacity: 0.75;
  font-size: 12px;
}

.drop-down-select__item--selected {
  background-color: var(--clr-accent-muted);
  opacity: 1;
}

input.drop-down-select__filter-input,
.drop-down-select__selection-hint {
  font-size: 12px;
  padding: var(--spacing-s);
  border: none;
  border-radius: 0px;
}

input.drop-down-select__filter-input:focus {
  background-color: var(--clr-bg-darker);
  border: none;
}

.drop-down-select__selection-hint {
  position: absolute;
  top: 0;
  opacity: 0.4;
}

.object-editor {
  /* padding-top: var(--spacing-s); */
  margin-bottom: var(--spacing-m);

  /* background-color: var(--clr-bg-lighter); */
  border-radius: 2px;
}

.object-editor__field {
  border: 1px solid var(--clr-bg);
  border-radius: 3px;

  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);

  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-s);

  background-color: var(--clr-bg-lighter);

  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.object-editor__field:hover {
  border: 1px solid var(--clr-bg-lightest);
}
.object-editor__field--selected {
  border: 1px solid var(--clr-accent) !important;
}

.object-editor__label {
  margin-bottom: var(--spacing-xs);
}

input.object-editor__label-editor {
  font-size: 12px;
  border-radius: 4px;
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);

  /* background-color: rgba(0, 0, 0, 0.1); */
  border: 1px solid transparent;
  background-color: rgba(0, 0, 0, 0.175);
  color: var(--clr-accent-lighter);
}

input.object-editor__label-editor:focus {
  border: 1px solid var(--clr-accent);
}

.object-editor__field-header {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--spacing-xs);
}

.object-editor__field-header > * {
  margin-right: var(--spacing-s);
}
.object-editor__field-header > *:last-child {
  margin-right: 0rem;
}

.list {
  padding-left: 0rem;
  padding-right: 0rem;
  flex-grow: 1;
}

.list-item {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
}

.list-item:hover {
  cursor: default;
  background-color: var(--clr-bg-lighter);
}

.list-item--selected {
  background-color: var(--clr-accent-muted) !important;
}

/*# sourceMappingURL=index.f3717abe.css.map */