.socials {
  display: inline-flex;
  align-items: center;
}

.icon {
  user-select: none;
  display: inline-flex;
  border-radius: var(--radius);
  padding: var(--gap);
  color: var(--gray-alpha) !important;

  will-change: transform;
  transition: all 0.1s cubic-bezier(0.01, 0.88, 0.93, 0.07);
  line-height: 50%;
  background-color: transparent;
  cursor: pointer;
  border: none;
}

/* TODO-APP: remove !importants when specificity is figured out */
.icon:active,
.icon:hover,
.icon:focus-within {
  outline: none;
  color: var(--fg) !important;
  transition: all 200ms !important;
  box-shadow: none !important;
  background: var(--lightest-gray) !important;
  /* transform: translateY(-5px); */
}

@media (prefers-reduced-motion: reduce) {
  .icon,
  .icon:hover {
    transition: none;
  }
}
