@use '../base/common/base-variables' as *;

$theme: 'Material3';
$spin-padding: 10px !default;
$spin-label-margin-top: 10px !default;
$spin-label-font-size: $text-sm !default;
$spin-label-font-family: $font-family !default;
$spin-boot4-stroke-width: 4 !default;
$spin-fabric-stroke-width: 1.5 !default;
$spin-boot5-stroke-width: 4 !default;
$spin-label-color: rgba($primary) !default;
$spin-overlay-background: $overlay-bg-color !default;
$spin-overlay-stroke-color: rgba($white) !default;
$spin-overlay-font-color: rgba($white) !default;
$spin-material-stroke-color: rgba($primary) !default;
$spin-boot4-stroke-color: rgba($primary) !default;
$spin-fabric-stroke-color: rgba($primary-light) !default;
$spin-boot5-stroke-color: rgba($primary) !default;
$spin-fabric-arc-color: rgba($primary) !default;
$spin-bootstrap-stroke-color: rgba($primary) !default;
$spin-tailwind-stroke-width: 4.5 !default;
$spin-tailwind-arc-color: rgba($primary) !default;
$spin-tailwind-stroke-color: rgba($primary-light) !default;
$spin-tail-margin: 0 auto !default;
$spin-bootstrap-border-radius: $radius-full !default;
$spinner-zero-space: 0 !default;
$spinner-full-width: 100% !default;
$spinner-half-width: 50% !default;
$spinner-full-height: 100% !default;

@mixin boot5-spinner-rotate {
  animation: material-spinner-rotate .75s linear infinite;
}

@mixin tw-spinner-rotate {
  animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.21, .21, .21, .21);
}

@mixin mat-spinner-rotate {
  animation: material-spinner-rotate 1568.63ms linear infinite;
}

@mixin fb-spinner-rotate {
  animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}

@mixin boot4-spinner-rotate {
  animation: material-spinner-rotate .75s linear infinite;
}

/* stylelint-disable property-no-vendor-prefix */
@keyframes material-spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fabric-spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
