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

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

.chip {
  display: inline-flex;
  overflow: hidden;
  max-width: 100%;
  height: 2.25rem;
  padding: 0;
  border: 0.0625rem solid var(--s-border-default);
  border-radius: 1.25rem;
  color: var(--s-text-subdued);
  background-color: transparent;
  font: inherit;
  font-size: var(--s-font-size-sm);
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-sm);
  flex-direction: column;
}

.chip--size-s {
  height: 2rem;
}

.chip--size-s.chip--removable .chip__inner {
      padding-right: calc(1.5rem + var(--s-space-12));
    }

.chip--size-s .chip__inner {
    padding-right: var(--s-space-12);
    padding-left: var(--s-space-12);
  }

.chip--size-s + .chip__remove-button {
    top: var(--s-space-4);
    width: 1.5rem;
    height: 1.5rem;
  }

.chip--interactive {
  cursor: pointer;
}

.chip--interactive:hover {
    background-color: var(--s-state-hovered);
  }

.chip--interactive:hover ::part(avatar) {
      background-color: var(--s-surface-raised-hovered);
    }

.chip--interactive:hover + .chip__remove-button {
      background-color: var(--s-surface-raised-default);
    }

.chip--interactive:hover + .chip__remove-button:hover {
        background-color: var(--s-surface-raised-hovered);
      }

.chip--interactive:hover + .chip__remove-button:active {
        background-color: var(--s-state-pressed);
      }

.chip--interactive:active {
    background-color: var(--s-state-pressed);
  }

.chip--interactive:active ::part(avatar) {
      background-color: var(--s-surface-raised-pressed);
    }

.chip--interactive:active + .chip__remove-button {
      background-color: var(--s-state-pressed);
    }

.chip--icon-color-highlight .chip__icon {
    color: var(--s-icon-highlight);
  }

.chip--removable .chip__inner {
    padding-right: calc(1.875rem + var(--s-space-12));
  }

.chip--intent-critical {
  border-color: var(--s-border-critical);
  color: var(--s-text-critical);
}

.chip--intent-critical .chip__icon {
    color: var(--s-icon-critical);
  }

.chip--border-radius-sm {
  border-radius: var(--s-border-radius-sm);
}

.chip--intent-success {
  border-color: var(--s-border-success);
  color: var(--s-text-success);
}

.chip--intent-success .chip__icon {
    color: var(--s-icon-success);
  }

.chip--intent-highlight {
  border-color: var(--s-border-highlight);
  color: var(--s-text-highlight);
}

.chip--intent-highlight .chip__icon {
    color: var(--s-icon-highlight);
  }

.chip--variant-outline.chip--pressed, .chip--variant-translucent.chip--pressed {
    color: var(--s-text-on-action-primary);
    background-color: var(--s-action-primary-default);
    border-color: var(--s-action-primary-default);
  }

.chip--variant-outline.chip--pressed .chip__icon, .chip--variant-translucent.chip--pressed .chip__icon {
      color: var(--s-text-on-action-primary);
    }

.chip--variant-outline.chip--pressed:hover, .chip--variant-translucent.chip--pressed:hover {
      background-color: var(--s-action-primary-hovered);
    }

.chip--variant-outline.chip--pressed:hover + .chip__remove-button, .chip--variant-translucent.chip--pressed:hover + .chip__remove-button {
        background-color: var(--s-action-primary-hovered);
      }

.chip--variant-outline.chip--pressed:active, .chip--variant-translucent.chip--pressed:active {
      background-color: var(--s-action-primary-pressed);
    }

.chip--variant-outline.chip--pressed:active + .chip__remove-button, .chip--variant-translucent.chip--pressed:active + .chip__remove-button {
        background-color: var(--s-action-primary-pressed);
      }

.chip--variant-outline.chip--pressed + .chip__remove-button, .chip--variant-translucent.chip--pressed + .chip__remove-button {
      color: var(--s-text-on-action-primary);
      background-color: var(--s-action-primary-default);
    }

.chip--variant-outline.chip--pressed + .chip__remove-button:hover, .chip--variant-translucent.chip--pressed + .chip__remove-button:hover {
        background-color: var(--s-action-primary-hovered);
      }

.chip--variant-outline.chip--pressed + .chip__remove-button:active, .chip--variant-translucent.chip--pressed + .chip__remove-button:active {
        background-color: var(--s-action-primary-pressed);
      }

.chip--variant-translucent {
  background: var(--s-translucent-medium-default);
  -webkit-backdrop-filter: blur(var(--s-blur-s));
          backdrop-filter: blur(var(--s-blur-s));
}

.chip--variant-translucent.chip--interactive:hover {
      background: var(--s-translucent-medium-hovered);
    }

.chip--variant-translucent.chip--interactive:active {
      background: var(--s-translucent-medium-pressed);
    }

.chip--variant-plain {
  height: auto;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.chip--variant-plain.chip--interactive:hover {
      background-color: transparent;
      text-decoration: underline;
      text-underline-offset: var(--s-space-4);
    }

.chip--variant-plain.chip--interactive:hover ::part(avatar) {
        background-color: var(--s-surface-raised-hovered);
      }

.chip--variant-plain.chip--interactive:active {
      background-color: transparent;
    }

.chip--variant-plain.chip--interactive:active ::part(avatar) {
        background-color: var(--s-surface-raised-pressed);
      }

.chip--variant-plain.chip--removable .chip__inner {
      padding-right: var(--s-space-12);
    }

.chip--variant-plain + .chip__remove-button {
    position: relative;
    top: 0;
    right: auto;
  }

.chip--variant-plain .chip__inner {
    padding-right: 0;
    padding-left: 0;
  }

.chip--variant-plain .chip__icon,
  .chip--variant-plain .chip__avatar {
    margin-left: 0;
  }

.chip--has-progress + .chip__remove-button {
    top: 0.1875rem;
  }

.chip--has-progress:not(.chip--size-s) + .chip__remove-button {
    top: 0.0625rem;
  }

.chip__inner {
  display: inline-flex;
  max-width: 100%;
  height: 100%;
  padding-right: var(--s-space-16);
  padding-left: var(--s-space-16);
  align-items: center;
}

.chip__avatar,
.chip__icon {
  display: inline-flex;
  margin-right: var(--s-space-8);
  flex-shrink: 0;
}

.chip__avatar {
  overflow: hidden;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -0.625rem;
}

.chip__icon {
  margin-left: -0.25rem;
  color: var(--s-icon-default);
}

.chip__trailing-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: var(--s-space-8);
}

.chip__label {
  overflow: hidden;
  flex-grow: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chip__progress-indicator {
  width: 100%;
}

.chip__remove-button {
  position: absolute;
  top: 0.1875rem;
  right: var(--s-space-4);
  display: inline-flex;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  color: var(--s-icon-default);
  background-color: transparent;
  cursor: pointer;
}

.chip__remove-button:hover {
    background-color: var(--s-state-hovered);
  }

.chip__remove-button:active {
    background-color: var(--s-state-pressed);
  }