@use "../../styles/utils";
@use "./variables" as locals;

@include utils.layer {
  %sizeDefaults {
    #{locals.$size_name}: 1.5em;
  }

  .Block {
    @extend %sizeDefaults;

    > svg {
      @include utils.size(locals.$size);
      color: var(--cmm-color-primary-soft-bg);
      animation: spin 1.2s linear infinite;
    }
  }

  .accent {
    color: var(--cmm-color-primary-emphasis);
  }

  .--sm {
    #{locals.$size_name}: 1em;
  }

  .--md {
    @extend %sizeDefaults;
  }

  .--lg {
    #{locals.$size_name}: 2em;
  }

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