:host {
  display: inline-flex;
  max-width: 100%;
}

  :host * {
    box-sizing: border-box;
  }

.tag {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border-radius: var(--s-border-radius-s);
  color: var(--s-text-default);
  background-color: var(--swirl-tag-background-default);
  font-size: var(--s-font-size-sm);
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-sm);
  white-space: nowrap;
  border-style: solid;
  border-width: var(--s-border-width-default);
  border-color: transparent;
}

.tag--size-s {
  padding: var(--s-space-0) var(--s-space-4);
}

.tag--size-s.tag--icon-position-end .tag__icon {
      margin-right: calc(-1 * var(--s-space-2));
    }

.tag--size-s .tag__icon {
    margin-left: calc(-1 * var(--s-space-2));
  }

.tag--size-m {
  padding: var(--s-space-2) var(--s-space-8);
}

.tag--icon-position-end .tag__icon {
    margin-right: calc(-1 * var(--s-space-4));
    margin-left: var(--s-space-4);
    order: 2;
  }

.tag--hide-label {
  padding-right: 0;
  padding-left: 0;
}

.tag--hide-label.tag--size-s .tag__icon {
      margin-right: 0;
      margin-left: 0;
    }

.tag--hide-label .tag__icon {
    margin-right: var(--s-space-2);
    margin-left: var(--s-space-2);
  }

.tag--variant-outline {
  border-color: var(--s-border-strong);
}

.tag--variant-strong {
  color: var(--s-text-on-status);
  background-color: var(--s-surface-neutral-default);
}

.tag--variant-strong .tag__removal-button {
    color: var(--s-icon-on-status);
  }

.tag--intent-info {
  color: var(--s-text-info);
  background-color: var(--s-surface-info-subdued);
}

.tag--intent-info .tag__removal-button {
    color: var(--s-icon-info);
  }

.tag--intent-info.tag--variant-outline {
    border-color: var(--s-border-info);
  }

.tag--intent-info.tag--variant-strong {
    color: var(--s-text-on-status);
    background-color: var(--s-surface-info-default);
  }

.tag--intent-info.tag--variant-strong .tag__removal-button {
      color: var(--s-icon-on-status);
    }

.tag--intent-critical {
  color: var(--s-text-critical);
  background-color: var(--s-surface-critical-subdued);
}

.tag--intent-critical .tag__removal-button {
    color: var(--s-icon-critical);
  }

.tag--intent-critical.tag--variant-outline {
    border-color: var(--s-border-critical);
  }

.tag--intent-critical.tag--variant-strong {
    color: var(--s-text-on-status);
    background-color: var(--s-surface-critical-default);
  }

.tag--intent-critical.tag--variant-strong .tag__removal-button {
      color: var(--s-icon-on-status);
    }

.tag--intent-warning {
  color: var(--s-text-warning);
  background-color: var(--s-surface-warning-subdued);
}

.tag--intent-warning .tag__removal-button {
    color: var(--s-icon-warning);
  }

.tag--intent-warning.tag--variant-outline {
    border-color: var(--s-border-warning);
  }

.tag--intent-warning.tag--variant-strong {
    color: var(--s-text-dark);
    background-color: var(--s-surface-warning-default);
  }

.tag--intent-warning.tag--variant-strong .tag__removal-button {
      color: var(--s-icon-dark);
    }

.tag--intent-success {
  color: var(--s-text-success);
  background-color: var(--s-surface-success-subdued);
}

.tag--intent-success .tag__removal-button {
    color: var(--s-icon-success);
  }

.tag--intent-success.tag--variant-outline {
    border-color: var(--s-border-success);
  }

.tag--intent-success.tag--variant-strong {
    color: var(--s-text-on-status);
    background-color: var(--s-surface-success-default);
  }

.tag--intent-success.tag--variant-strong .tag__removal-button {
      color: var(--s-icon-on-status);
    }

.tag--intent-special {
  color: var(--s-decorative-grape-text);
  background-color: var(--s-decorative-grape-surface-subdued);
}

.tag--intent-special .tag__removal-button {
    color: var(--s-decorative-grape-text);
  }

.tag--intent-special.tag--variant-outline {
    border-color: var(--s-decorative-grape-text);
  }

.tag--intent-special.tag--variant-strong {
    color: var(--s-text-on-status);
    background-color: var(--s-decorative-grape-surface);
  }

.tag--intent-special.tag--variant-strong .tag__removal-button {
      color: var(--s-icon-on-status);
    }

.tag--intent-translucent {
  color: var(--s-text-on-image);
  background-color: var(--s-surface-on-image-default);
}

.tag--intent-translucent .tag__removal-button {
    color: var(--s-icon-on-image);
  }

.tag--intent-translucent.tag--variant-outline {
    border-color: var(--s-text-on-image);
  }

.tag__icon {
  display: inline-flex;
  margin-right: var(--s-space-4);
  margin-left: calc(-1 * var(--s-space-4));
  flex-shrink: 0;
  order: 0;
}

.tag__label {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  order: 1;
}

.tag__removal-button {
  display: inline-flex;
  margin-right: calc(-1 * var(--s-space-4));
  margin-left: var(--s-space-4);
  padding: 0;
  border: none;
  color: var(--s-icon-strong);
  background-color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  order: 3;
}

.tag__removal-button:focus:not(:focus-visible) {
    outline: none;
  }

.tag__removal-button:focus-visible {
    outline-color: var(--s-focus-default);
  }