@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/loadIndicator" as *;

// adduse

.dx-loadindicator {
  background-color: transparent;
}

.dx-loadindicator-content-circle {
  .dx-loadindicator-icon {
    top: 15%;
    inset-inline-start: 15%;
    width: 70%;
    height: 70%;
  }

  .dx-loadindicator-segment {
    position: absolute;
    width: 19%;
    height: 30%;
    left: 44.5%;
    top: 37%;
    opacity: 0;
    background: $loadindicator-bg;
    border-radius: 50%;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    box-shadow: 0 0 3px $loadindicator-segment-shadow-color;
    animation: dx-generic-loadindicator-opacity 1s linear infinite;
  }

  .dx-loadindicator-segment0 {
    transform: rotate(0deg) translate(0, -142%);
    animation-delay: 0s;
  }

  .dx-loadindicator-segment1 {
    transform: rotate(45deg) translate(0, -142%);
    animation-delay: -0.875s;
  }

  .dx-loadindicator-segment2 {
    transform: rotate(90deg) translate(0, -142%);
    animation-delay: -0.75s;
  }

  .dx-loadindicator-segment3 {
    transform: rotate(135deg) translate(0, -142%);
    animation-delay: -0.625s;
  }

  .dx-loadindicator-segment4 {
    transform: rotate(180deg) translate(0, -142%);
    animation-delay: -0.5s;
  }

  .dx-loadindicator-segment5 {
    transform: rotate(225deg) translate(0, -142%);
    animation-delay: -0.375s;
  }

  .dx-loadindicator-segment6 {
    transform: rotate(270deg) translate(0, -142%);
    animation-delay: -0.25s;
  }

  .dx-loadindicator-segment7 {
    transform: rotate(315deg) translate(0, -142%);
    animation-delay: -0.125s;
  }

  .dx-loadindicator-segment8,
  .dx-loadindicator-segment9,
  .dx-loadindicator-segment10,
  .dx-loadindicator-segment11,
  .dx-loadindicator-segment12,
  .dx-loadindicator-segment13,
  .dx-loadindicator-segment14,
  .dx-loadindicator-segment15 {
    display: none;
  }
}

.dx-loadindicator-icon {
  position: relative;
  width: 100%;
  height: 100%;
}

@include loadindicator-animation-sparkle(
  $load-indicator-animation-sparkle-bg-color1,
  $load-indicator-animation-sparkle-bg-color2,
  $load-indicator-animation-sparkle-bg-color3
);

@keyframes dx-generic-loadindicator-opacity {
  from { opacity: 1; }
  to { opacity: 0.55; }
}