.icon-squared svg {
  border: 2px solid var(--icon-primary-color, black);
  border-radius: 3px;
  box-sizing: content-box;
  color: var(--icon-primary-color, black);
  height: 1.25em;
  padding: var(--space-3xs);
  transition: 300ms ease;
  transition-property: transform, background-color, color, border-color;
  width: 1.25em;
}

:is(a, button).icon-squared {
  align-items: center;
  background-color: transparent;
  border: none;
  color: inherit;
  display: flex;
  gap: var(--space-2xs);
  outline: none;
  padding: 0;
}

:is(a, button).icon-squared:hover svg,
:is(a, button).icon-squared:focus svg {
  transform: translateY(-3px);
  background-color: var(--icon-primary-color, black);
  color: var(--icon-secondary-color, white);
}