@use 'sass:math';

.ls-icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;

  &--size-lg {
    font-size: math.div(4em, 3);
    line-height: math.div(3em, 4);
    vertical-align: -0.0667em;
  }

  &--size-xs {
    font-size: 0.75em;
  }

  &--size-sm {
    font-size: 0.875em;
  }

  @for $i from 1 through 10 {
    &--size-#{$i}x {
      font-size: $i * 1em;
    }
  }

  &--rotate-90 {
    transform: rotate(90deg);
  }

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

  &--rotate-270 {
    transform: rotate(270deg);
  }

  &--flip-horizontal {
    transform: scale(-1, 1);
  }

  &--flip-vertical {
    transform: scale(1, -1);
  }

  &--flip-both {
    transform: scale(-1, -1);
  }

  &--spin {
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes spin {

    from {
      transform:rotate(0deg);
    }

    to {
      transform:rotate(360deg);
    }
  }

  &--pulse {
    animation: spin 1s steps(8) infinite;
  }
}