#overview.linking .node-view:not(.leaf) tr {
  cursor: pointer;

  input,
  button {
    pointer-events: none;
  }

  &:hover .td-data {
    background-color: var(--teal);
  }

  &.link:hover .td-id {
    background: linear-gradient(to right, var(--secondary) 0%, 15%, var(--teal) 15%, var(--teal) 100%);
  }

  &:hover .td-id {
    background: var(--teal);
  }
}

.node-view,
.enum-view,
.formula-view {
  .line-point {
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
  }

}

.node-view {
  pointer-events: all;
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 1.5em;
  z-index: 5;
  border-radius: 5px;
  background-color: var(--bg);
  outline: 1px solid var(--dark-gray);
  min-width: 35em;
  width: max-content;
  box-shadow: 2px 2px 6px var(--dark-gray);

  &.active {
    outline: 2px solid var(--bg-active);
    opacity: 1;
  }

  .top-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1em;

    .show-views {
      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;
      background-color: var(--bg-dark);
      outline: 1px solid black;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;

      &:hover {
        transform: scale(1.08);
      }
    }

    .close-view {
      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;
      background-color: var(--bg-dark);
      outline: 1px solid black;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        transform: scale(1.08);
      }
    }

    .breadcrumbs {
      display: flex;

      &.references li {
        background-color: var(--bg-active);
        color: var(--dark-gray);
      }

      :first-child {
        border-top-left-radius: 0.25em;
      }

      :last-child {
        border-bottom-right-radius: 0.25em;
      }

      li {
        display: flex;
        text-transform: lowercase;
        align-items: center;
        gap: 0.5em;
        cursor: pointer;
        background: var(--bg-alt);
        padding: 4px 6px;
        border: 1px solid black;
        font-style: italic;
        box-shadow: 1px 1px 2px var(--dark-gray);
        transform: skewX(350deg);

        &:hover {
          box-shadow: 2px 2px 4px var(--dark-gray);
        }

        .dot {
          width: 0.5em;
          height: 0.5em;
          background-color: black;
          border-radius: 50%;
        }

        svg {
          height: 1em;
          color: black;
        }

        &.ego {
          background-color: var(--bg-dark);

          .dot {
            background-color: var(--bg-active);
          }

          svg {
            color: var(--bg-active);
          }
        }
      }
    }

    .search-outer {
      display: flex;
      align-items: center;
      gap: 1em;
      padding: 0.5em 1em;
      border-radius: 0.5em;
      outline: 1px solid black;
      font-weight: bold;
      height: 100%;
      background-color: var(--bg-active);

      .search-inner {
        display: flex;
        color: black;
        gap: 0.5em;
        align-items: center;
        border-radius: 4px;
        padding: 6px 8px 6px 0;

        .search-input {
          all: unset;
          opacity: 0;
          color: var(--bg-dark);
          width: 100%;
          max-width: 0;
          transition: all 0.5s ease-in-out;
        }

        &.visible,
        &:hover,
        &:focus-within {
          .search-input {
            opacity: 1;
            max-width: 160px;
          }
        }

        .zoom-in {
          width: 18px;
          height: 18px;
          min-width: 18px;
          min-height: 18px;
        }
      }
    }
  }

  .theater-container {
    width: 2em;
    display: flex;
    padding: 0.1em;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    svg {
      transition: all 500ms ease;
      color: var(--disabled-fg);
      background: var(--disabled-bg);
      outline: 2px solid black;
      border-radius: 50%;
      stroke-width: 1px;
      padding: 0.4em;
      width: 1.8em;
      overflow: visible;
    }

    &.expanded svg,
    &:hover svg {
      color: black;
      background-color: var(--white);
    }
  }

  .line-row {
    margin-left: 0.25em;
    margin-right: 0.25em;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .link-text {
    color: var(--bg-active);
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: var(--error);
    padding: 0 0.5em;
    text-align: center;
    user-select: none;
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;
    }

    &.row-has-links {
      text-decoration: unset;
    }
  }

  .table-row {
    display: flex;
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    gap: 1em;

    &.text-margin {
      margin-left: 4px;
    }

    &.mt-small {
      margin-top: 1em;
    }
  }

  .pager-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em;
    border-radius: 0.5em;
    background: var(--bg-active);
    outline: 1px solid var(--dark-gray);

    .rows-data {
      color: black;
      font-weight: bold;
    }

    .pager-buttons {
      display: flex;
      align-items: center;
      gap: 0.25em;

      .pager-button {
        all: unset;
        cursor: pointer;
        background-color: var(--bg-dark);
        color: var(--bg-active);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        width: 26px;
        height: 26px;
        font-weight: bold;
        transition: all 0.2s ease;

        &.active {
          background: var(--secondary);
          color: var(--white);
          opacity: 1 !important;
        }

        svg {
          display: block;
          width: 100%;
          height: 100%;
          padding: 6px;
        }

        &:hover {
          box-shadow: 0px 0px 2px 2px var(--white);
          color: var(--white);
        }

        &:disabled,
        &[disabled] {
          cursor: default;
          user-select: none;
          pointer-events: none;
          opacity: 0.5;
        }
      }
    }
  }

  .table-action-bar {
    display: flex;
    gap: 0.5em;
    align-items: end;
    flex: 1;
    justify-content: end;
    margin-bottom: 0.7em;
  }

  .all-df-container {
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    .data-field-outer {
      display: flex;
      flex-direction: column;
      gap: 0.25em;

      .data-field-item {
        display: flex;
        align-items: center;
        gap: 1em;
        /* Prevents content from overflowing during collapse */
        overflow: hidden;
        /* Transition the height property */
        transition: height 0.35s ease-in-out;

        &.config {
          height: 48px;
        }

        &.no-config {
          height: 0;
        }
      }

      .line-box {
        min-width: 0.5em;
        min-height: 0.5em;
      }
    }

    .data-field-inner {
      position: relative;
      display: flex;
      background-color: var(--bg-alt);
      padding: 0.5em;
      color: var(--white);
      border-radius: 5px;
      align-items: center;
      justify-content: space-between;
      gap: 0.5em;
      border: 1px solid black;
      flex: 1 0 auto;

      label {
        display: flex;
        align-items: center;
        gap: 1em;
      }

      .data-type-container {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5em;
        flex: 1 0 auto;

        button.data-type {
          padding: 2px 12px;
          min-height: 30px;
          min-width: 5em;
          flex: 1 1 auto;
        }
      }

      input {
        height: 30px;
        width: 12em;
      }

      .checkbox {
        display: flex;
        margin-left: 8px;
      }

      .checkbox-label {
        margin-left: 4px;
      }
    }
  }

  .tab-container {
    display: flex;
    align-items: center;
    font-weight: bold;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: fit-content;

    .left {
      display: flex;
      gap: 0.5em;
      align-items: center;
      margin-bottom: 0.5em;
    }

    .tab-btn {
      background: var(--disabled-bg);
      color: var(--disabled-fg);
      font-weight: bold;

      &.active {
        background: var(--secondary);
        color: var(--white);
      }
    }
  }

  .all-rows {
    display: flex;

    .action-rows {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-top: 46px;
      padding-bottom: 8px;

      &.select {
        padding-right: 10px;
      }

      &.link {
        padding-left: 10px;
      }
    }
  }

  .table-container {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    display: inline-flex;
    max-height: 55vh;
    max-width: 60vw;
    overscroll-behavior: contain;
    margin-bottom: 0.7em;

    &:focus-within {
      outline: 2px solid var(--bg-active);
    }

    ::-webkit-scrollbar-track {
      margin: 30px 30px;
    }

    &.disable-scroll {
      overflow: hidden;
    }
  }

  table {
    flex: 0 1 auto;
    font-weight: 300;
    contain: strict;
    table-layout: fixed;
    min-width: 32em;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: black;

    td,
    th {
      padding: 4px 1em;
      min-width: 46px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .td-pointer {
      cursor: pointer;
    }

    .td-id {
      text-align: center;
      user-select: none;
    }

    thead {
      position: sticky;
      z-index: 5;
      top: 0;

      th {
        font-weight: bold;
        background-color: var(--blackish);
        color: var(--bg-active);
        cursor: pointer;
        user-select: none;

        .ordered {
          display: inline-flex;
          align-items: center;
          gap: 0.5em;

          svg {
            width: 1em;
          }
        }
      }

      .td-select {
        background-color: var(--blackish);
      }
    }

    tbody {
      position: relative;
      display: table-row-group;

      #drag-select {
        background-color: rgba(20, 137, 189, 0.5);
        z-index: 1;
        position: absolute;
        pointer-events: none;
      }
    }

    tr.link td.invalid {
      background-color: unset;
    }

    td {
      position: relative;
      color: var(--white);

      &.invalid {
        background-color: #554226;
      }

      &:hover .drag-btn {
        opacity: 1;
      }

      .td-button {
        user-select: none;
        margin-top: 6px;
        margin-bottom: 6px;
        width: 100%;
        text-align: center;
      }

      .show-markdown-anchor {
        display: flex;
        align-items: center;
        gap: 0.5em;
        opacity: 0.7;
        font-style: italic;
        color: burlywood;
        transform-origin: 0% 50%;
        transition: all 200ms ease-in;
        cursor: pointer;

        &:hover {
          color: black;
          opacity: 1;
        }

        svg {
          display: block;
          width: 1.4em;
          height: 1.4em;
          min-width: 1.4em;
          color: var(--blackish);
          background: var(--bg-active);
          border-radius: 50%;
          padding: 2px;
          outline: 1px solid white;
        }
      }

      input {
        all: unset;
        position: relative;
        min-width: 120px;
        text-overflow: ellipsis;
        color: var(--white);
      }

      button {
        position: relative;
      }
    }

    .td-select {
      position: sticky;
      left: 0;
      z-index: 3;
      text-align: center;
      background-color: var(--bg-dark);
    }

    &.link-mode-any tr.active .td-id {
      background: var(--teal);
    }

    &.link-mode-any tr.link {
      background-color: var(--secondary);

      &.active .td-data {
        background-color: var(--teal);
      }

      &.active .td-id {
        background: linear-gradient(to right, var(--secondary) 0%, 15%, var(--teal) 15%, var(--teal) 100%);
      }
    }

    &.link-mode-all tr.link {
      .td-id {
        background-color: var(--secondary);
      }

      &.active .td-data {
        background-color: var(--teal);
      }

      &.active .td-id {
        background: linear-gradient(to right, var(--secondary) 0%, 15%, var(--teal) 15%, var(--teal) 100%);
      }
    }

    .drag-btn {
      all: unset;
      width: 14px;
      position: absolute;
      left: 0;
      bottom: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
      border-top-left-radius: 25%;
      border-bottom-left-radius: 25%;
      background-color: #333;
      color: whitesmoke;
      transform: translate(-50%, 50%);
      padding: 3px;
      cursor: pointer;
      opacity: 0;
      transition: all 300ms ease-in-out;
      z-index: 2;

      &.is-dragging {
        opacity: 1;
        background: var(--primary);
      }

      &:active {
        cursor: crosshair;
      }
    }

    tr {
      scroll-snap-align: start;
      background-color: var(--bg-alt);
      height: 38px;

      &.active .td-data {
        background-color: var(--teal);
      }

      &.has-changes {
        td:not(.td-select) {
          border-bottom: 2px solid var(--warn);
        }

        .td-id {
          background: linear-gradient(45deg,
              rgba(173, 146, 28, 1) 12%,
              transparent 12%);
        }
      }
    }
  }

  .td-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    transition: all 0.25s ease-out;
    background-color: var(--bg-active);
    opacity: 0.5;

    &.hide {
      visibility: hidden;
    }

    &.select {
      padding: 5px;

      &:hover,
      &.active {
        opacity: 1;
        background-color: var(--white);
        color: var(--bg-alt);
        outline: 1px solid black;
      }
    }
  }
}