@import 'mixins/backdrop';
@import 'variables/gutters';
@import 'variables/z-index';

@keyframes spinning {
  to {
    transform: rotate(360deg);
  }
}

.ui-loader {
  display: flex;
  flex-direction: column;
  gap: $digi--layout--gutter--s;
  align-items: center;
  justify-content: center;

  &--padded {
    padding: $digi--layout--gutter--l;
  }

  &--absolute {
    @include msfa__backdrop($msfa__z-index-backdrop, false);
  }

  &--full-screen {
    @include msfa__backdrop($msfa__z-index-backdrop);
  }

  &--full-blank-screen {
    @include msfa__backdrop($msfa__z-index-backdrop, true, true);
  }

  &__spinner {
    display: inline-flex;
    animation: spinning 1s linear infinite;

    &--s {
      width: 2.5rem;
    }
  }

  &__text {
    font-size: var(--digi--typography--font-size--s);
  }
}