:root {
  --animate-duration: 500ms;
}

sl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 12px;
  border-radius: 2px;
  font-size: 12px;
  color: var(--sdx-color-gray) !important;
  user-select: none;
  white-space: nowrap;
  background: #e4e9ec;
}
sl-tag .tag-icon {
  flex-shrink: 0;
}
sl-tag .line-clamp {
  -webkit-line-clamp: 1;
  word-break: break-all;
}
sl-tag.blue {
  background: #c2ddf4;
}
sl-tag.green {
  background: #c5e9d2;
}
sl-tag.iris {
  background: #d1ceee;
}
sl-tag.orange {
  background: #f9dfc9;
}
sl-tag.orchid {
  background: #e4cae2;
}
sl-tag.pink {
  background: #f3c5d6;
}
sl-tag.red {
  background: #f1c2c6;
}
sl-tag.turquoise {
  background: #bfe7e7;
}
sl-tag.grey {
  background: #dde3e7;
}
sl-tag.blue-heavy {
  background: rgb(14.5882352941%, 48.010230179%, 100%) !important;
}
sl-tag.blue-medium_new {
  background: rgb(52.7843137255%, 71.2600170503%, 100%) !important;
}
sl-tag.blue-light {
  background: #e8f1ff !important;
}
sl-tag.green-heavy {
  background: rgb(19.477124183%, 100%, 9.4117647059%) !important;
}
sl-tag.green-medium_new {
  background: rgb(51.8954248366%, 100%, 45.8823529412%) !important;
}
sl-tag.green-light {
  background: #d7ffd2 !important;
}
sl-tag.iris-heavy {
  background: rgb(15.7647058824%, 25.1241830065%, 100%) !important;
}
sl-tag.iris-medium_new {
  background: rgb(54.3529411765%, 59.4248366013%, 100%) !important;
}
sl-tag.iris-light {
  background: #edefff !important;
}
sl-tag.orange-heavy {
  background: rgb(91.0182555781%, 43.1156186613%, 22.1582150101%) !important;
}
sl-tag.orange-medium_new {
  background: rgb(94.9208924949%, 67.8323191346%, 55.9810682894%) !important;
}
sl-tag.orange-light {
  background: #fcece5 !important;
}
sl-tag.orchid-heavy {
  background: #ff27c9 !important;
}
sl-tag.orchid-medium_new {
  background: rgb(100%, 53.7254901961%, 88.431372549%) !important;
}
sl-tag.orchid-light {
  background: #ffebfa !important;
}
sl-tag.pink-heavy {
  background: rgb(100%, 15.0588235294%, 27.1932773109%) !important;
}
sl-tag.pink-medium_new {
  background: rgb(100%, 53.4117647059%, 60.0672268908%) !important;
}
sl-tag.pink-light {
  background: #ffeaed !important;
}
sl-tag.red-heavy {
  background: rgb(96.2864450128%, 25.7289002558%, 18.3017902813%) !important;
}
sl-tag.red-medium_new {
  background: rgb(97.947144075%, 58.9428815004%, 54.8371696505%) !important;
}
sl-tag.red-light {
  background: #feebe9 !important;
}
sl-tag.turquoise-heavy {
  background: rgb(9.6470588235%, 81.5187165775%, 100%) !important;
}
sl-tag.turquoise-medium_new {
  background: rgb(46.1960784314%, 88.9946524064%, 100%) !important;
}
sl-tag.turquoise-light {
  background: #d3f6ff !important;
}
sl-tag.grey-heavy {
  background: rgb(49.8823529412%, 49.8823529412%, 66.5882352941%) !important;
}
sl-tag.grey-medium_new {
  background: rgb(73.1764705882%, 73.1764705882%, 82.1176470588%) !important;
}
sl-tag.grey-light {
  background: #f6f6f9 !important;
}
sl-tag.yellow-heavy {
  background: rgb(100%, 86.265795207%, 7.2941176471%) !important;
}
sl-tag.yellow-medium_new {
  background: rgb(100%, 91.5642701525%, 43.0588235294%) !important;
}
sl-tag.yellow-light {
  background: #fff7c9 !important;
}
sl-tag.blue-darker, sl-tag.blue-light {
  color: #001155 !important;
}
sl-tag {
  /*
  &.blue-lighter,
  .blue-lighter {
    color: $color !important;
  }*/
}
sl-tag.green-darker, sl-tag.green-light {
  color: #0d6f2c !important;
}
sl-tag {
  /*
  &.green-lighter,
  .green-lighter {
    color: $color !important;
  }*/
}
sl-tag.iris-darker, sl-tag.iris-light {
  color: #573ce4 !important;
}
sl-tag {
  /*
  &.iris-lighter,
  .iris-lighter {
    color: $color !important;
  }*/
}
sl-tag.orange-darker, sl-tag.orange-light {
  color: #ba3e06 !important;
}
sl-tag {
  /*
  &.orange-lighter,
  .orange-lighter {
    color: $color !important;
  }*/
}
sl-tag.orchid-darker, sl-tag.orchid-light {
  color: #930082 !important;
}
sl-tag {
  /*
  &.orchid-lighter,
  .orchid-lighter {
    color: $color !important;
  }*/
}
sl-tag.pink-darker, sl-tag.pink-light {
  color: #ad194d !important;
}
sl-tag {
  /*
  &.pink-lighter,
  .pink-lighter {
    color: $color !important;
  }*/
}
sl-tag.red-darker, sl-tag.red-light {
  color: #be0000 !important;
}
sl-tag {
  /*
  &.red-lighter,
  .red-lighter {
    color: $color !important;
  }*/
}
sl-tag.turquoise-darker, sl-tag.turquoise-light {
  color: #006678 !important;
}
sl-tag {
  /*
  &.turquoise-lighter,
  .turquoise-lighter {
    color: $color !important;
  }*/
}
sl-tag.grey-darker, sl-tag.grey-light {
  color: #3b3a3f !important;
}
sl-tag {
  /*
  &.grey-lighter,
  .grey-lighter {
    color: $color !important;
  }*/
}
sl-tag.yellow-darker, sl-tag.yellow-light {
  color: #785e03 !important;
}
sl-tag {
  /*
  &.yellow-lighter,
  .yellow-lighter {
    color: $color !important;
  }*/
}
sl-tag.small {
  padding: 3px var(--sdx-baseline) 3px var(--sdx-baseline) !important;
  line-height: 12px !important;
}
sl-tag.styling-light {
  font-weight: bold;
  border-radius: 5px;
  padding: 1px 8px;
}
sl-tag.styling-light.small {
  line-height: 14px !important;
}
sl-tag {
  /*&.light {
    border-style: solid;
    border-width: 1px;
  }*/
}