bn-related-box {
  display: flex;
  flex-direction: column;
  gap: 2px;

  &[hidden] {
    display: none;
  }

  &[readonly] {
    .add {
      display: none;
    }
  }
}

bn-related-box .body,
item-pane-custom-section .bn-link-body {
  display: flex;
  flex-direction: column;
  padding-inline-start: 12px;

  .row {
    display: flex;
    gap: 4px;
    align-items: flex-start;

    [zoteroUIDensity="comfortable"] & {
      padding-block: 2px;
    }

    .box {
      display: flex;
      align-items: flex-start;
      gap: 4px;
      padding-inline-start: 4px;
      overflow: hidden;
      border-radius: 5px;

      &:not([disabled]):hover {
        background-color: var(--fill-quinary);
      }

      &:not([disabled]):active {
        background-color: var(--fill-quarternary);
      }

      .icon {
        height: calc(1.3333333333 * var(--zotero-font-size));
      }

      .label {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
        width: 0;
        flex: 1;
        overflow: hidden;

        .position-label {
          color: var(--fill-secondary);
        }
      }

      .icon,
      .label {
        padding-block: 2px;
      }
      flex: 1;
    }

    toolbarbutton {
      margin-inline-start: auto;
      visibility: hidden;
    }

    &:is(:hover, :focus-within) toolbarbutton {
      visibility: visible;
    }
  }
}
