.l-tag {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: 0px var(--td-comp-paddingLR-s);
  height: var(--td-comp-size-xs);
  font: var(--td-font-body-small);
  color: var(--td-text-color-anti);
  border-radius: var(--td-radius-default);
  border: 1px solid transparent;
  white-space: nowrap;
}
.l-tag .l-icon {
  margin-right: var(--td-comp-margin-xs);
  width: calc(var(--td-font-size-body-medium) + 2px);
  height: calc(var(--td-font-size-body-medium) + 2px);
  flex-shrink: 0;
}
.l-tag .l-tag__icon-close {
  margin-right: 0;
  margin-left: var(--td-comp-margin-s);
  font: var(--td-font-body-medium);
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.l-tag--default {
  color: var(--td-text-color-primary);
  background-color: var(--td-bg-color-component);
}
.l-tag--default .l-tag__icon-close {
  color: var(--td-text-color-placeholder);
}
.l-tag--default .l-tag__icon-close:hover {
  color: var(--td-text-color-primary);
}
.l-tag--default.l-tag--checked {
  color: var(--td-text-color-anti);
  background-color: var(--td-brand-color);
}
.l-tag--default.l-tag--checked:hover {
  background-color: var(--td-brand-color-hover);
}
.l-tag--default:active {
  cursor: default;
}
.l-tag--default.l-tag--check {
  transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  cursor: pointer;
}
.l-tag--default.l-tag--check:hover:not(.l-tag--checked):not(.l-tag--disabled) {
  background-color: var(--td-bg-color-component-hover);
}
.l-tag--default.l-tag--disabled {
  color: var(--td-text-color-disabled);
  background-color: var(--td-bg-color-component-disabled);
  cursor: not-allowed;
}
.l-tag--default.l-tag--disabled:hover {
  color: var(--td-text-color-disabled);
  background-color: var(--td-bg-color-component-disabled);
}
.l-tag--default.l-tag--disabled .l-icon:hover {
  cursor: pointer;
}
.l-tag--default.l-tag--outline {
  border-color: var(--td-component-border);
}
.l-tag--default.l-tag--light {
  background-color: var(--td-bg-color-secondarycontainer);
}
.l-tag--default.l-tag--light-outline {
  border-color: var(--td-component-border);
  background-color: var(--td-bg-color-secondarycontainer);
}
.l-tag--primary {
  background-color: var(--td-brand-color);
}
.l-tag--primary.l-tag--outline {
  border-color: var(--td-brand-color);
}
.l-tag--primary.l-tag--light {
  background-color: var(--td-brand-color-light);
}
.l-tag--primary.l-tag--light-outline {
  border-color: var(--td-brand-color);
  background-color: var(--td-brand-color-light);
}
.l-tag--primary.l-tag--light,
.l-tag--primary.l-tag--outline,
.l-tag--primary.l-tag--light-outline {
  color: var(--td-brand-color);
}
.l-tag--primary.l-tag--light .l-tag__icon-close:hover,
.l-tag--primary.l-tag--outline .l-tag__icon-close:hover,
.l-tag--primary.l-tag--light-outline .l-tag__icon-close:hover {
  color: var(--td-brand-color-hover);
}
.l-tag--success {
  background-color: var(--td-success-color);
}
.l-tag--success.l-tag--outline {
  border-color: var(--td-success-color);
}
.l-tag--success.l-tag--light {
  background-color: var(--td-success-color-light);
}
.l-tag--success.l-tag--light-outline {
  border-color: var(--td-success-color);
  background-color: var(--td-success-color-light);
}
.l-tag--success.l-tag--light,
.l-tag--success.l-tag--outline,
.l-tag--success.l-tag--light-outline {
  color: var(--td-success-color);
}
.l-tag--success.l-tag--light .l-tag__icon-close:hover,
.l-tag--success.l-tag--outline .l-tag__icon-close:hover,
.l-tag--success.l-tag--light-outline .l-tag__icon-close:hover {
  color: var(--td-success-color-hover);
}
.l-tag--warning {
  background-color: var(--td-warning-color);
}
.l-tag--warning.l-tag--outline {
  border-color: var(--td-warning-color);
}
.l-tag--warning.l-tag--light {
  background-color: var(--td-warning-color-light);
}
.l-tag--warning.l-tag--light-outline {
  border-color: var(--td-warning-color);
  background-color: var(--td-warning-color-light);
}
.l-tag--warning.l-tag--light,
.l-tag--warning.l-tag--outline,
.l-tag--warning.l-tag--light-outline {
  color: var(--td-warning-color);
}
.l-tag--warning.l-tag--light .l-tag__icon-close:hover,
.l-tag--warning.l-tag--outline .l-tag__icon-close:hover,
.l-tag--warning.l-tag--light-outline .l-tag__icon-close:hover {
  color: var(--td-warning-color-hover);
}
.l-tag--danger {
  background-color: var(--td-error-color);
}
.l-tag--danger.l-tag--outline {
  border-color: var(--td-error-color);
}
.l-tag--danger.l-tag--light {
  background-color: var(--td-error-color-light);
}
.l-tag--danger.l-tag--light-outline {
  border-color: var(--td-error-color);
  background-color: var(--td-error-color-light);
}
.l-tag--danger .l-tag__icon-close {
  fill: var(--td-error-color);
}
.l-tag--danger .l-tag__icon-close:hover {
  fill: var(--td-error-color-hover);
}
.l-tag--danger.l-tag--light,
.l-tag--danger.l-tag--outline,
.l-tag--danger.l-tag--light-outline {
  color: var(--td-error-color);
}
.l-tag--danger.l-tag--light .l-tag__icon-close:hover,
.l-tag--danger.l-tag--outline .l-tag__icon-close:hover,
.l-tag--danger.l-tag--light-outline .l-tag__icon-close:hover {
  color: var(--td-error-color-hover);
}
.l-tag--dark.l-tag:not(.l-tag--default) .l-tag__icon-close {
  color: var(--td-font-white-2);
}
.l-tag--dark.l-tag:not(.l-tag--default) .l-tag__icon-close:hover {
  color: var(--td-font-white-1);
}
.l-tag.l-tag--outline {
  background: transparent;
}
.l-tag.l-size-s {
  padding: 0px var(--td-comp-paddingLR-xs);
  height: var(--td-comp-size-xxs);
  font: var(--td-font-body-small);
}
.l-tag.l-size-s .l-icon {
  font-size: var(--td-font-body-small);
}
.l-tag.l-size-l {
  padding: 0px var(--td-comp-paddingLR-m);
  height: var(--td-comp-size-m);
  font: var(--td-font-body-medium);
}
.l-tag.l-size-l .l-icon {
  font: var(--td-font-body-medium);
}
.l-tag.l-tag--round {
  border-radius: var(--td-radius-extraLarge);
}
.l-tag.l-tag--mark {
  border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0;
}
.l-tag.l-tag--ellipsis .l-tag--text {
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
a .l-tag {
  cursor: pointer;
  transition: all 0.2s linear;
}
a .l-tag:hover {
  color: var(--td-brand-color);
  background-color: var(--td-bg-color-component-hover);
}
a .l-tag:active {
  color: var(--td-brand-color-active);
  background-color: var(--td-bg-color-component-active);
}
