@use './shared' as *;
@use './design' as *;

.#{$namespace}-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: value('transition-transform');
  transform-origin: 50% 50%;

  & > g {
    display: flex;
    transform: rotate(value('icon-rotate', 0));
  }

  svg {
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    fill: currentcolor;

    &.lucide {
      fill: none;
      stroke: currentcolor;
    }
  }

  &--flip-horizontal > g {
    transform: scale(-1, 1) rotate(value('icon-rotate', 0));
  }

  &--flip-vertical > g {
    transform: scale(1, -1) rotate(value('icon-rotate', 0));
  }

  &--flip-both > g {
    transform: scale(-1, -1) rotate(value('icon-rotate', 0));
  }

  &--spin-in > g {
    animation: #{$namespace}-spin-in 1s 0s infinite linear;
  }

  &--spin-out > g {
    animation: #{$namespace}-spin-out 1s 0s infinite linear;
  }

  &--pulse-in > g {
    animation: #{$namespace}-spin-in 1s infinite steps(8);
  }

  &--pulse-out > g {
    animation: #{$namespace}-spin-out 1s infinite steps(8);
  }
}