@use 'sass:math';

@mixin overlay-loader(
  $text-color: transparent,
  $container-opacity: 1,
  $cursor: default,
  $container-position: relative,
  $loader-size: $loader-in-component-size
) {
  /// Set the container property
  position: $container-position;
  cursor: $cursor;
  text-shadow: none !important;
  color: $text-color !important;
  opacity: $container-opacity;
  pointer-events: auto;

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: math.div($loader-size, -2) 0 0 math.div($loader-size, -2);
    width: $loader-size;
    height: $loader-size;
    border-radius: 500rem;
    box-sizing: inherit;
    z-index: 100;
  }

  &:before {
    border: $loader-in-component-stroke-size solid $loader-in-component-background-color;
  }

  &:after {
    border-color: $loader-in-component-spinner-color transparent transparent;
    border-style: solid;
    border-width: $loader-in-component-stroke-size;
    @include loaderRotation();
  }
}