// @see https://github.com/bem/bem-components/blob/v6.0.0/design/common.blocks/spin/_theme/spin_theme_islands.post.css
.spin {
  position: absolute;

  display: inline-block;
  visibility: hidden;

  box-sizing: border-box;

  $borderWidth: 2px;
  border: $borderWidth solid transparent;
  border-radius: 50%;

  &:after {
      content: '\00A0';
  }

  &.spin_visible {
      position: relative;

      visibility: visible;

      animation: spin_theme_islands 1s infinite linear;

      /* `1deg` is needed to prevent FF bug after minification (`0deg` => `0`) */
      background: linear-gradient(1deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

      backface-visibility: hidden; /* Accelerate animation */
  }

  $bgShift: -$borderWidth;
  $sizeName: xs s m l xl;
  $sizeVal: 16px 24px 28px 32px 38px;
  @each $size in $sizeName {
      $i: index($sizeName, $size);
      $val: #{nth($sizeVal, $i)};
      &.spin_size_#{$size}) {
          line-height: $val;

          width: $val;
          height: $val;
      }
  }
}

@keyframes spin_theme_islands {
  from {
      border-top-color: $color-monza;
      border-left-color: $color-monza;
      transform: rotate(0);
  }
  to {
      border-top-color: $color-monza;
      border-left-color: $color-monza;
      transform: rotate(360deg);
  }
}