:root {
  --lp-cat-data: var(--fds-green-80);
  --lp-cat-logic: var(--fds-purple-80);
  --lp-cat-composition: var(--fds-sky-90);
  --lp-cat-reference: var(--fds-yellow-70);
  --lp-cat-on-data: var(--fds-white);
  --lp-cat-on-logic: var(--fds-white);
  --lp-cat-on-composition: var(--fds-white);
  --lp-cat-on-reference: var(--fds-slate-120);
  --lp-cat-rest: var(--fds-surface-tertiary-hover)
}
[data-theme^="dark"] {
  --lp-cat-data: var(--fds-green-70);
  --lp-cat-logic: var(--fds-purple-70);
  --lp-cat-composition: var(--fds-sky-70);
  --lp-cat-reference: var(--fds-yellow-70);
  --lp-cat-on-data: var(--fds-slate-120);
  --lp-cat-on-logic: var(--fds-slate-120);
  --lp-cat-on-composition: var(--fds-slate-120);
  --lp-cat-on-reference: var(--fds-slate-120)
}
span.ms.lp-cat {
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  background: var(--lp-cat-rest);
  color: var(--fds-text-secondary)
}
span.ms.lp-cat--lg {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px
}
.lp-cat[data-cat="data"],
.dpg-node[data-cat="data"] {
  --lp-cat-c: var(--lp-cat-data);
  --lp-cat-on: var(--lp-cat-on-data)
}
.lp-cat[data-cat="logic"],
.dpg-node[data-cat="logic"] {
  --lp-cat-c: var(--lp-cat-logic);
  --lp-cat-on: var(--lp-cat-on-logic)
}
.lp-cat[data-cat="composition"],
.dpg-node[data-cat="composition"] {
  --lp-cat-c: var(--lp-cat-composition);
  --lp-cat-on: var(--lp-cat-on-composition)
}
.lp-cat[data-cat="reference"],
.dpg-node[data-cat="reference"] {
  --lp-cat-c: var(--lp-cat-reference);
  --lp-cat-on: var(--lp-cat-on-reference)
}
span.ms.lp-cat:is([data-cat="data"], [data-cat="logic"], [data-cat="composition"], [data-cat="reference"]) {
  background: var(--lp-cat-c);
  color: var(--lp-cat-on)
}
.dpg-tile {
  fill: var(--lp-cat-rest)
}
.dpg-node:is([data-cat="data"], [data-cat="logic"], [data-cat="composition"], [data-cat="reference"]) .dpg-tile {
  fill: var(--lp-cat-c)
}
.dpg-node:is([data-cat="data"], [data-cat="logic"], [data-cat="composition"], [data-cat="reference"]) .dpg-ic {
  fill: var(--lp-cat-on)
}
@media (prefers-reduced-motion: no-preference) {
  span.ms.lp-cat {
    transition: background-color var(--lp-t-fast, 120ms) var(--lp-ease, ease),color var(--lp-t-fast, 120ms) var(--lp-ease, ease)
  }
  .dpg-tile,
  .dpg-ic {
    transition: fill var(--lp-t-fast, 120ms) var(--lp-ease, ease)
  }
}
:is(td, .lp-tk td, .data-tbl td) span.ms.lp-cat,
:is(td, .lp-tk td, .data-tbl td) span.ms.lp-cat--lg {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 16px
}
.lp-cat-svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
  pointer-events: none
}
span.ms.lp-cat > .lp-cat-svg {
  width: 16px;
  height: 16px
}
span.ms.lp-cat--lg > .lp-cat-svg {
  width: 20px;
  height: 20px
}
:is(td, .lp-tk td, .data-tbl td) span.ms.lp-cat > .lp-cat-svg {
  width: 16px;
  height: 16px
}
.dpg-card-h > .lp-cat-svg {
  width: 20px;
  height: 20px
}