:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  display: inline-block;
}

.tag {
  display: flex;
  align-items: center;
  border: solid 1px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}

.tag__clear::part(base) {
  color: inherit;
  padding: 0;
}

.tag--primary {
  background-color: var(--sl-color-blue-100);
  border-color: var(--sl-color-blue-200);
  color: var(--sl-color-blue-700);
}

.tag--success {
  background-color: var(--sl-color-green-100);
  border-color: var(--sl-color-green-200);
  color: var(--sl-color-green-700);
}

.tag--info {
  background-color: var(--sl-color-gray-100);
  border-color: var(--sl-color-gray-200);
  color: var(--sl-color-gray-700);
}

.tag--warning {
  background-color: var(--sl-color-yellow-100);
  border-color: var(--sl-color-yellow-200);
  color: var(--sl-color-yellow-700);
}

.tag--danger {
  background-color: var(--sl-color-red-100);
  border-color: var(--sl-color-red-200);
  color: var(--sl-color-red-700);
}

.tag--small {
  font-size: var(--sl-button-font-size-small);
  height: calc(var(--sl-input-height-small) * 0.8);
  line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
  border-radius: var(--sl-input-border-radius-small);
  padding: 0 var(--sl-spacing-x-small);
}
.tag--small sl-icon {
  margin-right: var(--sl-spacing-xx-small);
}
.tag--small .tag__clear {
  margin-left: var(--sl-spacing-xx-small);
  margin-right: calc(-1 * var(--sl-spacing-xxx-small));
}

.tag--medium {
  font-size: var(--sl-button-font-size-medium);
  height: calc(var(--sl-input-height-medium) * 0.8);
  line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
  border-radius: var(--sl-input-border-radius-medium);
  padding: 0 var(--sl-spacing-small);
}
.tag--medium sl-icon {
  margin-right: var(--sl-spacing-x-small);
}
.tag--medium .tag__clear {
  margin-left: var(--sl-spacing-xx-small);
  margin-right: calc(-1 * var(--sl-spacing-xx-small));
}

.tag--large {
  font-size: var(--sl-button-font-size-large);
  height: calc(var(--sl-input-height-large) * 0.8);
  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
  border-radius: var(--sl-input-border-radius-large);
  padding: 0 var(--sl-spacing-medium);
}
.tag--large sl-icon {
  margin-right: var(--sl-spacing-small);
}
.tag--large .tag__clear {
  margin-left: var(--sl-spacing-xx-small);
  margin-right: calc(-1 * var(--sl-spacing-x-small));
}

.tag--pill {
  border-radius: var(--sl-border-radius-pill);
}