:root {
  --animate-duration: 1s;
}

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.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(37.2, 122.4260869565, 255) !important;
}
sl-tag.blue-medium_new {
  background: rgb(134.6, 181.7130434783, 255) !important;
}
sl-tag.green-heavy {
  background: rgb(49.6666666667, 255, 24) !important;
}
sl-tag.green-medium_new {
  background: rgb(132.3333333333, 255, 117) !important;
}
sl-tag.iris-heavy {
  background: rgb(40.2, 64.0666666667, 255) !important;
}
sl-tag.iris-medium_new {
  background: rgb(138.6, 151.5333333333, 255) !important;
}
sl-tag.orange-heavy {
  background: rgb(232.0965517241, 109.9448275862, 56.5034482759) !important;
}
sl-tag.orange-medium_new {
  background: rgb(242.0482758621, 172.9724137931, 142.7517241379) !important;
}
sl-tag.orchid-heavy {
  background: #ff27c9 !important;
}
sl-tag.orchid-medium_new {
  background: rgb(255, 137, 225.5) !important;
}
sl-tag.pink-heavy {
  background: rgb(255, 38.4, 69.3428571429) !important;
}
sl-tag.pink-medium_new {
  background: rgb(255, 136.2, 153.1714285714) !important;
}
sl-tag.red-heavy {
  background: rgb(245.5304347826, 65.6086956522, 46.6695652174) !important;
}
sl-tag.red-medium_new {
  background: rgb(249.7652173913, 150.3043478261, 139.8347826087) !important;
}
sl-tag.turquoise-heavy {
  background: rgb(24.6, 207.8727272727, 255) !important;
}
sl-tag.turquoise-medium_new {
  background: rgb(117.8, 226.9363636364, 255) !important;
}
sl-tag.grey-heavy {
  background: rgb(127.2, 127.2, 169.8) !important;
}
sl-tag.grey-medium_new {
  background: rgb(186.6, 186.6, 209.4) !important;
}
sl-tag.blue-darker,
sl-tag .blue-darker {
  color: var(--sdx-color-sc-navy) !important;
}
sl-tag {
  /*
  &.blue-lighter,
  .blue-lighter {
    color: $color !important;
  }*/
}
sl-tag.green-darker,
sl-tag .green-darker {
  color: var(--sdx-color-int-green--active) !important;
}
sl-tag {
  /*
  &.green-lighter,
  .green-lighter {
    color: $color !important;
  }*/
}
sl-tag.iris-darker,
sl-tag .iris-darker {
  color: #573ce4 !important;
}
sl-tag {
  /*
  &.iris-lighter,
  .iris-lighter {
    color: $color !important;
  }*/
}
sl-tag.orange-darker,
sl-tag .orange-darker {
  color: var(--sdx-color-int-orange--active) !important;
}
sl-tag {
  /*
  &.orange-lighter,
  .orange-lighter {
    color: $color !important;
  }*/
}
sl-tag.orchid-darker,
sl-tag .orchid-darker {
  color: #930082 !important;
}
sl-tag {
  /*
  &.orchid-lighter,
  .orchid-lighter {
    color: $color !important;
  }*/
}
sl-tag.pink-darker,
sl-tag .pink-darker {
  color: #ad194d !important;
}
sl-tag {
  /*
  &.pink-lighter,
  .pink-lighter {
    color: $color !important;
  }*/
}
sl-tag.red-darker,
sl-tag .red-darker {
  color: var(--sdx-color-int-red) !important;
}
sl-tag {
  /*
  &.red-lighter,
  .red-lighter {
    color: $color !important;
  }*/
}
sl-tag.turquoise-darker,
sl-tag .turquoise-darker {
  color: #006678 !important;
}
sl-tag {
  /*
  &.turquoise-lighter,
  .turquoise-lighter {
    color: $color !important;
  }*/
}
sl-tag.grey-darker,
sl-tag .grey-darker {
  color: var(--sdx-color-gray-tint-2) !important;
}
sl-tag {
  /*
  &.grey-lighter,
  .grey-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;
  }*/
}