.cobalt-progressBanner {
  @apply c-bg-tertiaryContainer c-text-onTertiaryContainer c-rounded-xl c-p-sm c-gap-sm;

  display: inline-flex;
  align-items: center;

  &__progress-container {
    font-weight: 600;
  }

  &__completed-icon-container {
    @apply c-bg-surface c-rounded-full c-w-xl c-h-xl;

    display: flex;

    justify-content: center;
    align-items: center;

    margin: 0 5px; // ProgressCircular stroke width

    flex-shrink: 0;
  }

  &__text-container {
    @apply c-gap-2xs;
    display: flex;
    flex-direction: column;
  }

  &__title {
    @apply c-text-title-xs;
  }

  &__description {
    font-size: 14px;
  }

  &--completed {
    @apply c-bg-successContainer c-text-onSuccessContainer;
  }

  &__completed-icon-container--animated .cobalt-Icon {
    animation: progressBanner__animation--zoom-in 650ms ease;
  }

  &--fullWidth {
    display: flex;
  }
}

a.cobalt-progressBanner {
  @apply c-state-interactive;

  color: inherit;
  text-decoration: none;
}

@keyframes progressBanner__animation--zoom-in {
  0% {
    transform: scale(0, 0);
  }

  50% {
    transform: scale(1.2, 1.2);
  }

  100% {
    transform: scale(1, 1);
  }
}