/* Application progress — Tailwind "panels" style: a bordered bar that splits
 * into equal panels on md+, each with a numbered (or checked) circle and a
 * label, divided by chevron separators. On mobile it stacks vertically as
 * divided rows. Steps aren't navigable (the apply wizard is forward-only), so
 * there are no links or hover states. */

.step-indicator {
  @apply mb-6 block;

  & ol {
    @apply divide-y divide-slate-300 rounded-md border border-slate-300 md:flex md:divide-y-0;
  }

  & .step {
    @apply relative md:flex md:flex-1;

    & .content {
      @apply flex items-center px-6 py-4 text-sm font-medium;
    }

    & .marker {
      @apply flex size-10 shrink-0 items-center justify-center rounded-full;

      & .check {
        @apply size-6 text-white;
      }
    }

    & .label {
      @apply ml-4 text-sm font-medium;
    }

    /* Chevron divider pinned to the panel's right edge (md+ only). */
    & .separator {
      @apply absolute top-0 right-0 hidden h-full w-5 md:block;

      & svg {
        @apply size-full text-slate-300;
      }
    }

    &.done {
      & .marker {
        @apply bg-heroku-30;
      }

      & .label {
        @apply text-slate-900;
      }
    }

    &.current {
      & .marker {
        @apply border-2 border-heroku-30 text-heroku-30;
      }

      & .label {
        @apply text-heroku-30;
      }
    }

    &.pending {
      /* slate-500 (not slate-400) keeps the upcoming-step text above the WCAG
       * 1.4.3 4.5:1 contrast floor on white — these labels convey real
       * progress information, so they aren't exempt as "inactive" controls. */
      & .marker {
        @apply border-2 border-slate-300 text-slate-500;
      }

      & .label {
        @apply text-slate-500;
      }
    }
  }
}