.ds-tag {
  --tag-bg: var(--bh-bg-default);
  --tag-border: var(--bh-border-default);
  --tag-color: var(--bh-content-default);

  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bh-space-xs-4);
  border: var(--bh-space-xxxs-1) solid var(--tag-border);
  border-radius: var(--bh-radius-full);
  background: var(--tag-bg);
  color: var(--tag-color);
  font-family: var(--bh-font-family);
  font-weight: var(--bh-font-weight-medium);
  letter-spacing: 0;
  white-space: nowrap;
}

.ds-tag *,
.ds-tag *::before,
.ds-tag *::after {
  box-sizing: border-box;
}

.ds-tag--xs {
  min-height: var(--bh-space-5xl-24);
  padding-inline: var(--bh-space-md-8);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  line-height: var(--bh-text-body-2xs-regular-line-height);
}

.ds-tag--md {
  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  padding-inline: var(--bh-space-lg-10);
  font-size: var(--bh-text-body-xs-regular-font-size);
  line-height: var(--bh-text-body-sm-regular-line-height);
}

.ds-tag--lg {
  min-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
  padding-inline: var(--bh-space-xl-12);
  font-size: var(--bh-text-body-md-font-size);
  line-height: var(--bh-text-body-md-line-height);
}

.ds-tag--closeable {
  padding-inline-end: var(--bh-space-sm-6);
}

.ds-tag__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-tag__leading {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}

.ds-tag__leading svg {
  width: var(--bh-space-3xl-16);
  height: var(--bh-space-3xl-16);
  display: block;
}

.ds-tag__dot {
  width: var(--bh-space-md-8);
  height: var(--bh-space-md-8);
  border-radius: var(--bh-radius-full);
  background: var(--bh-content-success-default);
}

.ds-tag__flag {
  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  height: var(--bh-space-xl-12);
  border-radius: var(--bh-radius-xs-2);
  background:
    linear-gradient(var(--bh-bg-danger-default) 0 33%, var(--bh-bg-raised) 33% 66%, var(--bh-bg-inverse) 66% 100%);
  box-shadow: inset 0 0 0 var(--bh-space-xxxs-1) var(--bh-border-default);
}

.ds-tag__avatar {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
  display: inline-grid;
  place-items: center;
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-brand-soft);
  color: var(--bh-content-brand-default);
  font-size: var(--bh-text-body-3xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.ds-tag__close {
  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  border: 0;
  border-radius: var(--bh-radius-full);
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: currentColor;
  padding: 0;
  cursor: pointer;
}

.ds-tag__close svg {
  width: var(--bh-space-2xl-14);
  height: var(--bh-space-2xl-14);
}

.ds-tag__close:hover:not(:disabled) {
  background: var(--bh-interactive-ghost-hover);
}

.ds-tag:hover {
  --tag-bg: var(--bh-interactive-ghost-hover);
}

.ds-tag--active {
  --tag-bg: var(--bh-bg-brand-soft);
  --tag-border: var(--bh-border-brand-strong);
  --tag-color: var(--bh-content-brand-default);
}

.ds-tag:focus-visible {
  --tag-border: var(--bh-border-brand-strong);
  box-shadow: var(--shadow-button-focus);
}

.ds-tag--disabled {
  --tag-bg: var(--bh-bg-muted);
  --tag-border: var(--bh-border-subtle);
  --tag-color: var(--bh-content-muted);
  opacity: var(--bh-opacity-tag-muted);
}

.ds-tag[dir="rtl"] {
  font-family: var(--bh-font-family);
}
