@use '../../variables' as var;

@use '../layout';

/**
 * Style an svg icon as a loading spinner
 *
 * @param {'small'|'medium'|'large'} [$size='medium'] - Relative size of
 *   spinner image
 */
@mixin spinner($size: 'medium') {
  $-size: 2em;
  @if ($size == 'large') {
    $-size: 4em;
  } @else if ($size == 'small') {
    $-size: 1em;
  }
  color: var.$color-grey-6;
  // Assure that the spinner SVG is sized proportinally to local font-size
  font-size: $-size;
}

/**
 * Style a container with an svg.&__spinner as a full-screen loading spinner,
 * by applying an overlay to the container and fixed-centered positioning to
 * the contained svg icon
 */
@mixin full-screen-spinner() {
  @include layout.overlay($variant: 'light');

  &__spinner {
    @include layout.fixed-centered;
  }
}