@layer components {
.tag {
  background-color: var(--dt-color-surface-muted);
  border-radius: 4px;
  border: 1px solid var(--dt-color-on-surface-muted);
  color: var(--dt-color-on-surface);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  gap: 3px;
  padding: 3px 6px;
  white-space: nowrap;
}
.tag--draggable {
  cursor: grab;
}
.tag--primary {
  background-color: #fdddd3;
  border-color: #F35625;
}
.tag--secondary {
  background-color: #ebedf3;
  border-color: #1F1451;
}
.tag--tertiary {
  background-color: #eef4ff;
  border-color: #456CC0;
}
.tag--success {
  background-color: #fafffa;
  border-color: #7ED286;
}
.tag--info {
  background-color: #a5c2f0;
  border-color: #A5C2F0;
}
.tag--warning {
  background-color: #fffaf1;
  border-color: #EDD272;
}
.tag--danger {
  background-color: #feeeec;
  border-color: #F95540;
}
.tag--light {
  background-color: #F4F7FC;
  border-color: #F4F7FC;
}
.tag--dark {
  background-color: #D1D3E0;
  border-color: #181C32;
}
.tag--white {
  background-color: #ffffff;
  border-color: #ffffff;
}
.tag--black {
  background-color: #E4E6EF;
  border-color: #3F4254;
}
.tag--gray {
  background-color: #EAEDF2;
  border-color: #E4E6EF;
}
.tag--bg-default {
  background-color: var(--dt-color-surface-muted);
}

}