.storybook-force-hover:not([disabled]):hover,
.storybook-force-hover:not([disabled]) {
  background: var(--color-interaction-container-neutral-background-hover);
  border-color: var(--color-interaction-container-neutral-border-hover);
  color: var(--color-interaction-container-neutral-text-hover);
}

.storybook-force-focus:not([disabled]):focus-visible:focus, .storybook-force-focus:not([disabled]):focus-visible:focus-within,
.storybook-force-focus:not([disabled]):focus,
.storybook-force-focus:not([disabled]):focus-within {
  outline: none;
}
.storybook-force-focus:not([disabled]):focus-visible:focus-visible, .storybook-force-focus:not([disabled]):focus-visible:has(:focus-visible),
.storybook-force-focus:not([disabled]):focus-visible,
.storybook-force-focus:not([disabled]):has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}

nv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pill-gap-x);
  height: var(--pill-height);
  padding: var(--pill-padding-y) var(--pill-padding-x);
  border-radius: var(--pill-border-radius);
  border: var(--pill-stroke) solid var(--color-interaction-container-neutral-border);
  background: var(--color-interaction-container-neutral-background);
  color: var(--color-interaction-container-neutral-text);
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-medium-emphasis);
  user-select: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
nv-pill:focus, nv-pill:focus-within {
  outline: none;
}
nv-pill:focus-visible, nv-pill:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}
nv-pill:not([disabled]:not([disabled=false])):hover {
  background: var(--color-interaction-container-neutral-background-hover);
  border-color: var(--color-interaction-container-neutral-border-hover);
  color: var(--color-interaction-container-neutral-text-hover);
}
nv-pill:not([disabled]:not([disabled=false])):active {
  background: var(--color-interaction-container-neutral-background-active);
  border-color: var(--color-interaction-container-neutral-border-active);
  color: var(--color-interaction-container-neutral-text-active);
}
nv-pill[selected]:not([selected=false]) {
  background: var(--color-interaction-container-neutral-background-active);
  border-color: var(--color-interaction-container-neutral-border-active);
  color: var(--color-interaction-container-neutral-text-active);
}
nv-pill[selected]:not([selected=false]) .trailing-icon {
  color: var(--color-interaction-container-neutral-icon-active);
}
nv-pill[selected]:not([selected=false]):not([disabled]:not([disabled=false])):hover {
  background: var(--color-interaction-container-neutral-background-active);
  border-color: var(--color-interaction-container-neutral-border-active);
  color: var(--color-interaction-container-neutral-text-active);
}
nv-pill[disabled]:not([disabled=false]) {
  opacity: 0.5;
  cursor: not-allowed;
}
nv-pill .leading-icon,
nv-pill .trailing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-interaction-container-neutral-icon);
}
nv-pill:not([leading-icon]):not(:has([slot=leading-icon])) .leading-icon, nv-pill[leading-icon=""]:not(:has([slot=leading-icon])) .leading-icon {
  display: none;
}
nv-pill .label {
  white-space: nowrap;
}
nv-pill nv-icon > svg {
  color: currentColor;
}