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

// adduse

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

.dx-loadindicator-content {
  height: 100%;
  width: 100%;
  animation: dx-content-rotation 1568ms linear infinite;
}

.dx-loadindicator-image {
  background-image: $loadindicator-background-image;

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

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

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

.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-segment2,
.dx-loadindicator-segment0 {
  width: 50%;
  height: 100%;
  overflow: hidden;

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

.dx-loadindicator-segment2 {
  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-segment0 {
  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;
  }
}

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

  .dx-loadindicator-segment-inner {
    width: 1000%;
    left: -450%;
  }
}

@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); }
}