:host {
  display: inline-flex;
}

.technology-chip {
  display: inline-flex;
  text-decoration: none;
  border-radius: var(--pi-theme-chip-radius, 0.25rem);

  // The chip carries the visible border, so the focus ring goes on the anchor
  // around it rather than being lost inside the component.
  &:focus-visible {
    outline: 2px solid var(--pi-color-primary);
    outline-offset: 2px;
  }

  &:hover ::ng-deep .pi-chip,
  &:hover ::ng-deep span {
    border-color: var(--pi-color-primary);
    color: var(--pi-color-primary);
  }
}