.list {
  @apply ml-[5%] lg:ml-0 relative inline-flex w-[85%] lg:w-full items-start justify-between before:h-[1px]
    before:bg-gray-200 before:absolute before:top-2.5 before:left-1/2 before:-translate-x-1/2
    before:w-full;
}
.item {
  @apply relative inline-flex flex-col items-center justify-center gap-1 pb-6;
}
.line {
  @apply w-0 h-[1px] bg-primary-500 absolute top-2.5 left-0 transition-all duration-500;
}

.circle {
  @apply relative z-10 h-5 w-5 rounded-full border bg-primary-500 border-primary-500 transition-all duration-500;
}

.icon {
  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white transition-all duration-500 opacity-100;
}

.label {
  @apply absolute bottom-0 left-1/2 -translate-x-1/2 text-sm font-medium text-slate-800 transition-all duration-500 whitespace-nowrap;
}

.itemActive .circle {
  @apply bg-gray-50 ring-4 ring-primary-100;
}
.itemActive .icon {
  @apply opacity-0;
}

.itemActive .label {
  @apply text-slate-800;
}

.itemActive ~ .item .circle {
  @apply border-gray-200 bg-gray-50;
}
.itemActive ~ .item .icon {
  @apply opacity-0;
}

.itemActive ~ .item .label {
  @apply text-gray-400;
}