.l-tag {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--td-text-color-primary);
  font-size: var(--td-font-size-body-medium);
  font-family: var(--td-font-family);
  list-style: none;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: 0px 8px;
  height: 24px;
  font: var(--td-font-body-medium);
  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: 4px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.l-tag .l-tag__icon-close {
  margin-right: 0;
  margin-left: 4px;
  font: var(--td-font-body-large);
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.l-tag ::selection {
  background: transparent;
}
.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--primary {
  background-color: var(--td-brand-color);
}
.l-tag--primary.l-tag--outline {
  color: var(--td-brand-color);
}
.l-tag--success {
  background-color: var(--td-success-color);
}
.l-tag--success.l-tag--outline {
  color: var(--td-success-color);
}
.l-tag--warning {
  background-color: var(--td-warning-color);
}
.l-tag--warning.l-tag--outline {
  color: var(--td-warning-color);
}
.l-tag--danger {
  background-color: var(--td-error-color);
}
.l-tag--danger.l-tag--outline {
  color: var(--td-error-color);
}
.l-tag--primary.l-tag--light {
  color: var(--td-brand-color);
  background-color: var(--td-brand-color-light);
}
.l-tag--primary.l-tag--light.l-tag--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 {
  color: var(--td-brand-color-hover);
}
.l-tag--success.l-tag--light {
  color: var(--td-success-color);
  background-color: var(--td-success-color-1);
}
.l-tag--success.l-tag--light.l-tag--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 {
  color: var(--td-success-color-hover);
}
.l-tag--warning.l-tag--light {
  color: var(--td-warning-color);
  background-color: var(--td-warning-color-1);
}
.l-tag--warning.l-tag--light.l-tag--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 {
  color: var(--td-warning-color-hover);
}
.l-tag--danger.l-tag--light {
  color: var(--td-error-color);
  background-color: var(--td-error-color-1);
}
.l-tag--danger.l-tag--light.l-tag--outline {
  color: var(--td-error-color);
}
.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__icon-close:hover,
.l-tag--danger.l-tag--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 {
  fill: var(--td-font-white-1);
}
.l-tag--dark.l-tag:not(.l-tag--default) .l-tag__icon-close:hover {
  fill: var(--td-font-white-2);
}
.l-tag.l-tag--outline {
  background-color: var(--td-bg-color-component);
}
.l-tag.l-size-small {
  padding: 0px 8px;
  height: 22px;
  font: var(--td-font-body-small);
}
.l-tag.l-size-small .l-icon {
  font-size: var(--td-font-body-small);
}
.l-tag.l-size-large {
  padding: 0px 12px;
  height: 32px;
  font: var(--td-font-body-large);
}
.l-tag.l-size-large .l-icon {
  font: var(--td-font-body-large);
}
.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;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}
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);
}
