wagtail/client/scss/components/_workflow-timeline.scss

@use '../tools' as *;

.workflow-timeline {
  @apply w-label-3;
  padding: 0;
  margin-top: theme('spacing.8');
  margin-bottom: theme('spacing.3');

  @include media-breakpoint-up(sm) {
    margin-top: theme('spacing.10');
    margin-bottom: theme('spacing.10');
  }

  &__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding-bottom: theme('spacing.5');

    &--rejected {
      color: theme('colors.text-error');
    }

    &--approved {
      color: theme('colors.positive.100');
    }

    &--in_progress {
      @apply w-label-1;
    }

    &--pending {
      color: theme('colors.text-meta');

      .icon {
        opacity: theme('opacity.80');
      }
    }
  }

  &__icon {
    position: relative;
    flex-shrink: 0;
    background: theme('colors.surface-page');
    margin-inline-end: theme('spacing.[2.5]');
    width: theme('spacing.5');
    height: theme('spacing.5');
    z-index: theme('zIndex.10');

    @media (forced-colors: active) {
      background: Canvas;
    }
  }

  &__line {
    position: absolute;
    margin-inline-start: -1px;
    height: 100%;
    top: theme('spacing.4');
    inset-inline-start: theme('spacing.[2.5]');
    border-inline-start: theme('borderWidth.DEFAULT') dashed
      theme('colors.text-meta');
  }

  &__footer {
    display: flex;
    flex-wrap: wrap;
    gap: theme('spacing.4');
  }

  &__footer-link {
    @include transition(color 0.15s ease);
    font-size: theme('fontSize.14');
    color: theme('colors.text-link-default');
    text-decoration: none;

    &:hover {
      color: theme('colors.text-link-hover');
    }
  }
}