.sw-knowledge-graph {
  --left-panel-width: var(--rhythm-22);
  --container-gap: var(--rhythm-2);

  display: flex;
  flex: 1 0 auto;
  gap: var(--container-gap);

  .left-panel {
    flex: 0 0 auto;
    width: var(--left-panel-width);

    .ner-families-container {
      background: var(--color-light-stronger);

      .title-s,
      li {
        align-items: center;
        display: flex;
        height: var(--rhythm-5);
      }

      ul.ner-families {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          box-shadow: inset 0 1px 0 var(--color-neutral-light);
          gap: var(--rhythm-2);
          text-transform: capitalize;

          .family-color {
            height: 100%;
            width: var(--rhythm-1);
          }
        }
      }
    }
  }
  .knowledge-graph-container {
    background: var(--color-light-stronger);
    flex: 1 1 auto;
    max-width: 100%;
    transition: max-width var(--transition-moderate);
  }
  &.with-right-panel .knowledge-graph-container {
    max-width: calc(100vw - var(--side-panel-width) - var(--left-panel-width) - var(--container-gap) * 2);
  }
}
