.mykn-icon {
  --mykn-icon-size: 1em;
  height: var(--mykn-icon-size);
  vertical-align: middle;
  // TODO: Implement proper sizing system for icon
  transform: scale(1.33);
  transition: all var(--animation-duration-medium)
    var(--animation-timing-function);
  width: var(--mykn-icon-size);

  &--flip-x {
    transform: rotate(180deg);
  }

  &--hidden {
    visibility: hidden;
  }

  &--spin {
    animation: spin var(--animation-duration-slow)
      var(--animation-timing-function) infinite;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}