/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/loaders_vars";
@import "../mixins";


@keyframes indeterminate-loader-linear-animation {
  0% {
    left: -100%;
    width: 100%;
  }

  60% {
    left: 0;
    width: 100%;
  }

  100% {
    left: 100%;
    width: 10%;
  }
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(270deg);
  }
}

@keyframes dash_small {
  0% {
    stroke-dashoffset: 170;
  }

  50% {
    stroke-dashoffset: 135;
    transform: rotate(135deg);
  }

  100% {
    stroke-dashoffset: 170;
    transform: rotate(450deg);
  }
}

@keyframes dash_default {
  0% {
    stroke-dashoffset: 170;
  }

  50% {
    stroke-dashoffset: 110;
    transform: rotate(135deg);
  }

  100% {
    stroke-dashoffset: 170;
    transform: rotate(450deg);
  }
}

@keyframes dash_large {
  0% {
    stroke-dashoffset: 160;
  }

  50% {
    stroke-dashoffset: 45;
    transform: rotate(135deg);
  }

  100% {
    stroke-dashoffset: 160;
    transform: rotate(450deg);
  }
}

@keyframes dash_x_large {
  0% {
    stroke-dashoffset: 170;
  }

  50% {
    stroke-dashoffset: 0;
    transform: rotate(135deg);
  }

  100% {
    stroke-dashoffset: 170;
    transform: rotate(450deg);
  }
}

.dlt-loader {

  &--linear {
    overflow: hidden;
    width: 100%;
    height: $loaders-linear-height;
    background-color: $loaders-color-loaders-background;

    &-determinate {
      position: relative;
      width: 100%;
      height: 100%;
      background-image:linear-gradient(90deg, $loaders-color-gradient-start, $loaders-color-gradient-end);
      transition: $loaders-determinate-transition-time width;
    }

    &-indeterminate {
      position: relative;
      width: 100%;
      height: 100%;

      &::before {
        content: '';
        position: absolute;
        height: 100%;
        background-image:linear-gradient(90deg, $loaders-color-gradient-start, $loaders-color-gradient-end);
        animation: indeterminate-loader-linear-animation $loaders-linear-indeterminate-transition-time infinite ease-out;
      }
    }
  }

  &--circular {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    margin: 0 auto;

    svg {
      overflow: visible;
      width: $loaders-circular-size;
      height: $loaders-circular-size;
      stroke: $loaders-color-primary;

      .dlt-loader--color-gradient-start {
        stop-color: $loaders-color-gradient-start;
      }
      .dlt-loader--color-gradient-end {
        stop-color: $loaders-color-gradient-end;
      }
      circle {
        fill: transparent;
        transform-origin: center;
        stroke-width: $loaders-circular-stroke-width;
        scale: $loaders-circular-scale;
      }
    }

    &-determinate {
      transition: $loaders-determinate-transition-time stroke-dashoffset;
      transform: rotate(-90deg);
    }

    &-indeterminate {
      width: 100%;
      height: 100%;
      animation: rotator $loaders-circular-indeterminate-transition-time linear infinite;

      .spinner {
        animation: dash_default $loaders-circular-indeterminate-transition-time ease-in-out infinite;
        stroke-dasharray: 180;
        stroke-dashoffset: 0;
      }
    }
  }

  &__text {
    display: flex;
    justify-content: center;

    span {
      font-size: $loaders-font-size-sm;
      color: $loaders-color-text;
      line-height: $loaders-line-height-xxs;
    }
  }

  &__text--below {
    flex-direction: column;
    justify-content: center;

    & .dlt-loader__text,
    +.dlt-loader__text {
      align-items: baseline;
      margin: $loaders-text-below-margin;
    }
  }

  &__text--inside .dlt-loader__text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__text--right .dlt-loader__text {
    align-items: baseline;
    margin: $loaders-text-right-margin;
    min-width: $loaders-text-right-min-width;

    span:nth-of-type(2) {
      margin: $loaders-text-right-span-margin;
    }
  }

  &--sm {
    &.dlt-loader--circular svg {
      width: $loaders-circular-size-sm;
      height: $loaders-circular-size-sm;
    }

    .dlt-loader--circular-indeterminate .spinner {
      animation: dash_small $loaders-circular-indeterminate-transition-time ease-in-out infinite;
    }
  }

  &--lg {
    &.dlt-loader__text--inside {
      .dlt-loader__text span {
        font-size: $loaders-font-size;
        font-weight: $loaders-font-weight;
        line-height: $loaders-line-height-sm;
      }
    }
    &.dlt-loader--circular svg {
      width: $loaders-circular-size-lg;
      height: $loaders-circular-size-lg;

      circle {
        stroke-width: $loaders-circular-stroke-width-lg;
      }
    }

    .dlt-loader--circular-indeterminate .spinner {
      animation: dash_large $loaders-circular-indeterminate-transition-time ease-in-out infinite;
    }
  }

  &--xl {
    &.dlt-loader__text--inside {
      .dlt-loader__text span {
        font-size: $loaders-font-size-xl;
        font-weight: $loaders-font-weight;
        line-height: $loaders-line-height-sm;
      }
    }
    &.dlt-loader--circular svg {
      width: $loaders-circular-size-xl;
      height: $loaders-circular-size-xl;

      circle {
        stroke-width: $loaders-circular-stroke-width-xl;
      }
    }

    .dlt-loader--circular-indeterminate .spinner {
      animation: dash_x_large $loaders-circular-indeterminate-transition-time ease-in-out infinite;
    }
  }

}