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

// adduse

.dx-loadindicator {
  line-height: 100%;
}

.dx-loadindicator-image {
  .dx-loadindicator-content {
    animation: none;
  }
}

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

.dx-loadindicator-segment {
  position: absolute;
  height: 100%;
  width: 100%;
}

.dx-loadindicator-segment-inner {
  position: relative;
  height: 100%;
  border-color: $load-indicator-segment-bg-color;
  border-width: 0.12em;
  border-style: solid;
  border-bottom-color: transparent;
  animation: none;
  border-radius: 50%;
}

.dx-loadindicator-content-circle {
  animation: dx-content-rotation 1568ms linear infinite;

  .dx-loadindicator-icon {
    position: absolute;
    animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

  .dx-loadindicator-segment0,
  .dx-loadindicator-segment1 {
    width: 50%;
    height: 100%;
    overflow: hidden;

    .dx-loadindicator-segment-inner {
      width: 200%;
    }
  }

  .dx-loadindicator-segment0 {
    left: 0;

    .dx-loadindicator-segment-inner {
      border-right-color: transparent;
      transform: rotate(-129deg);
      animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    }
  }

  .dx-loadindicator-segment2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;

    .dx-loadindicator-segment-inner {
      border-color: $load-indicator-inner-segment-border-color;
      width: 100%;
      left: 0;
    }
  }

  .dx-loadindicator-segment1 {
    right: 0;

    .dx-loadindicator-segment-inner {
      left: -100%;
      border-left-color: transparent;
      transform: rotate(129deg);
      animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

      &::after {
        right: 0;
      }
    }
  }
}

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

@keyframes dx-content-rotation {
  to { transform: rotate(360deg); }
}

@keyframes dx-icon-rotation {
  12.5% { transform: rotate(135deg); }
  25% { transform: rotate(270deg); }
  37.5% { transform: rotate(405deg); }
  50% { transform: rotate(540deg); }
  62.5% { transform: rotate(675deg); }
  75% { transform: rotate(810deg); }
  87.5% { transform: rotate(945deg); }
  to { transform: rotate(1080deg); }
}

@keyframes dx-left-segment-rotation {
  from { transform: rotate(130deg); }
  50% { transform: rotate(-5deg); }
  to { transform: rotate(130deg); }
}

@keyframes dx-right-segment-rotation {
  from { transform: rotate(-130deg); }
  50% { transform: rotate(5deg); }
  to { transform: rotate(-130deg); }
}