@import '../../styles/common.scss';

.progressbar {
  display: grid;
  overflow: hidden;
  background-color: var(--progress-bar-background, $progress-bar-background);

  &.simple {
    height: 10px;
  }

  &.full {
    height: 50px;
  }

  .text {
    width: 100%;
    height: 100%;
    display: grid;
    grid-area: 1/1;
    align-content: center;
    text-align: center;

    font-size: var(--progress-bar-text-color, $progress-bar-text-color);
    color: var(--progress-bar-text-color, $progress-bar-text-color);
    font-weight: bold;
  }

  .progress {
    grid-area: 1/1;
    background-color: var(
      --progress-bar-processing-indicator,
      $progress-bar-processing-indicator
    );
    height: 100%;

    transition: width 0.15s ease-in-out 0s;

    &.completed {
      background-color: var(
        --progress-bar-completed-indicator,
        $progress-bar-completed-indicator
      );
    }

    &.warning {
      background-color: var(
        --progress-bar-warning-indicator,
        $progress-bar-warning-indicator
      );
    }

    &.error {
      background-color: var(
        --progress-bar-error-indicator,
        $progress-bar-error-indicator
      );
    }

    &.infinite {
      animation: indeterminate 2s infinite ease-in-out;
    }
  }
}

@keyframes indeterminate {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(200%);
  }
}
