@import 'core/main_dependencies';

$color-1: $brand-primary;
$color-2: darken($brand-primary, 5%);
$color-3: darken($color-2, 5%);
$color-4: darken($color-3, 5%);

$size-sm: 40%;
$size-md: 60%;
$size-lg: 80%;
$size-xl: 100%;

$size-sm-max-px: 50px;
$size-md-max-px: 100px;
$size-lg-max-px: 200px;
$size-xl-max-px: 400px;

$padding: 1%;

.loader-service-new {
  $block: 'loader-service-new';

  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  justify-content: center;

  height: 100%;
  width: 100%;

  background: $body-bg;
  z-index: 1000;

  &__circular {
    stroke: $color-1;
    align-self: center;
    animation: rotate 2s linear infinite;
    transform-origin: center center;
    height: 100%;
    width: 100%;
  }

  &__path {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
  }

  @mixin set-size($size, $max-size) {
    height       : $size;
    max-height   : $max-size;

    width        : $size;
    max-width    : $max-size;

    padding      : $padding;
  }

  &--sm {
    .#{$block}__circular {
      @include set-size($size-sm, $size-sm-max-px)
    }
  }

  &--md {
    .#{$block}__circular {
      @include set-size($size-md, $size-md-max-px);
    }
  }

  &--lg {
    .#{$block}__circular {
      @include set-size($size-lg, $size-lg-max-px);
    }
  }

  &--xl {
    .#{$block}__circular {
      @include set-size($size-xl, $size-xl-max-px);
    }
  }

  &--no-limit {
    .#{$block}__circular {
       max-height: initial; max-width: initial;
    }
  }

  &--no-padding {
    .#{$block}__circular {
      padding: 0;
    }
  }

  &--no-background {
    background-color: transparent;
  }

}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: $color-1;
  }
  40% {
    stroke: $color-2;
  }
  66% {
    stroke: $color-3;
  }
  80%,
  90% {
    stroke: $color-4;
  }
}