@use '../../../../styles/variables' as *;

:host {
  display: block;
  width: 100%;
}

.progress-bar {
  --track-color: #{$color-light-stronger};
  --bar-color: #{$color-primary-regular};

  height: rhythm(0.5);
  background-color: var(--track-color);

  &.grey-track {
    --track-color: #{$color-neutral-lighter};
  }
  &.grey-bar {
    --bar-color: #{$color-neutral-light};
  }

  .progress {
    height: 100%;
    transition: width $duration-superfast linear;

    &:not(.indeterminate) {
      background-color: var(--bar-color);
    }

    &.indeterminate {
      overflow: hidden;
      position: relative;
      width: 100%;

      &::before {
        content: '';
        position: absolute;
        background-color: var(--bar-color);
        top: 0;
        left: 0;
        bottom: 0;
        will-change: left, right;
        animation: indeterminate-progress 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      }
      &::after {
        content: '';
        position: absolute;
        background-color: var(--bar-color);
        top: 0;
        left: 0;
        bottom: 0;
        will-change: left, right;
        animation: indeterminate-progress-back 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation-delay: 1.15s;
        z-index: 1;
      }
    }
  }
}

@keyframes indeterminate-progress {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate-progress-back {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
