.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 4rem;
  padding: var(--anrt-spacing-tiny) var(--anrt-spacing-066);
  text-decoration: none;
  color: var(--anrt-color-blue-21);
  border: 1px solid;
  border-radius: var(--anrt-radius-full);

  &.pill--selected,
  &:where(:link:hover),
  &:where(:link:focus) {
    color: var(--anrt-color-white);
    border-color: var(--anrt-color-blue-21);
    background-color: var(--anrt-color-blue-21);
  }
}

.pill--white {
  color: var(--anrt-color-white);

  &.pill--selected,
  &:where(:link:hover),
  &:where(:link:focus) {
    color: var(--anrt-color-blue-21);
    border-color: var(--anrt-color-white);
    background-color: var(--anrt-color-white);
  }
}

.pill--text {
  color: var(--anrt-color-grey-94);
  border-color: var(--anrt-color-text);
  background-color: var(--anrt-color-text);

  &.pill--selected,
  &:where(:link:hover),
  &:where(:link:focus) {
    color: var(--anrt-color-text);
    border-color: var(--anrt-color-grey-94);
    background-color: var(--anrt-color-grey-94);
  }
}