:root {
  --f-pad: 0.33em;

  --f-highlight-color: var(--power-secondary-color);
  --f-pending-color: var(--f-highlight-color);

  --input-width: 18ch;
  --input-height: 1.8em;
  --input-maincolor: var(--power-primary-color);
}

/* contains controls */
.ctrls {
  padding-top: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  transition: opacity var(--spd-insp) ease;
}

.ctrls .disabled {
  opacity: 0.33 !important;
  pointer-events: none !important;
}
.ctrls .hidden {
  display: none;
}
.ctrls > *:first-child {
  margin-top: 0 !important;
}

.ctrldesc {
  font-size: 0.85em;
}

.foldable-section {
  font-size: 1em;
  display: flexbox;
  margin-top: 1em;
  margin-bottom: 0em;
}

.foldable-section .foldable-section:nth-of-type(1) {
  margin-top: 1em;
}

.foldable-section .foldable-section:last-of-type {
  margin-bottom: 1em;
}

.foldable-section.open {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0);
}
.foldable-section > .header {
  color: var(--text-primary);
  width: 100%;
  cursor: pointer;
  text-align: left;
  border: none;

  padding: 0.5em 0 0.5em 0;
  display: grid;
  grid-template-columns: auto 0.5em;
  gap: 0.5em;
  align-items: center;
  justify-items: end;
  border-radius: 0;
  font-size: 1em;
}

.foldable-section.read-only > .header {
  cursor: default;
  grid-template-columns: 1fr;
}
.foldable-section.open > .header {
  background-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.foldable-section:not(.open) > .header {
  background-color: transparent;
  color: color-mix(in srgb, var(--text-primary) 57%, transparent);
}

.foldable-section > .header > .t {
  line-height: 1.5em;
  font-weight: 400;
  letter-spacing: 0.1ch;
  text-transform: uppercase;
  font-size: 0.95em;
  text-align: left;
  display: inline-block;
  width: 100%;

  position: relative;
}
.foldable-section.open > .header > .t {
  font-weight: 700;
}
.foldable-section > .header > .t::after {
  content: '';
  position: absolute;
  bottom: -0.5em;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--c-dark-dim);
}
.foldable-section > .header > .t::before {
  content: '';
  position: absolute;
  bottom: calc(-0.4em - 1px);
  left: 0em;
  width: 3ch;
  height: 4px;
  background-color: color-mix(in srgb, var(--f-title-color) 80%, #fff);
  transition: background-color var(--spd-insp) ease;
}
.foldable-section:not(.open) > .header > .t::before {
  background-color: transparent;
}

.foldable-section > .header > .toggle {
  width: 0.5em;
  aspect-ratio: 1;
  position: relative;
  background: linear-gradient(
    90deg,
    var(--text-primary) 40%,
    transparent 40%,
    transparent 60%,
    var(--text-primary) 60%
  );
  border-radius: 50em;
  transform: translateX(2px) rotate(-90deg);
  opacity: 0.33;
  transition:
    transform var(--spd-insp) ease,
    opacity var(--spd-insp) ease;
  justify-self: end;
}

.foldable-section.open > .header > .toggle {
  transform: translateX(2px) rotate(180deg);
  opacity: 1;
}

.foldable-section > .cont {
  padding: 0 0 0 0;
  border-left: 0em solid var(--text-primary);
  transition:
    max-height var(--spd-insp) ease,
    padding var(--spd-insp) ease,
    opacity var(--spd-insp) ease,
    margin var(--spd-insp) ease;
  max-height: 0;
  opacity: 0;
}

.foldable-section.open > .cont {
  padding: 0.5em 0 0em 0;
  opacity: 1;
  max-height: 500em;
  margin-bottom: 0.75em;
}

.foldable-section .foldable-section.open > .cont {
  border-left: dashed 1px color-mix(in srgb, var(--c-dark-bg) 5%, transparent);
}

/**/
.foldable-section .smart-input > .si-l {
  padding-left: 0;
} /**/

.ctrl-sep {
  height: 1px;
  width: calc(100% - 2em);
  margin: 0.75em auto 0.75em 0;
  background-color: rgba(255, 255, 255, 0.05);
  position: relative;
}

/* ****** help *******/

.ctrl-help {
  position: fixed;
  pointer-events: none;
  opacity: 1;
  top: 0;
  left: var(--inspector-width);
  width: 20em;
  overflow: hidden;
  background-color: #282828;
  color: #dedede;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  transform-origin: bottom left;

  box-shadow: 0 1em 1.5em rgba(0, 0, 0, 0.35);
  white-space: wrap;

  transition: opacity calc(var(--spd-insp) * 2) ease calc(var(--spd-insp) * 3.5);
  z-index: 999999;
}

.ctrl-help:not(:has(img)) {
  padding-top: 1.5em;
}

.ctrl-help .expl {
  font-size: 14px;
}

.smart-control-helpthumb {
  width: 100%;
  height: auto;
}

.ctrl-help > *:not(img) {
  margin: 0 2em 1em 2em;
}

.ctrl-help > h3 {
  padding: 0;
  padding-top: 1em;
  font-size: 1.33em;
  font-weight: 300;
  letter-spacing: 0.25em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.ctrl-help a {
  display: inline-block;
  width: fit-content;
  background-color: var(--c-bright-bg);
  color: var(--input-maincolor);
  align-self: flex-end;
  padding: 0.5em 1em;
  border: 1px solid rgba(128, 128, 128, 0.171);
}
.ctrl-help > div {
  text-align: left;
  line-height: 1.25em;
  font-size: 1.2em;
  font-weight: 600;
}

.ctrl-help > div p {
  margin-top: 0;
}

.ctrl-help > div strong {
  font-weight: 800;
}
.ctrl-help > div .warn {
  color: #e64500;
}

/* ****** tabs *******/

.ctrl-tabs-head {
  background: none;

  display: flex;
  gap: 0;
  align-items: center;
  justify-items: flex-start;
  margin: 0 0 1em 0;
  --rds: 0.125em;
}

.ctrl-t-h {
  background: none;
  border: none;
  color: var(--text-primary);
  display: inline-block;
  aspect-ratio: 1;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 1em;
  border-right: 1px rgba(31, 31, 31, 0.062) solid;
  margin: 0em 0 0 0;
  cursor: pointer;
  border-radius: var(--rds);
  position: relative;
}
.ctrl-t-h:hover {
  background-color: color-mix(
    in srgb,
    var(--f-highlight-color) 50%,
    transparent
  );
}

/* replace with current */
.ctrl-t-h.current {
  background-color: var(--c-dark-bg);
  color: var(--text-on-dark);
  box-shadow: 0 0 0.85em rgba(67, 67, 65, 0.2);
  text-shadow: -1px 1px 0px
    color-mix(in srgb, var(--f-highlight-color) 80%, transparent);
  cursor: default;
}

.ctrl-t-h:last-child {
  /**/
  border-right: none; /**/
}

.ctrl-tabs-head button .icon {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.ctrl-tab {
  display: none;
  font-size: 1em;
}

.ctrl-tab.open {
  display: block;
}

.smart-control {
  text-align: right;
  display: grid;
  grid-template-columns:
    minmax(10ch, 1fr) minmax(var(--input-width), auto)
    0.5em;
  align-items: start;
  gap: 0.5em;
  row-gap: 0.2em;
  pointer-events: all;
  &.readonly,
  &.readonly * {
    pointer-events: none !important;
    opacity: 0.8;
  }
}

.foldable-section.closed {
  & .smart-control {
    pointer-events: none;
  }
}

.smart-control-label {
  display: block;
  height: 100%;
  font-size: 0.79em;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: end;
  color: color-mix(in srgb, var(--text-primary) 64%, transparent);
  padding-right: 0.6em;
  margin-right: 1em;
  position: relative;
  font-weight: 400;
  font-family: var(--display-font);
}

.smart-control-label.help {
  cursor: help;
}
/** /
.disabled .smart-control-label {
  pointer-events: none;
}
/**/
.smart-control-label::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.25em;
  aspect-ratio: 1;
  border-radius: 1em;
  background-color: rgba(0, 0, 0, 0.1);
  transform: translate(0.5em, -40%);
  z-index: -1;
}

.smart-control-value {
  position: relative;
  min-height: var(--input-height);
  overflow: hidden;
  border-radius: 0.125em;
  display: flex;
  align-items: center;
  justify-content: start;
}
.float .smart-control-value,
.string .smart-control-value {
  /* cheap fake anti-aliasing */
  box-shadow:
    0 0 1px 0 #303030,
    0 0 2px 0 #30303053;
}

.smart-control:not(.bool) .smart-control-value {
  background: var(--c-dark-bg);
}
.smart-control-input,
.smart-control-select {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: var(--input-height);
  text-align: center;
  border: none;
  z-index: 0;
  font-size: 12px;
  padding: 0.33em 0.5em;
  font-weight: 600;
}

.smart-control-select,
.color .smart-control-input {
  height: 100%;
  padding: 0;
}

.float .smart-control-input {
  padding: 0 1em;
}

.float .smart-control-input,
.string .smart-control-input {
  background: none;
  color: var(--text-on-dark);
}

.bool .smart-control-input {
  height: auto;
}

/* Remove default up/down buttons on chrome for number input

Firefox still don't support input type number,
so no need to customize it*/
input.smart-control-input::-webkit-outer-spin-button,
input.smart-control-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.smart-control-input[type='number'] {
  -moz-appearance: textfield;
}

.smart-control-extra {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.smart-control-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--input-height);
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 0;
}
.smart-control-progress .bar {
  position: relative;
  height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 238, 203, 0.16) 0%, transparent 90%),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.025) 9px,
      rgba(0, 0, 0, 0.025) 17px
    ),
    var(--input-maincolor);

  border-right: 0.1em rgba(222, 179, 255, 0.33) solid;
}

.smart-control-input.multiline {
  margin: 0;
  padding: 0.5em 0.5em 2em 0.5em;
  min-height: 10ch;
  position: relative;
  resize: vertical;
}

.smart-control-text-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 20;
  height: 1.1em;
  display: flex;
  gap: 0;
  background: none;
  pointer-events: none;
  opacity: 0 !important;
  transition:
    opacity var(--spd-insp) ease,
    top var(--spd-insp) ease;
}

.smart-control-value:hover .smart-control-text-menu,
.smart-control-text-menu:focus-visible {
  opacity: 1 !important;
  pointer-events: all;
  /* bottom: 0em; */
}

.smart-control-text-button {
  height: 100%;
  aspect-ratio: 1;
  border-radius: var(--inner-border-radius);
  background-color: white;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  transition:
    color var(--spd-insp) ease,
    background-color var(--spd-insp) ease,
    top var(--spd-insp) ease;

  .icon {
    font-size: 1em;
  }

  &:hover {
    color: white;
    background-color: var(--input-maincolor);
  }
}

.smart-text-modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4em;
  background-color: rgba(0, 0, 0, 0.85);

  cursor: zoom-out;
  pointer-events: all;
}

#platform:not(:has(#inspector-inner:empty)) .smart-text-modal-backdrop {
  width: calc(100% - var(--inspector-width));
  right: 0;
  left: initial;
}

.smart-text-modal {
  width: min(78ch, 100%);
  height: min(78svh, 100%);
  display: flex;
  flex-direction: column;
  padding: 1em;
  border-radius: var(--card-radius);
  background-color: light-dark(white, #262626);
  color: light-dark(#262626, rgb(239, 239, 239));

  border-right: 0.18em solid var(--t-string);
  box-shadow:
    0 0.25em 1.25em rgba(0, 0, 0, 0.55),
    inset 0 0 4em rgba(255, 255, 255, 0.025);
  cursor: default;
}

.smart-text-modal-label {
  font-weight: 700;
  opacity: 0.8;
  padding: 0 0 1em 0;
  border-bottom: 1px solid
    light-dark(rgba(0, 0, 0, 0.133), rgba(255, 255, 255, 0.133));
}

.smart-text-modal-input {
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  background: none;
  color: light-dark(#262626, rgb(242, 242, 242));
  font-family: var(--primary-font);
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.45;
  padding: 0;
  outline: none;
}

.smart-control-input[type='checkbox'] {
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  height: 1em;
  aspect-ratio: 2.3;
  border-radius: 2em;
  background-color: var(--c-dark-bg);
  box-shadow: inset 0 0 0.66em 0.1em rgba(0, 0, 0, 0.5);
  cursor: pointer;

  border: 0.1em solid #00000033;
  transition:
    box-shadow var(--spd-insp) ease,
    border var(--spd-insp) ease;
}

.smart-control-input[type='checkbox']::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--c-bright-bg);
  border: 0.1em solid #30303000;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.296);
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  /* transition:
    left var(--spd-insp) ease,
    transform var(--spd-insp) ease; */
}

.smart-control-input[type='checkbox']:checked {
  background-color: var(--input-maincolor);
  border-color: var(--input-maincolor);
  box-shadow: none;
}

.smart-control-input[type='checkbox']:checked::after {
  left: 100%;
  transform: translate(-100%, -50%);
  border: 0.05em solid color-mix(in srgb, var(--input-maincolor) 33%, #000000);
  background-color: #fff;
}

.smart-control-input[type='color'] {
  background-color: #fff;
  padding: 0;
  margin: -10px -10px;
  display: block;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 200%;
  overflow: hidden !important;
  height: 200%;
  border: 4px white solid;
  cursor: pointer;
}

.color .smart-control-value {
  width: calc(var(--input-height) * 1.77);
  height: 1em;
  border: 1px solid rgb(206, 206, 206);
}

/* increase / decrease buttons */
.smart-control-incdec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--spd-insp) ease;
}
.smart-control-incdec-b {
  pointer-events: all;
  background: rgba(0, 0, 0, 0);
  color: #fff;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 400;
  width: 2.5ch;
  height: 100%;
  opacity: 0.66;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--spd-insp) ease;
}
.smart-control-incdec-b:hover {
  font-weight: 800;
  opacity: 1;
  background-color: #ffffff;
  box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.294);
}
.smart-control-value:hover .smart-control-incdec {
  opacity: 1;
}
.smart-control-incdec-b.inc {
  justify-self: flex-end;
}

.smart-control-incdec-b:disabled {
  pointer-events: none;
  opacity: 0.1;
}

/* action button */
.action .smart-control-value {
  justify-content: stretch;
  align-items: stretch;
}
.action .smart-control-action {
  border: none;
  background-color: var(--c-bright-bg);
  color: var(--text-primary);
  width: 100%;
  height: 100%;
  padding: 0.33em 1em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  border-radius: inherit;
  box-shadow: inset 0 0 0.05em 0.015em #111111;
}

.action.gap .smart-control-action {
  gap: 0.5em;
}

.action.no-text-transform .smart-control-action {
  text-transform: none;
}

.icononly .smart-control-action {
  padding: initial;
  width: 2em;
  aspect-ratio: 1;
}

.smart-control-action:hover {
  background-color: var(--c-dark-bg);
  color: var(--text-on-dark);
}

.smart-control-action:active {
  background-color: var(--input-maincolor);
}

/* Save pending dot */

.smart-control-dot {
  position: relative;
  width: 0.33em;
  height: 100%;
  overflow: visible;
  color: transparent;
  user-select: none;
  justify-self: end;
}

.smart-control-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.33em;
  aspect-ratio: 1;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.smart-control-dot.pending::after {
  background-color: var(--f-pending-color);
  box-shadow:
    0 0 0.8em 0.25em #fff,
    0 0 0.5em 0em var(--f-pending-color);
  border: 1px solid #474747;
}
.smart-control.needs-reload .smart-control-dot.pending::after {
  background-color: rgb(255, 34, 0);
  border-color: orangered;
}
.smart-control.needs-reload .smart-control-dot.pending:hover::before {
  position: absolute;
  top: 0;
  right: 2em;
  text-align: right;
  width: 14ch;
  font-size: 0.8em;
  content: 'You need to save and reload to see the changes !';
  color: white;
  background-color: orangered;
  padding: 1em;
  z-index: 600;
}

.smart-control-subtext {
  grid-column: span 2;
  font-size: 0.66em;
  font-style: italic;
}

.smart-control-subtext,
.smart-control-subtext a {
  color: color-mix(in srgb, var(--text-primary) 66%, transparent);
}
.smart-control-subtext a {
  color: color-mix(in srgb, var(--input-maincolor) 80%, transparent);
  font-weight: 700;
}

html .disabled .smart-control-value,
html .disabled .smart-control-value * {
  pointer-events: none !important;
}

#root.dragging.library-drag-viewer-textures-hdr .envurl > .smart-control-value {
  border: 2px dashed #7eff70;
  transform: scale(1.1);
}

.simple-control {
  width: 100%;
}
.simple-control label {
  display: flex;

  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

.simple:not(.vconfig) .smart-control-label,
.simple-control .label {
  display: block;
  font-size: 0.85em;
  width: 14ch;
  text-align: left;
  justify-content: initial;
  color: var(--text-primary);
  padding: 0;
  margin: 0;
}
.smart-control.action.labelonly.simple .smart-control-label {
  display: none;
}

.simple-control .label {
  cursor: pointer;
}
.smart-control.simple:not(.vconfig) {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.smart-control.active .smart-control-action {
  background-color: var(--power-primary-color);
  color: var(--text-on-dark);
}

.simple.float,
.simple.string {
  .smart-control-value {
    min-width: 10ch;
  }
}

.simple:not(.vconfig) .smart-control-label::after {
  display: none;
}

/* caca */
.smart-float {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 2.5ch 1fr 2.5ch;
  align-items: stretch;
  user-select: none;
}

.smart-float-display {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  font-size: 12px;
  font-weight: 800;
  padding: 0 0.5em 0.25em 0.5em;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.75);
  cursor: col-resize;
  z-index: 2;
}

.float-edit-input {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  z-index: 4;
  background: none;
  color: var(--text-on-dark);
  text-align: center;
  padding: 0 1em;
  &::selection {
    color: #21201e;
    background-color: #dcfc53;
  }
}

.float-progress {
  --percent: 0px;
  z-index: 0;
  .bar {
    width: var(--percent);
  }
}

.smart-float .smart-control-incdec-b {
  z-index: 4;
  height: 100%;
  align-self: start;
  opacity: 0;
}

.smart-control-value:hover .smart-float .smart-control-incdec-b:not(:hover) {
  opacity: 0.66;
}

.smart-float .smart-control-incdec-b:hover {
  opacity: 1;
  font-weight: 800;
  color: black;
  text-shadow: 0 0 2px var(--power-secondary-color);
}