@use '@mezzanine-ui/system/motion' as motion;
@use './icon' as *;

@keyframes #{$prefix}-spin {
  100% {
    transform: rotate(360deg);
  }
}

.#{$prefix} {
  cursor: var(--#{$prefix}-cursor);
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 0;
  flex-shrink: 0;
  user-select: none;

  &--color {
    color: var(--#{$prefix}-color);
  }

  &--spin {
    @include motion.pattern(spin, animation);

    animation-name: #{$prefix}-spin;
    animation-iteration-count: infinite;
  }

  &--size {
    font-size: var(--#{$prefix}-size);
  }
}