.record-inspector {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;

  padding-top: 1em;
  padding-bottom: 1em;

  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  // Navigation inside of an object
  .inspector-nav {
    color: #666;
    margin-bottom: 1em;
    margin-left: 1em;

    a {
      margin-left: 0.6em;
      cursor: pointer;

      &:hover {
        color: #052b75;
      }

      &::before {
        margin-right: 0.6em;
        content: '➤';
      }

      a + &:hover::before {
        color: #666;
      }
    }
  }

  .root-header {
    margin-left: 2em;
  }

  .toolbar {
    margin-right: 3em;
    display: flex;
    justify-content: flex-end;

    .tag {
      height: fit-content;
      padding: 5px;
      border: solid 1px #999;
      border-radius: 3px;
      color: #555;
    }

    .view-mode-buttons {
      margin-right: 1em;

      button {
        min-width: 65px;
        padding: 5px 10px;
        color: #24292e;
        background: linear-gradient(#fdfdfd, #dcdcdc);
        border: 1px solid rgba(0, 0, 0, 0.25);
        box-shadow: 0 1px 0 #fff;

        &[disabled] {
          box-shadow: inset 0 0 10px #bbb;
          background: #ccc;
        }
      }

      *:first-child {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }

      *:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
    }
  }

  & > ul {
    margin-left: 1em;
  }

  ul {
    margin-top: 0.5em;
    list-style: none;

    li {
      margin-top: 0.3em;

      &.changed {
        background-color: transparent;

        div {
          margin-top: 0.3em;
          width: fit-content;

          &.header-before {
            background-color: #ffdbda;
          }
          &.header-after {
            background-color: #d6ffb7;
          }
        }
      }
    }
  }

  // Various elements of key-headers
  .header-container--updated {
    animation-name: flash-animation;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }

  @keyframes flash-animation {
    from {
      background: rgb(255, 252, 175);
    }
    to {
      background: default;
    }
  }

  // Collapsable React class
  .collapsable {
    a.collapse-button {
      cursor: pointer;
      &::before {
        color: #444;
        cursor: pointer;
        content: '\25B6';
        margin-left: -1em;
        margin-right: 0.5em;
      }

      &[data-opened=true]::before {
        content: '\25BC';
      }
    }

    .focus-button {
      cursor: pointer;

      .link-desc {
        padding: 2px;
        border: solid 1px #555;
        border-radius: 2px;
        font-size: 0.8em;
      }

      &:hover .link-desc {
        background-color: rgb(255, 252, 187);
      }
    }
  }

  .ellipsis {
    font-size: 1.5em;
    color: #555;
    cursor: pointer;
    padding: 0.2em;
    padding-top: 0em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: inline-block;

    &:hover {
      background-color: rgb(255, 255, 187);
    }
  }
}

.pretty-printer-header {
  white-space: nowrap;

  .key-desc {
    color: rgb(136, 18, 128);
    margin-right: 1em;

    &.key-deemph {
      color: rgb(171, 130, 168);
    }
  }

  .link-desc {
    color: rgb(18, 36, 136);
  }

  .value-desc-string {
    color: rgb(0, 120, 80);

    &::before,
    &::after {
      content: '"';
    }
  }

  .value-desc-number {
    color: #0067ad;
  }

  .value-desc-boolean {
    color: #238c98;
  }

  .summary-desc {
    color: #aaa;
    margin-left: 0.4em;

    &::before {
      content: '(';
    }

    &::after {
      content: ')';
    }
  }

  .value-desc-undefined {
    color: #ad5a01;
  }
}

.snapshot-record-inspector {
  flex: 1;
  display: flex;
  overflow-y: auto;
  height: 100%;

  .before,
  .after {
    flex: 1;
    overflow-x: auto;
    height: fit-content;
    min-height: 100%;
    padding-top: 0;
  }

  .before:not(:empty) + .after > ul {
    padding-left: 20px;
  }

  .before:not(:empty) {
    border-right: solid 1px #ddd;
  }

  .before .header-container.diff {
    background-color: #ffdbda;
  }

  .after .header-container.diff {
    background-color: #d6ffb7;
  }
}