.steps {
  counter-reset:step;
  grid-auto-columns:1fr;
  display:inline-grid;
  overflow:hidden;
  overflow-x:auto;
  grid-auto-flow:column
}

.steps .step {
  display:grid;
  place-items:center;
  text-align:center;
  grid-template-columns:repeat(1,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-template-rows:40px 1fr;
  min-width:4rem
}
.steps .step:before {
  --tw-bg-opacity:1;
  background-color:hsla(var(--b3)/var(--tw-bg-opacity,1));
  height:.5rem;
  top:0;
  --tw-text-opacity:1;
  color:hsla(var(--bc)/var(--tw-text-opacity,1));
  width:100%;
  grid-column-start:1;
  grid-row-start:1;
  content:"";
  margin-left:-100%
}

.steps .step:after {
  content:counter(step);
  counter-increment:step;
  z-index:1;
  --tw-bg-opacity:1;
  background-color:hsla(var(--b3)/var(--tw-bg-opacity,1));
  border-radius:9999px;
  display:block;
  display:grid;
  place-items:center;
  place-self:center;
  height:2rem;
  position:relative;
  --tw-text-opacity:1;
  color:hsla(var(--bc)/var(--tw-text-opacity,1));
  width:2rem;
  grid-column-start:1;
  grid-row-start:1
}

.steps .step:first-child:before {
  content:none
}

.steps .step[data-content]:after {
  content:attr(data-content)
}

.steps .step-neutral+.step-neutral:before,.steps .step-neutral:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--n)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--nc)/var(--tw-text-opacity,1))
}

.steps .step-primary+.step-primary:before,.steps .step-primary:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--p)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--pc)/var(--tw-text-opacity,1))
}

.steps .step-secondary+.step-secondary:before,.steps .step-secondary:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--s)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--sc)/var(--tw-text-opacity,1))
}

.steps .step-accent+.step-accent:before,.steps .step-accent:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--a)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--ac)/var(--tw-text-opacity,1))
}

.steps .step-info+.step-info:before {
  --tw-bg-opacity:1;
  background-color:hsla(var(--in)/var(--tw-bg-opacity,1))
}

.steps .step-info:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--in)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--b1)/var(--tw-text-opacity,1))
}

.steps .step-success+.step-success:before {
  --tw-bg-opacity:1;
  background-color:hsla(var(--su)/var(--tw-bg-opacity,1))
}

.steps .step-success:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--su)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--b1)/var(--tw-text-opacity,1))
}

.steps .step-warning+.step-warning:before {
  --tw-bg-opacity:1;
  background-color:hsla(var(--wa)/var(--tw-bg-opacity,1))
}

.steps .step-warning:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--wa)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--b1)/var(--tw-text-opacity,1))
}

.steps .step-error+.step-error:before {
  --tw-bg-opacity:1;
  background-color:hsla(var(--er)/var(--tw-bg-opacity,1))
}

.steps .step-error:after {
  --tw-bg-opacity:1;
  background-color:hsla(var(--er)/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:hsla(var(--b1)/var(--tw-text-opacity,1))
}