siyuan/app/src/assets/scss/component/_chip.scss

.b3-chips {
  display: flex;
  padding: 4px;
  flex-wrap: wrap;

  .b3-chip {
    margin: 4px;
  }
}

.b3-chip {
  background-color: var(--b3-list-hover);
  color: var(--b3-theme-on-background);
  line-height: 16px;
  font-weight: 400;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 20px;
  transition: var(--b3-transition);
  text-decoration: none;

  &--hover {
    cursor: pointer;

    &:hover {
      box-shadow: var(--b3-button-shadow);
      text-decoration: none;
    }
  }

  &--small {
    padding: 0 8px;
    font-size: 12px;
  }

  &--secondary {
    background-color: var(--b3-theme-secondary);
    color: var(--b3-theme-on-secondary);

    &.b3-chip--current {
      box-shadow: 0 0 0 2px var(--b3-theme-secondary) inset;
    }
  }

  &--primary {
    background-color: var(--b3-theme-primary);
    color: var(--b3-theme-on-primary);

    &.b3-chip--current {
      box-shadow: 0 0 0 2px var(--b3-theme-primary) inset;
    }
  }

  &--pink {
    color: var(--b3-theme-on-secondary);
    background-color: #ea4aaa;

    &.b3-chip--current {
      box-shadow: 0 0 0 2px #ea4aaa inset;
    }
  }

  &--info {
    color: var(--b3-card-info-color);
    background-color: var(--b3-card-info-background);

    &.b3-chip--current {
      box-shadow: 0 0 0 2px var(--b3-card-info-background) inset;
    }
  }

  &--warning {
    color: var(--b3-card-warning-color);
    background-color: var(--b3-card-warning-background);

    &.b3-chip--current {
      box-shadow: 0 0 0 2px var(--b3-card-warning-background) inset;
    }
  }

  &--error {
    color: var(--b3-card-error-color);
    background-color: var(--b3-card-error-background);

    &.b3-chip--current {
      box-shadow: 0 0 0 2px var(--b3-card-error-background) inset;
    }
  }

  &--success {
    color: var(--b3-card-success-color);
    background-color: var(--b3-card-success-background);

    &.b3-chip--current {
      box-shadow: 0 0 0 2px var(--b3-card-success-background) inset;
    }
  }

  &--current {
    background-color: var(--b3-theme-surface);
    color: var(--b3-theme-on-surface);
    box-shadow: 0 0 0 2px var(--b3-list-hover) inset;
  }

  &--pointer {
    cursor: pointer;
    opacity: .86;

    &:hover {
      // 不明原因 https://github.com/siyuan-note/siyuan/issues/7756#issuecomment-1484057954
      opacity: .99;
    }
  }

  svg:not(.b3-chip__close) {
    margin-right: 6px;
    margin-left: -5px;
    height: 16px;
    width: 16px;
  }

  &__close {
    margin-right: -5px;
    margin-left: 6px;
    border-radius: var(--b3-border-radius-b);
    height: 16px;
    width: 16px;
    transition: var(--b3-transition);
    cursor: pointer;
    opacity: .68;
    flex-shrink: 0;

    &:hover {
      // 不明原因 https://github.com/siyuan-note/siyuan/issues/7756#issuecomment-1484057954
      opacity: .99;
    }
  }

  &--middle {
    padding: 4px 6px;

    .b3-chip__close {
      margin-right: -2px;
      margin-left: 3px;
    }

    svg:not(.b3-chip__close) {
      margin-right: 3px;
      margin-left: -2px;
    }
  }
}