:host(us-loader) {
  display: block;
  width: 100%;
}

:host {
  & .loader-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  & .loader {
    position: relative;
    user-select: none;

    .loader-container {
      transform: rotate(90deg);
    }
    .loader-container circle {
      transition: stroke-dashoffset 1s linear;
    }
    .loader-container .bar-bg {
      stroke-dashoffset: 0;
      stroke: var(--loader-track-color);
    }
    .loader-container .bar {
      stroke-linecap: round;
      stroke: var(--loader-progress-color);
    }

    &_infinity-scroll {
      display: flex;
      justify-content: center;
      align-items: center;
      background: inherit;
      width: auto;
    }

    &__linear-loader-container {
      display: flex;
      flex-direction: column;
      width: auto;
      max-width: 250px;

      &_big-progress-bar {
        font: var(--text-p-m-heavy);

        .loader__progress-bar-wrapper {
          height: var(--size-xs);
        }
      }

      &_small-progress-bar {
        font: var(--text-p-m-light);

        .loader__progress-bar-wrapper {
          height: var(--size-2xs);
        }
      }
    }

    &__progress-bar-wrapper {
      position: relative;
      display: flex;
      border-radius: 30px;
      background-color: var(--loader-track-color);
      overflow-x: hidden;

      .progress-bar-fill {
        position: absolute;
        height: inherit;
        border-radius: 30px;
        background-color: var(--loader-progress-color);
      }

      .progress-bar-fill-animation {
        animation: ticker-progress-bar 3s linear infinite;
      }
    }

    &__linear-label {
      margin-top: var(--space-inline-m);
      text-align: center;
      font: inherit;
      overflow-wrap: break-word;
    }

    &__label {
      margin-left: var(--space-inline-s);
      font: var(--text-p-s-light);
    }
    
    &__linear-label,
    &__label {
      color: var(--color-neutral-900);
    }
  }

  & .label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    color: var(--color-primary-800);
    font: var(--text-p-m-heavy);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &__text {
      margin-top: var(--space-inline-m);
      color: var(--color-neutral-900);
      white-space: nowrap;
      font: var(--text-p-m-heavy);
    }

    &_percent {
      top: 50%;
      left: 50%;
      bottom: auto;
      transform: translate(-50%, -50%);
    }
  }
}

.rotation-animation {
  animation: rotation 1s linear infinite;
}

@keyframes filling {
  from {
    stroke-dashoffset: var(--stroke-min);
  }
  to {
    stroke-dashoffset: var(--stroke-max);
  }
}

@keyframes ticker-progress-bar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}