pkt-progressbar {
  display: block;
}

.pkt-progressbar {
  --pkt-progress-width: 0%;
  --pkt-progress-label-width: 5rem;

  &__container {
    margin: 0;
  }
  &__title {
    display: block;
    margin: 0;
    margin-block-end: 8px;
    text-align: left;
    font-weight: 500;
    font-size: 0.875rem;

    &-center {
      text-align: center;
    }
  }
  &__bar-wrapper {
    background-color: var(--pkt-color-surface-strong-default);
    height: 8px;
    overflow: hidden;
  }
  &__bar {
    background-color: var(--pkt-color-button-primary-background-normal);
    display: block;
    width: var(--pkt-progress-width);
    height: 100%;
    transition: width 0.5s ease;
    &--dark-blue {
      background-color: var(--pkt-color-button-primary-background-normal);
    }
    &--green {
      background-color: var(--pkt-color-surface-strong-green);
    }
    &--light-blue {
      background-color: var(--pkt-color-surface-strong-blue);
    }
    &--red {
      background-color: var(--pkt-color-surface-strong-red);
    }
  }

  &__status {
    margin-block-start: 8px;
    position: relative;
    white-space: nowrap;
    font-weight: 400;
    font-size: 0.75rem;

    &--center {
      width: 100% !important;
      text-align: center;
    }
  }

  &__status-placement {
    &--following {
      margin-inline-start: max(
        0%,
        min(
          calc(100% - var(--pkt-progress-label-width)),
          calc(var(--pkt-progress-width) - calc(var(--pkt-progress-label-width) / 2))
        )
      );
      transition: margin-left 0.5s ease;
    }
  }
}