@use '../../animations';
@use '../../helpers';
@use '../../mixins';

@mixin Spinner() {
  @include animations.Spin();

  @if not mixins.includes('Spinner') {
    @include _Spinner();
  }
}

@mixin _Spinner() {
  .ods-spinner {
    align-items: center;
    color: helpers.color('content-secondary');
    display: grid;
    justify-items: center;

    &::before {
      animation: ods-spin 0.6s linear infinite;
      border: 0 solid helpers.color('background-spinner');
      border-left-color: helpers.color('content-spinner');
      border-radius: helpers.border-radius('full');
      box-sizing: border-box;
      content: '';
      display: block;
    }

    &.-large::before {
      @include mixins.square(helpers.space(6));
    }

    &.-large,
    &.-medium {
      @include helpers.font('300-regular');

      gap: helpers.space(2);
    }

    &.-large::before,
    &.-medium::before {
      border-width: helpers.space(0.375);
    }

    &.-medium::before {
      @include mixins.square(helpers.space(3));
    }

    &.-small {
      @include helpers.font('200-regular');

      gap: helpers.space(1);
      grid-auto-flow: column;
    }

    &.-small::before {
      @include mixins.square(helpers.space(2));

      border-width: helpers.space(0.25);
    }
  }
}