@use 'src/styles/abstracts' as *;

.ProgressBar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9;
  opacity: 1;
  transform: translateY(0);
  left: $space-xxxxs;
  &.fadeOutProgress {
    animation: fadeOutProgress 0.55s cubic-bezier(0.39, -0.01, 0.27, 1) forwards;
    animation-delay: 0.7s;
    .ProgressBar__container {
      animation: fadeOutProgressInner 0.6s cubic-bezier(0.39, -0.01, 0.27, 1) forwards;
      animation-delay: 0.75s;
    }
  }
  @keyframes fadeOutProgress {
    from {
      opacity: 0.9;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeOutProgressInner {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-15px);
    }
  }
  &__container {
    width: toRem(482px);
    height: toRem(65px);
    &__title {
      color: $pico;
    }
    &__bar {
      box-shadow: 0 0 0 1px #0000000f inset;
      box-sizing: content-box;
      position: relative;
      background: $cuddle-70;
      border-radius: $border-radius-xl;
      height: toRem(8px);
      margin: $space-sm 0 $space-xs;
      & > span {
        display: block;
        height: 100%;
        border-radius: $border-radius-xl;
        background-color: $primary-color;
        position: relative;
        overflow: hidden;
        will-change: width;
        transition: width 0.3s ease-out;
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background-image: linear-gradient(
            315deg,
            rgba(255, 255, 255, 0.09),
            rgb(255 255 255 / 50%) 60%,
            rgb(255 255 255 / 0%) 100%
          );
          overflow: hidden;
          transform: translateX(-100%);
          animation: move 1.5s ease-out infinite;
        }
        @keyframes move {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
      }
    }
    &__info {
      display: flex;
      color: $pico-70;
      font-family: Inter, sans-serif;
      font-feature-settings: 'tnum';
      &__matched {
        margin-left: auto;
      }
    }
  }
}
