:global(html[data-theme='light']) {
  --encapsulation-pill-bg-c: var(--token-secondary-bg-c);
  --encapsulation-pill-c: var(--c-indigo-20);
  --encapsulation-pill-border-c: rgba(255, 255, 255, 0.05);
  --encapsulation-pill-border--hover-c: rgba(255, 255, 255, 0.05);
  --encapsulation-pill-shadow: 0px 1px 1px rgba(255, 255, 255, 0.05), 0px 2px 4px rgba(255, 255, 255, 0.1),
    0px -1px 1px rgba(255, 255, 255, 0.05), 0px -2px 4px rgba(255, 255, 255, 0.1);
}

:global(html[data-theme='dark']) {
  --encapsulation-pill-bg-c: var(--token-secondary-bg-c);
  --encapsulation-pill-c: var(--c-indigo-20);
  --encapsulation-pill-border-c: rgba(255, 255, 255, 0.05);
  --encapsulation-pill-border--hover-c: rgba(255, 255, 255, 0.05);
  --encapsulation-pill-shadow: 0px 1px 1px rgba(255, 255, 255, 0.05), 0px 2px 4px rgba(255, 255, 255, 0.1),
    0px -1px 1px rgba(255, 255, 255, 0.05), 0px -2px 4px rgba(255, 255, 255, 0.1);
}

.encapsulationPill {
  display: inline-block;

  padding: 0.375rem;

  text-transform: uppercase;

  color: var(--encapsulation-pill-c);
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 100%;
  letter-spacing: 0.12em;

  background: var(--encapsulation-pill-bg-c);
  box-sizing: border-box;
  border-radius: 100px;
  border: 1px solid var(--encapsulation-pill-border-c);

  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;

  &:hover {
    color: var(--encapsulation-pill-c);
    box-shadow: var(--encapsulation-pill-shadow);
    border: 1px solid var(--encapsulation-pill-border--hover-c);
  }
}
