@tailwind components;

@layer components {
  .stepper-nav {
    @apply pt-80 pb-40 my-30;
    @apply grid auto-cols-fr grid-rows-1 grid-flow-col relative;

    counter-reset: step-number;

    & .step-tab {
      @apply flex-1 flex items-start flex-col z-0 md:relative;
      @apply font-bold text-left;

      & .step-tab-label {
        @apply hidden md:block absolute left-20 top-120 md:static;
      }

      &:before {
        counter-increment: step-number;
        @apply content-[counter(step-number)] w-30 h-30 bg-blue-900 text-white border border-blue-900 rounded-full flex-shrink-0 mb-10 flex items-center justify-center;
      }

      &:after {
        @apply content-[''] block border-t border-blue-900 w-full h-[1px] relative top-[-26px] md:absolute md:top-[14px] z-[-1];
      }

      &:last-child:after {
        @apply hidden;
      }

      &[data-active='true'] {
        & .step-tab-label {
          @apply block text-purple-600;
        }

        &:before {
          @apply bg-purple-600 border-purple-600 text-white;
        }

        &:after {
          @apply border-gray-300;
        }

        & ~ .step-tab {
          &:before {
            @apply bg-white text-blue-900;
          }

          &:after {
            @apply border-gray-300;
          }
        }
      }
    }
  }
}