.note-info {
  color: var(--primary-color);
  display: flex;
  flex-direction: column;
  width: 360px;
  user-select: text;
  -webkit-overflow-scrolling: touch;

  .note-info-panel {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 8px;

    &:last-child {
      border: none;
    }
  }

  .note-info-header {
    display: flex;
    border-bottom: 1px solid var(--secondary-color);
    padding: 12px 8px 12px 16px;
    margin-bottom: 8px;
    flex-direction: row;
    align-items: center;
    height: 56px;

    h2 {
      flex-grow: 1;
      margin-bottom: 0;
      text-transform: none;
      font-size: 16px;
    }

    button {
      padding: 0;
      border: 0;
    }
  }

  .note-info-item {
    margin: 0;
    padding: 4px 0;
    height: 28px;

    .note-info-detail {
      color: var(--foreground-color);
      float: right;
      padding-right: 16px;
    }
  }

  .note-info-item-text {
    flex: 1 1 auto;
    padding-left: 16px;
  }

  .note-references {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 35px;
    padding-bottom: 0;

    div.note-info-name {
      color: var(--foreground-color);
      height: 28px;
      padding-left: 16px;
      line-height: 28px;
      margin-top: 8px;
    }

    .note-info-item {
      height: auto;
      padding-bottom: 0;
    }
  }

  .reference-link {
    display: block;
    text-align: left;
    text-decoration: none;
    width: 100%;
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;

    span {
      color: var(--foreground-color);
      display: block;
      margin: 0;
      font-size: 13px;
    }

    &:hover {
      background-color: var(--secondary-highlight-color);
    }

    .reference-title {
      color: var(--primary-color);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
  }
}
