/* ==========================================================================
 * Progress Bar
 * ========================================================================== */

.mds-c-progress {
  --mds-c-progress--height: var(--mds-d-spacing--xs);

  background-color: var(--mds-t-background-color--tertiary);
  border-radius: 9999rem;
  color: transparent;
  display: flex;
  font-size: 0;
  height: var(--mds-c-progress--height);
  position: relative;
  width: 100%;
  z-index: 1;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xs);
  }

  &--size-xxs {
    --mds-c-progress--height: 1px;
  }

  &__status {
    background-color: var(--mds-t-color--primary);
    border-radius: 9999rem;
    height: var(--mds-c-progress--height);
    left: 0;
    position: absolute;
    transition: width 0.6s ease-out;

    &--indeterminate {
      animation: mds-c-progress-loading 1250ms infinite
        cubic-bezier(0.77, 0, 0.175, 1);
      left: initial;
      right: 100%;
      width: 50%;
    }

    &--theme-info {
      background-color: var(--mds-t-color--blue);
    }

    &--theme-success {
      background-color: var(--mds-t-color--green);
    }

    &--theme-warning {
      background-color: var(--mds-t-color--orange);
    }

    &--theme-danger {
      background-color: var(--mds-t-color--red);
    }
  }
}

@keyframes mds-c-progress-loading {
  from {
    right: 100%;
  }

  to {
    right: -50%;
  }
}