/*
    Base
*/

#platform {
  /* --------------- */
  /* Layout measures */
  /* --------------- */

  /* profile */
  --sidebar-open: 0;
  --sidebar-width: calc(21em * var(--sidebar-open));

  --min-font-size: 11pt;

  background-color: light-dark(#e4e9ea, #04090c);

  box-shadow: inset 0 0 33vw oklab(0.89 -0.06 -0.05 / 0.05);
  mix-blend-mode: screen;

  font-size: clamp(var(--min-font-size), 1.125vmin, 1rem);

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: var(--inspector-width) 1fr var(--sidebar-width);
  grid-template-rows: var(--header-height) 2fr var(--library-height);
  grid-template-areas:
    'header header header'
    'inspector canvas sidebar'
    'libraryl library libraryr';
  gap: var(--grid-gap);
  overflow: hidden;
  transition:
    all calc(var(--spd-insp) * 1.5) ease,
    background-position 0s linear,
    background-size 0s linear,
    box-shadow calc(var(--spd-insp) * 4) ease;
}

@media (max-width: 1600px) {
  #platform {
    --min-font-size: 10pt;
  }
}

.platform-grid-el {
  position: relative;

  border-radius: var(--grid-corners-radius);

  padding: 1em;

  background: var(--background-main);
}

/* #platform.library-as-page {
  --library-height-open: 100%;
} */

#platform:has(#library.opened),
#platform.library-as-page {
  --library-height: var(--library-height-open);
}

#platform:has(#library.opened) {
  grid-template-rows: var(--header-height) 1fr 1fr;
}

#platform #page-wrapper {
  /* grid-area: canvas; */

  /* this allows to go under profile panel */
  grid-row-start: canvas;
  grid-column-start: canvas;
  grid-row-end: sidebar;
  grid-column-end: sidebar;
  /* margin-right: var(--grid-gap); */
  /* (comment to cancel) */

  background: none;

  transition: all var(--spd-insp) ease;
  padding: 0;
  transition:
    padding var(--spd-insp) ease,
    display var(--spd-insp) ease allow-discrete;
}

#app.main,
#app.analytics,
#app.company-workspace-settings,
#app.profile-settings,
#app.workflow,
#app.workflows {
  #page-wrapper {
    grid-row-start: inspector;
    grid-column-start: inspector;
    grid-row-end: sidebar;
    grid-column-end: sidebar;
  }
}
#app.asset,
#app.assets,
#app.virtual-studio-viewer-asset,
#app.virtual-studio {
  #page-wrapper {
    margin-right: var(--grid-gap);
  }
}

/* display profile panel on settings page if there
is enough room */
#app.settings-tab #profile-panel {
  margin-right: 0;
}
@media screen and (min-width: 1250px) {
  #app.settings-tab #platform {
    --sidebar-open: 1 !important;
  }
  #app.settings-tab #page-wrapper {
    grid-row-start: canvas;
    grid-column-start: canvas;
    grid-row-end: canvas;
    grid-column-end: canvas;
  }
  #app.settings-tab #profile-panel {
    box-shadow: none;
  }
}

#app.asset #library,
#app.virtual-studio-viewer-asset #library {
  grid-column-start: library;
  grid-column-end: libraryr;
  margin-left: 0;
  /* margin: 0 calc(var(--grid-gap) * 2) 0 0; */
}
#app.asset #inspector,
#app.virtual-studio-viewer-asset #inspector {
  grid-row-start: inspector;
  grid-row-end: libraryl;
}

#platform.library-as-page #page-wrapper {
  display: none;
}

#page-wrapper #page-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow-y: auto;
  padding: var(--panel-padding) var(--panel-padding)
    calc(var(--panel-padding) * 2) var(--panel-padding);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#page-wrapper *:not(button, button *) {
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

#page-wrapper *:not(button, button *)::selection {
  color: #21201e;
  background-color: #dcfc53;
}

#platform #page-wrapper:has(#viewer-editor) {
  overflow-y: hidden;
}

/* TODO: remove */

.pagetitle {
  color: light-dark(#000, #fff);
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 2em;
  font-style: italic;
}

.pagesubtitle,
.section-title {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.5em;
  font-style: italic;
}

.pagesubtitle,
h2.subtitle {
  color: light-dark(#2a2a2a, #c2c2c2);
}

#platform .page-header {
  position: relative;
  margin: 0 0 2em 0;
}

.section {
  margin: 4em 0 0 0;
  background-color: transparent;
}

.panel {
  margin: 0 0 2em 0;
  padding: var(--panel-padding);
  background-color: var(--c-bright-bg);
  border-radius: var(--inner-border-radius);
}

.panel.wrapper {
  padding: 2em 0;
  background-color: transparent;
}

.panel:last-child {
  margin: 0;
}

.panel > .header,
.section > .header {
  font-size: 0.66em;
  margin: 0 0 3rem 0;
}

.panel > .header:not(:first-child),
.section > .header:not(:first-child) {
  margin: 3rem 0 1rem 0;
}

/*
    Forms
*/

.dshform {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.dshform.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  grid-auto-columns: min-content;
}

.dshform.grid input[type='submit'],
.dshform.grid button {
  grid-column-start: 1;
  grid-column-end: 1;
}

.forminput,
.forminput label,
.forminput .input {
  display: block;
}

.forminput {
  margin: 0;
}

.forminput label {
  font-weight: 600;
  margin-bottom: 0.125em;
  font-size: 0.85em;
}

.forminput .input {
  width: 100%;
  padding: 0.25rem 0.5rem;
  margin: 0 0 0 0;
  border: none;
  background: var(--c-bright-bg);
  color: var(--text-primary);
  border-radius: 0;
  font-size: 0.9em;
}

.forminput.select.alt select {
  padding: 0 1.75em 0 1em;
  background: transparent;
  border: none;

  font-family: var(--primary-font);
  appearance: none;
  border-radius: 0.125em;
  cursor: pointer;
  color: var(--c-dark-bg);
  font-size: 0.9em;
  font-weight: 600;
  border-radius: 0.5em;
  border: 0px solid rgba(0, 0, 0, 0.22);

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  option,
  optgroup {
    background: light-dark(white, black);
    color: light-dark(black, white);
  }
}
.forminput.select.alt {
  position: relative;
  margin: 0em 0 0 0;

  display: flex;
  align-items: center;

  background-color: var(--c-bright-bg);
  border-radius: var(--inner-border-radius);
  min-width: 13ch;
}

.forminput.select.alt::before,
.forminput.select.alt::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.25em;
  transform: translateY(-101%) scale(0.5);
  width: 0.02em;
  aspect-ratio: 1;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  border-bottom: 0.5em solid var(--c-dark-bg);
  z-index: 0;
}
.forminput.select.alt::after {
  border-bottom: none;
  transform: translateY(1%) scale(0.5);
  border-top: 0.5em solid var(--c-dark-bg);
}

.forminput.select.alt.select-disabled::before,
.forminput.select.alt.select-disabled::after {
  display: none;
}

.instance .configuration {
  width: 100%;
}

/*
    Lists
*/

.content-placeholder {
  height: 20em;
  display: flex;
  align-items: center;
}

.list-item {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-top: 0.75em;
  min-height: 4em;
  padding: 1em;
  border-bottom: 1px solid var(--c-bright-dim);
  border-radius: 0;
}

.list-item:hover {
  background-color: var(--c-bright-dim);
}

.item-title {
  width: 100%;
  display: flex;
  justify-content: beginning;
  align-items: center;
  align-content: center;
}

.item-thumbnail {
  width: 5em;
  margin: 1em;
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  gap: 0.5em;
}

.item-tag {
  background-color: var(--c-dark-dim);
  color: var(--text-primary);
  border: none;
  padding: 0.5em 1em;
  border-radius: calc(var(--inner-border-radius) / 2);
  font-family: var(--display-font);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color calc(var(--spd-insp) * 2) ease,
    opacity calc(var(--spd-insp) * 2) ease;
  font-size: 1em;
}

.list-header {
  display: flex;
  position: relative;
  align-items: center;
  align-content: center;
  height: 4em;
  border-bottom: 1px solid var(--c-dark-dim);
  background: var(--c-bright-bg);
  margin: 0 0 1em 0;
  font-weight: 500;
  font-size: 1.125em;
}

.header-button {
  color: var(--text-primary);
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-radius: 0;
  border: none;
  padding: 0.7em;
  font-weight: 700;
  font-size: 1.125em;
  background: var(--c-bright-bg);
}

.header-button:hover {
  background: var(--c-bright-dim);
}

.header-button .hidden {
  visibility: hidden;
}

.header-button:hover .hidden {
  visibility: visible;
}

.list-item-attr,
.list-header-attr {
  flex-grow: 1;
  padding: 0.5em;
  flex: 1 1 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.list {
  width: 100%;
}

.list .operation {
  flex: 0 0 3em;
  padding: 0;
  text-align: center;
}

.list-item-attr:has(> .item-date) {
  justify-content: end;
}

.list .operation button {
  border: none;
  background: none;
  display: block;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.list .operation button .icon {
  color: var(--text-primary);
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

.list .operation button:hover .icon {
  color: var(--power-primary-color);
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

.list .operation.select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.list .operation.select input {
  display: block;
  cursor: pointer;
  width: 1em;
  height: 1em;
}

.list-footer {
  display: flex;
  position: relative;
  align-items: center;
  align-content: center;
  justify-content: center;
  height: 4em;
  font-weight: 500;
  font-size: 1.125em;
}

/* ----- TAGS ---- */

.forminput.file {
  position: relative;
}

.forminput.tags {
  position: relative;
}

.tags-wrapper {
  margin: 0.5em 0 0 0;
  padding: 0.25em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-flow: row wrap;
  gap: 0.25em;
  row-gap: 0.25em;
  border-radius: var(--inner-border-radius);
  position: relative;
  background-color: var(--c-bright-bg);
}

.tags .tag {
  margin: 0;
  padding: 0.2em 0.33em;
  background: var(--c-dark-bg);
  color: var(--text-on-dark);
  border-radius: var(--inner-border-radius);
  flex-shrink: 0;
  flex-grow: 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25em;
  position: relative;
}

.tag-name {
  font-size: 0.9em;
}

.tag-input {
  flex-basis: 15em;
  flex-grow: 1;
  border: none;
  font-size: 0.8em;
  background-color: var(--c-bright-bg);
  color: var(--text-primary);
}

.tag-remove {
  width: 1em;
  height: 1em;
  margin: 0;
  background: transparent url('../img/icons/cross.svg') no-repeat center center;
  background-size: 50%;
  opacity: 0.5;
  border-radius: 50%;
  cursor: pointer;
  filter: invert(1);
  transition: opacity var(--spd-insp) ease;
}

.tag-remove:hover {
  opacity: 1;
}

.tags-autocomplete {
  width: 100%;
  background-color: var(--c-bright-bg);
  position: absolute;
  left: 0;
  top: calc(100% + 0em);
  box-shadow: 0 0.75em 1.5em 0 rgba(0, 0, 0, 0.1);
  border: 1px solid var(--c-dark-dim);
  border-bottom: 0.5em solid var(--power-primary-color);
  border-radius: var(--inner-border-radius);
  display: none;
  padding: 1em 0;
  font-size: 1em;
  z-index: 999;
}

.tags-autocomplete-list {
  max-height: 20em;
  overflow-y: scroll;
  padding: 0 0 2em 0;
}

.tags-autocomplete.opened {
  display: block;
}

.tags-autocomplete .ftags {
  margin: 0;
  padding: 0;
  list-style-type: none;
  /* for horizontal sorting first
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  column-gap: 1em;*/

  /* for vertical sorting first */
  column-count: auto;
  column-width: 14rem;
}

.tags-autocomplete .ftag,
.tag-create {
  font-size: 0.9em;
  position: relative;
  cursor: pointer;
  padding: 0.5em 1em;
  line-height: 1em;
  border-left: 0.25em solid transparent;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tags-autocomplete .ftag:hover {
  background-color: rgba(0, 0, 0, 0.025);
  border-left: 0.25em solid var(--power-primary-color);
}

.tags-autocomplete .ftag::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1em;
  width: 1em;
  height: 1px;
  background-color: var(--c-dark-dim);
}

.tags-autocomplete .ftag.used {
  color: var(--power-primary-color);
  font-weight: 600;
}

.tags-autocomplete .ftag.used .icon {
  display: inline-block;
  line-height: 1em;
  font-size: 1em;
  height: 1em;
  margin: 0 0.5em 0 0;
}

.tags-autocomplete .ftag.exact {
  font-weight: 600;
  padding-left: 2em;
}

.tags-autocomplete .ftag.exact::before {
  content: '';
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 0.5em;
  border-radius: 50%;
  background-color: var(--power-primary-color);
  transform: translateY(-50%);
}

.tag-create {
  margin: 0;
  font-weight: 300;
  font-style: italic;
  color: grey;
  border-top: 1px solid var(--c-bright-dim);
}

.tag-preview {
  display: inline-block;
  margin: 0 0 0 1em;
  padding: 0.5em 1em;
  background-color: var(--power-primary-color);
  color: var(--text-on-dark);
  border-radius: var(--inner-border-radius);
  font-weight: 600;
  font-style: normal;
}

.clickable {
  cursor: pointer;
}

.none {
  display: none;
}

.pinfo {
  color: rgb(53, 117, 181);
  border: 1px solid currentColor;
  margin: 1em 0;
  padding: 0.5em;
  font-style: italic;
  font-size: 1em;
  font-weight: 600;
}

.pinfo.doc {
  color: rgb(47, 67, 72);
}

.pinfo.warn {
  color: rgb(230, 110, 36);
}

.codepreview {
  width: 100%;
  height: 16em;
  padding: 1em;
  border: 1px solid var(--c-dark-dim);
  overflow-y: scroll;
}

.assetpreview,
.viewerpreview {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  background: none;
  z-index: 0;
  border-radius: var(--grid-corners-radius);
}
.assetpreview:not(.viewer) {
  background-color: black;
}

img.assetpreview,
video.assetpreview {
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
}

.assetpreview.nothing-to-show {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5em;
}

.assetpreview.hdr-canvas canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viewerpreview-menu {
  position: absolute;
  font-size: 0.95em;
  bottom: 0.5em;
  left: 0.5em;
  z-index: 5;
}

.asset-to-viewer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background-color: var(--c-dark-bg);
  color: var(--text-on-dark);
  border-radius: var(--inner-border-radius);
  border: none;
  font-size: 1em;
  padding: 0.5em;
  transition: background-color var(--spd-insp) ease;
}

.asset-to-viewer .icon {
  font-size: 1.125em;
}

.asset-to-viewer:hover {
  background-color: var(--power-primary-color);
}

#arbutton .forminput input {
  border: 1px solid var(--text-primary);
}

.cursor {
  position: absolute;
  z-index: 0;
  --m-x: 696px;
  --m-y: 141px;

  background: radial-gradient(
    33em at var(--m-x, 5px) var(--m-y, 5px),
    oklab(0.59 -0.06 -0.24 / 0.1),
    transparent 80%
  );
  content: '';
  color: transparent;
}