.k-inspector {
  --ki-bg: rgb(250 250 250);
  --ki-fg: rgb(25 25 25);
  --ki-red: #d9174b;
  --ki-gray-light: rgb(238 238 238);
  --ki-gray-bg: rgb(244 244 244);
  --ki-border: rgb(170 170 170);
  --ki-border-light: rgb(210 210 210);

  --ki-l: 0.62;
  --ki-c: 0.2;
  --ki-h: 250;
  --ki-lch: var(--ki-l) var(--ki-c) var(--ki-h);
  --ki-h-secondary: 150;
  --ki-secondary-lch: var(--ki-l) var(--ki-c) var(--ki-h-secondary);

  --ki-primary: oklch(var(--ki-lch));
  --ki-primary-light: oklch(var(--ki-lch) / 0.1);
  --ki-secondary: oklch(var(--ki-secondary-lch));

  @media (prefers-color-scheme: dark) {
    --ki-bg: rgb(30 30 30);
    --ki-fg: rgb(230 230 230);
    --ki-red: #ff4073;
    --ki-gray-light: rgb(50 50 50);
    --ki-gray-bg: rgb(40 40 40);
    --ki-border: rgb(80 80 80);
    --ki-border-light: rgb(60 60 60);

    --ki-l: 0.7;
    --ki-c: 0.15;
  }

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--ki-bg);
  color: var(--ki-fg);
  max-height: 45vh;
  overflow: auto;
  font-family:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  font-size: 0.875rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ki-border) transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1.2;

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  svg {
    display: block;
  }

  button,
  input,
  select,
  textarea {
    accent-color: var(--ki-primary);
    font: inherit;
    color: inherit;
  }

  textarea {
    field-sizing: content;
    max-height: 6rem;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  button {
    border: none;
    cursor: pointer;
    background: none;
    outline-offset: 2px;
  }

  button:focus-visible {
    outline: 2px solid var(--ki-primary);
  }

  button:active {
    transform: translateY(1px);
  }

  .ki-btn {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    border-radius: 4px;
    background-color: var(--ki-gray-light);
    border: 1px solid var(--ki-border-light);
  }

  .ki-btn:hover {
    border: 1px solid var(--ki-primary);
  }

  .ki-btn--red {
    color: var(--ki-red);
  }

  .ki-btn--red:hover {
    border: 1px solid var(--ki-red);
  }

  .ki-input {
    background-color: var(--ki-bg);
    border: none;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--ki-border-light);
    font-size: 0.75rem;
    border-radius: 4px;
  }

  .ki-input:focus-visible {
    outline: none;
    border-color: var(--ki-primary);
  }

  .ki-input--error,
  .ki-input--error:focus-visible {
    border-color: var(--ki-red);
  }

  /* Main layout */

  .k-inspector__header {
    position: sticky;
    top: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    align-items: center;
    z-index: 2;
    background-color: var(--ki-bg);
    border-bottom: 1px solid var(--ki-gray-light);
    border-top: 1px solid var(--ki-gray-light);
    flex-wrap: wrap;
    font-size: 0.75rem;
  }

  .k-inspector__objects {
    padding: 0.5rem;
  }

  .k-inspector__hide {
    margin-left: auto;
  }

  .k-inspector__show {
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
  }

  .k-inspector__interval {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .k-inspector__header label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* Game object */

  .game-object {
    transition: background 500ms;
    position: relative;
  }

  .game-object .game-object {
    padding-left: 1.5rem;
  }

  .game-object .game-object::before,
  .game-object .game-object__comps-wrapper::before {
    content: "";
    height: 100%;
    position: absolute;
    left: 0.75rem;
    top: 0;
    border-left: 1px solid var(--ki-border);
  }

  .game-object .game-object__comps-wrapper::before {
    left: -1rem;
  }

  .game-object .game-object:last-child:before {
    height: 1rem;
  }

  .game-object--no-children .game-object__comps-wrapper:last-child::before {
    display: none;
  }

  .game-object--root > .game-object__content .game-object__header::before {
    display: none;
  }

  .game-object__content {
    position: relative;
  }

  /* Header */

  .game-object__header {
    position: relative;
    display: flex;
    padding: 0.25rem 0.25rem;
    margin-right: -0.25rem;
    gap: 0.25rem;
    align-items: center;
    height: 2rem;
    width: calc(100% + 0.25rem);
    border-radius: 4px;
    outline-offset: 0;
    position: sticky;
    /* TODO add sticky header and sticky side buttons */
    /*z-index: 1;
    top: 2.625rem;
    background-color: var(--ki-bg);*/

    svg rect {
      fill: var(--ki-bg);
    }
  }

  .game-object__header:hover {
    background-color: var(--ki-primary-light);
  }

  .game-object__header::before {
    content: "";
    position: absolute;
    left: calc(-0.75rem);
    width: 0.75rem;
    top: 50%;
    border-bottom: 1px solid var(--ki-border);
  }

  /* Header info and actions */

  .game-object__tags {
    color: var(--ki-primary);
    font-weight: bold;
  }

  .game-object__comp-names {
    color: var(--ki-secondary);
    font-weight: bold;
  }

  .game-object__buttons {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    height: 2rem;
  }

  .game-object__destroyed {
    color: var(--ki-red);
    font-weight: bold;
  }

  /* Expand tree button */

  .game-object__expand-icon {
    margin-right: 0.25rem;
  }

  .game-object__header:hover .game-object__expand-icon {
    color: var(--ki-primary);
  }

  /* Comps */

  .game-object__comps-wrapper {
    position: relative;
    padding: 0.5rem 0;
    margin-left: 1.75rem;
  }

  .game-object__comps {
    border: 1px solid var(--ki-border-light);
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.75rem;
  }

  .game-object__comps-row {
    display: grid;
    align-items: center;
    padding: 0.375rem 0.5rem;
    gap: 0.5rem;
    grid-template-columns: 10rem 1fr;

    input {
      display: block;
    }
  }

  .game-object__comps-row:nth-child(even) {
    background-color: var(--ki-gray-bg);
  }

  /* Children */

  .game-object__children {
    padding-bottom: 1rem;
  }

  /* Flex layout for controls */

  .ki-flex {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  /* Number input */

  .number-input input {
    width: 4.5rem;
  }

  /* Vector control */

  .vector-control__x-input {
    margin-right: 0.75rem; /* with gap it comes to 1rem */
  }

  /* Blend control */

  .blend-control {
    display: grid;
    gap: 0.25rem;
  }

  /* Text control */

  .text-control__input {
    width: 100%;
  }

  /* Anchor control */

  .anchor-control {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .anchor-radios {
    text-align: center;
  }

  .anchor-row {
    display: flex;
  }

  .anchor-radios label {
    padding: 0.25rem;
  }

  /* Color */

  .color-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    min-width: 12rem;
  }

  .color-control__swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--ki-border-light);
  }

  .color-control__slider {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .color-control__slider-input--r {
    accent-color: red;
  }

  .color-control__slider-input--g {
    accent-color: green;
  }

  .color-control__slider-input--b {
    accent-color: blue;
  }

  /* Breadcrumbs */

  .breadcrumbs {
    font-size: 0.75rem;
    display: flex;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    align-items: center;
  }
}