/* -------------------------------- 

File#: _1_how-it-works-v3
Title: How It Works v3
Descr: A list of steps showing how a product works
Usage: codyhouse.co/license

-------------------------------- */
.hiw-v3 {
  --hiw-v3-bullet-size: 40px;
  --hiw-v3-bullet-font-size: 16px;
  --hiw-v3-bullet-margin-right: var(--space-sm);
  --hiw-v3-gap-y: var(--space-lg);
  counter-reset: list-items;
}

.text-component .hiw-v3 {
  padding-left: 0;
  list-style: none;
}

.hiw-v3__item {
  position: relative;
  counter-increment: list-items;
}
.hiw-v3__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--hiw-v3-bullet-size);
  left: calc(var(--hiw-v3-bullet-size) / 2 - 2px);
  width: 4px;
  height: calc(100% - var(--hiw-v3-bullet-size) / 2);
  background: linear-gradient(to bottom, hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 0) 0%, hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 1) calc(100% - var(--hiw-v3-bullet-size) / 2));
}
.hiw-v3__item:not(:last-child) {
  padding-bottom: var(--hiw-v3-gap-y);
}
.hiw-v3__item:nth-last-child(2)::before {
  background: linear-gradient(to bottom, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0) 0%, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 1) calc(100% - var(--hiw-v3-bullet-size) / 2));
}

.hiw-v3__title-wrapper {
  position: relative;
  margin-bottom: var(--space-xs);
}

.hiw-v3__title {
  padding-left: calc(var(--hiw-v3-bullet-size) + var(--hiw-v3-bullet-margin-right));
}

.hiw-v3__bullet {
  position: relative;
  margin-left: calc(-1 * var(--hiw-v3-bullet-size));
  left: calc(-1 * var(--hiw-v3-bullet-margin-right));
}
.hiw-v3__bullet::before {
  content: "X";
  display: inline-flex;
  width: var(--hiw-v3-bullet-size);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.hiw-v3__bullet::after {
  content: counter(list-items);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: var(--hiw-v3-bullet-size);
  height: var(--hiw-v3-bullet-size);
  background-color: var(--color-bg-dark);
  border-radius: 50%;
  font-size: var(--hiw-v3-bullet-font-size);
  font-weight: 600;
}

.hiw-v3__item:last-child .hiw-v3__bullet::after {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.hiw-v3__content {
  padding-left: calc(var(--hiw-v3-bullet-size) + var(--hiw-v3-bullet-margin-right));
}