@layer kz-components {
  .interactiveIcon {
    position: relative;
    background: none;
    padding: 0;
    color: var(--color-blue-500);

    &:hover {
      color: var(--color-blue-400);
    }
  }

  .interactiveIcon:focus {
    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
      var(--color-blue-500);
  }
}