.ga-progress-indicator {
  @apply flex;

  /* ===== ITEM ===== */
  .ga-progress-indicator__item {
    @apply relative flex cursor-pointer gap-2 border-0 border-t-2 border-(--ga-color-surface-disabled) bg-transparent p-0 pt-1.5 pr-0.5 text-left;

    &:focus-visible {
      @apply outline-none;

      .ga-progress-indicator__indicator {
        @apply relative rounded-full outline-2 outline-offset-2 outline-(--ga-color-border-focus);
      }
    }

    &:not(.ga-progress-indicator__item--disabled):hover {
      .ga-progress-indicator__label-text {
        @apply text-(--ga-color-text-action-hover);
      }
    }
  }

  /* ===== INDICATOR (Icon Container) ===== */
  .ga-progress-indicator__indicator {
    @apply relative flex shrink-0 items-start justify-center pl-2;

    .ga-icon {
      @apply m-px;
    }
  }

  /* ===== CONTENT (Label + Description) ===== */
  .ga-progress-indicator__content {
    @apply flex min-w-0 flex-col;
  }

  /* ===== LABEL ===== */
  .ga-progress-indicator__label {
    @apply inline-flex h-6 min-w-0 items-center gap-1;
  }

  .ga-progress-indicator__label-text {
    @apply text-md animate-hover min-w-0 truncate font-medium text-(--ga-color-text-action) transition-colors;
  }

  .ga-progress-indicator__label-state {
    @apply text-md font-normal text-(--ga-color-text-body);
  }

  /* Label with definition (dotted underline) */
  .ga-progress-indicator__label--defined {
    .ga-progress-indicator__label-text {
      @apply border-b-2 border-dotted border-(--ga-color-text-action);
    }

    &:not(.ga-progress-indicator__label--disabled):hover
      .ga-progress-indicator__label-text {
      @apply text-(--ga-color-text-body);
    }

    &:focus-visible {
      @apply rounded outline-2 outline-offset-2 outline-(--ga-color-border-focus);
    }
  }

  /* ===== DESCRIPTION ===== */
  .ga-progress-indicator__description {
    @apply text-xs text-(--ga-color-text-body);
  }

  /* ===== CURRENT INDICATOR DOT ===== */
  .ga-progress-indicator__current-dot {
    @apply absolute top-2 right-2 h-2 w-2 rounded-full bg-(--ga-color-icon-action);
  }

  /* ========================================
     ITEM STATE MODIFIERS
     ======================================== */

  /* ----- COMPLETED STATE ----- */
  .ga-progress-indicator__item--completed {
    @apply border-(--ga-color-border-success);

    .ga-progress-indicator__indicator .ga-icon {
      @apply text-(--ga-color-icon-success);
    }
  }

  /* ----- CURRENT STATE ----- */
  .ga-progress-indicator__item--current {
    @apply border-t-4 border-(--ga-color-border-action) pt-1;

    .ga-progress-indicator__indicator .ga-icon {
      @apply text-(--ga-color-icon-action);
    }
  }

  /* ----- INCOMPLETE STATE ----- */
  .ga-progress-indicator__item--incomplete {
    .ga-progress-indicator__label-text {
      @apply text-(--ga-color-text-body);
    }
  }

  /* ----- ERROR STATE ----- */
  .ga-progress-indicator__item--error {
    @apply border-t-4 border-(--ga-color-border-error) pt-1;

    .ga-progress-indicator__indicator .ga-icon {
      @apply text-(--ga-color-icon-error);
    }

    .ga-progress-indicator__label-text {
      @apply text-(--ga-color-text-error);
    }

    .ga-progress-indicator__description {
      @apply text-(--ga-color-text-error);
    }
  }

  /* ----- DISABLED STATE ----- */
  .ga-progress-indicator__item--disabled {
    @apply cursor-not-allowed;

    .ga-progress-indicator__indicator .ga-icon {
      @apply text-(--ga-color-icon-disabled);
    }

    .ga-progress-indicator__label-text,
    .ga-progress-indicator__label-state,
    .ga-progress-indicator__description {
      @apply text-(--ga-color-text-disabled);
    }
  }

  /* ========================================
     ORIENTATION MODIFIERS
     ======================================== */

  /* ----- VERTICAL LAYOUT ----- */
  &.ga-progress-indicator--vertical {
    @apply flex-col;

    .ga-progress-indicator__item {
      @apply border-t-0 border-l-2 pt-0 pb-6;

      .ga-progress-indicator__indicator {
        @apply pl-1.5;
      }
    }

    .ga-progress-indicator__item--current,
    .ga-progress-indicator__item--error {
      @apply border-t-0 border-l-4 pt-0;

      .ga-progress-indicator__indicator {
        @apply pl-1;
      }
    }
  }

  /* ----- HORIZONTAL LAYOUT ----- */
  &.ga-progress-indicator--horizontal {
    @apply flex-row;

    .ga-progress-indicator__item {
      @apply flex-1;
    }
  }
}