/*
 * ProgressIndicator component
 *
 */

@import '../../../style/core/utilities.scss';

.dnb-progress-indicator {
  --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
  // 314.159...% is the full circumference of a circle (2πr). The radius is 50%, so the circumference is π * 100%
  --progress-indicator-circular-circle: 314.159265359%;
  --progress-indicator-circular-circle-offset--min: 314.159265359%;
  --progress-indicator-circular-circle-offset--max: 1%;
  --progress-indicator-circular-size: 2rem;
  --progress-indicator-circular-stroke-width: calc(
    var(--progress-indicator-circular-size) / 8
  );
  --progress-indicator-circular-background-color: grey;
  --progress-indicator-circular-bar-color: var(--color-black);
  --progress-indicator-linear-size: 0.5rem;
  --progress-indicator-linear-background-color: grey;
  --progress-indicator-linear-bar-color: var(--color-black);

  position: relative;
  display: inline-flex;
  align-items: center;

  &--vertical {
    flex-direction: column;
  }

  &--horizontal {
    justify-content: center;
  }

  // circular variant
  &__label {
    display: inline-flex;

    .dnb-p {
      align-self: center;
    }
  }

  @at-root .dnb-spacing & {
    .dnb-p,
    .dnb-p:not([class*='dnb-space']) {
      margin: 0;
    }
  }

  &--horizontal &__label {
    padding-left: 1rem;
  }
  &--horizontal#{&}--small &__label {
    padding-left: 0.5rem;
  }

  &--vertical &__label {
    padding-top: 0.5rem;
  }

  &--inside &__label {
    position: absolute;
    width: 100%;
    justify-content: center;
    padding: var(--progress-indicator-circular-stroke-width);
  }

  &--small {
    --progress-indicator-circular-size: 1rem;
    --progress-indicator-linear-size: 0.25rem;
  }

  &--medium {
    --progress-indicator-circular-size: 1.5rem;
    --progress-indicator-linear-size: 1rem;
  }

  &--large {
    --progress-indicator-circular-size: 3.5rem;
    --progress-indicator-linear-size: 1.5rem;
  }

  &--huge {
    --progress-indicator-circular-size: 20rem;
    --progress-indicator-linear-size: 2rem;
  }

  // circular variant
  &__circular {
    position: relative;

    // default/basis size
    width: var(--progress-indicator-circular-size);
    height: var(--progress-indicator-circular-size);

    // since SVG is starting 90deg from top
    transform: rotate(-90deg);

    svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: calc(var(--progress-indicator-circular-stroke-width) / 2);

      &:not(:root) {
        overflow: visible;
      }
    }

    &__background-padding {
      display: block;
      height: 100%;
      padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
    }

    &__background {
      display: block;
      height: 100%;
      background-color: transparent;
      border-radius: 50%;
    }

    &__line {
      animation-duration: 2s;
      animation-delay: 200ms;
      animation-timing-function: var(--progress-indicator-timing);
      animation-iteration-count: infinite;
    }

    &__line.background {
      stroke-dashoffset: var(
        --progress-indicator-circular-circle-offset--max
      );
    }

    &__line.light {
      animation-name: progress-indicator-circular-line-light;
      stroke-dasharray: var(--progress-indicator-circular-circle),
        var(--progress-indicator-circular-circle);
      stroke-dashoffset: var(
        --progress-indicator-circular-circle-offset--max
      );
    }

    &__line.dark {
      animation-name: progress-indicator-circular-line-dark;
      stroke-dasharray: var(--progress-indicator-circular-circle),
        var(--progress-indicator-circular-circle);
      stroke-dashoffset: var(
        --progress-indicator-circular-circle-offset--min
      );
    }

    &__line.paused {
      animation-play-state: paused;
    }

    // for static progress-indicator animation
    &--has-progress-value &__line.dark {
      transition: stroke-dashoffset 600ms var(--progress-indicator-timing);
    }

    &__circle {
      stroke-linecap: round;
      stroke-width: var(--progress-indicator-circular-stroke-width);
    }

    &__line.light &__circle {
      stroke: var(--progress-indicator-circular-background-color);
    }

    &__line.dark &__circle {
      stroke: var(--progress-indicator-circular-bar-color);
      // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
      stroke-width: calc(
        var(--progress-indicator-circular-stroke-width) - 0.5px
      );
    }
  }

  // linear variant
  &__linear {
    background-color: var(--progress-indicator-linear-background-color);
    position: relative;
    overflow: hidden;
    width: 100%;
    will-change: transform;

    // default/basis size
    height: var(--progress-indicator-linear-size);
    border-radius: calc(var(--progress-indicator-linear-size) / 2);

    &__bar {
      background-color: var(--progress-indicator-linear-bar-color);
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      transform-origin: left;
      border-radius: inherit;
    }

    &__bar-transition {
      transition: transform 0.2s linear;
    }

    &__bar1-animation {
      width: auto;
      animation: progress-indicator-linear-bar-1 2.1s
        cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }

    &__bar2-animation {
      width: auto;
      animation: progress-indicator-linear-bar-2 2.1s
        cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
    }

    html[data-visual-test] &__bar1-animation {
      left: -35%;
      right: 100%;
      animation-duration: 0ms;
      animation-iteration-count: 0;
    }

    html[data-visual-test] &__bar2-animation {
      left: -200%;
      right: 100%;
      animation-duration: 0ms;
      animation-iteration-count: 0;
    }
  }

  &,
  &--visible {
    opacity: 0;
    animation: progress-indicator-fade-in 200ms ease-out 1 forwards;
  }
  &--complete:not(#{&}--visible) {
    animation: progress-indicator-fade-out 600ms ease-out 1 forwards;
  }

  html[data-visual-test] & {
    opacity: 1;
    animation-duration: 0ms;
  }

  &--no-animation,
  &--no-animation#{&}--complete {
    animation-duration: 0ms;
  }

  html[data-visual-test] &__bar-transition {
    transition: none;
  }

  &--full-width {
    width: 100%;
    min-width: 1rem;
  }

  @keyframes progress-indicator-fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes progress-indicator-fade-out {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
}

@keyframes progress-indicator-circular-line-light {
  0% {
    stroke-dashoffset: var(
      --progress-indicator-circular-circle-offset--min
    );
  }

  50% {
    stroke-dashoffset: var(
      --progress-indicator-circular-circle-offset--min
    );
  }

  100% {
    stroke-dashoffset: var(
      --progress-indicator-circular-circle-offset--max
    );
  }
}

@keyframes progress-indicator-circular-line-dark {
  0% {
    stroke-dashoffset: var(
      --progress-indicator-circular-circle-offset--min
    );
  }

  50% {
    stroke-dashoffset: var(
      --progress-indicator-circular-circle-offset--max
    );
  }

  100% {
    stroke-dashoffset: var(
      --progress-indicator-circular-circle-offset--max
    );
  }
}

@keyframes progress-indicator-linear-bar-1 {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes progress-indicator-linear-bar-2 {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}