/**
 * Do not edit directly, this file was auto-generated.
 */
.jkl-chip {
  --padding-inline: var(--jkl-unit-15);
  --padding-icon: var(--jkl-unit-10);
  --height: var(--jkl-unit-40);
  --gap: var(--jkl-unit-05);
  --text-color: var(--jkl-color-text-default);
  --border-color: var(--jkl-color-border-separator);
  --background-color: transparent;
  --border-width: 0.0625rem;
  font-size: var(--jkl-font-size-2);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  background-color: var(--background-color);
  color: var(--text-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: 99999px;
  display: inline-flex;
  align-items: center;
  text-align: initial;
  white-space: nowrap;
  gap: var(--gap);
  padding: 0 var(--padding-inline);
  min-height: var(--height);
}
@media screen and (forced-colors: active) {
  .jkl-chip {
    border: 2px none CanvasText;
    border-bottom-style: dotted;
  }
}
.jkl-chip::after {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--text-color);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: opacity;
}
.jkl-chip:focus-visible {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 3px;
}
.jkl-chip:hover::after {
  opacity: 0.15;
}
.jkl-chip--filter[aria-pressed=true] {
  --background-color: var(--jkl-color-background-action);
  --text-color: var(--jkl-color-text-on-action);
  --border-color: var(--text-color);
}
@media screen and (forced-colors: active) {
  .jkl-chip--filter[aria-pressed=true] {
    forced-color-adjust: none;
    --background-color: CanvasText;
    --text-color: Canvas;
  }
}
.jkl-chip:has(.jkl-icon) {
  padding-inline-end: var(--padding-icon);
}