CodePen Embed - WNmwKob

<form class="calc__fields">
  <div class="fields__sidebar">
    <div class="fields__head">
      <figure class="fields__icon">
        <img src="./assets/img/content/calc/calc_icon.svg" alt="" />
      </figure>
      <h3>Расчёт стоимости</h3>
    </div>
    <div class="fields__text">
      <p>Узнайте за 5 простых шагов стоимость перетяжки вашей мебели и вашу персональную скидку</p>
    </div>
    <ul class="fields__stages">
      <li class="fields__stage _active">Шаг 1</li>
      <li class="fields__stage">Шаг 2</li>
      <li class="fields__stage">Шаг 3</li>
      <li class="fields__stage">Шаг 4</li>
      <li class="fields__stage">Шаг 5</li>
    </ul>
  </div>
  <div class="fields__body">
    <div class="fields__field">
      <div class="fields__title">
        <h4>Какой материал обивки требуется?</h4>
      </div>
      <div class="fields__items">
        <input type="radio" class="radio" id="material_1" name="material" value="Натуральная кожа" />
        <label for="material_1">Натуральная кожа</label>
        <input type="radio" class="radio" id="material_2" name="material" value="Велюр" />
        <label for="material_2">Велюр</label>
        <input type="radio" class="radio" id="material_3" name="material" value="Другое" />
        <label for="material_3">Другое</label>
        <input type="radio" class="radio" id="material_4" name="material" value="Неважно" />
        <label for="material_4">Неважно</label>
      </div>
      <button class="btn btn--icon btn--icon-next">Дальше</button>
    </div>
    <div class="fields__field">
      <div class="fields__title">
        <h4>Какие работы нужно выполнить?</h4>
        <button class="btn-prev btn-prev--second"></button>
      </div>
      <div class="fields__items">
        <input type="checkbox" class="checkbox" id="obivka" name="material" value="Обивка" />
        <label for="obivka">Обивка</label>
        <input type="checkbox" class="checkbox" id="remont" name="material" value="Ремонт" />
        <label for="remont">Ремонт</label>
        <input type="checkbox" class="checkbox" id="zamena" name="material" value="Замена наполнителя" />
        <label for="zamena">Замена наполнителя</label>
        <input type="checkbox" class="checkbox" id="vosstanovlenie" name="material" value="Восстановление утраченных деталей" />
        <label for="vosstanovlenie">Восстановление утраченных деталей</label>
      </div>
      <button class="btn btn--icon btn--icon-next">Дальше</button>
    </div>
    <div class="fields__field">
      <div class="fields__title">
        <h4>Где будут проводиться работы?</h4>
        <button class="btn-prev btn-prev--second"></button>
      </div>
      <div class="fields__items">
        <input type="radio" class="radio" id="work_1" name="work" value="У вас дома" />
        <label for="work_1">У вас дома</label>
        <input type="radio" class="radio" id="work_2" name="work" value="В нашем цеху" />
        <label for="work_2">В нашем цеху</label>
      </div>
      <button class="btn btn--icon btn--icon-next">Дальше</button>
    </div>
    <div class="fields__field _range">
      <div class="fields__title">
        <h4>На какой бюджет рассчитываете?</h4>
        <button class="btn-prev btn-prev--second"></button>
      </div>
      <div class="fields__items">
        <div class="range">
          <label for="budget">Бюджет на ремонт</label>
          <input type="range" id="budget" class="range__input" name="budget" value="4000" min="4000" max="200000" step="1000">
          <div class="range__value">
            <span id="val-min" class="val-min"></span>
            <span id="val-max" class="val-max"></span>
          </div>
          <span class="range__current"></span>
        </div>
      </div>
      <button class="btn btn--icon btn--icon-next">Дальше</button>
    </div>
    <div class="fields__field">
      <div class="fields__title">
        <h4>Ваши данные для контакта</h4>
        <button class="btn-prev btn-prev--second"></button>
      </div>
      <div class="fields__items">
        <div class="form__name">
          <input type="text" placeholder="Ваше имя" />
        </div>
        <div class="form__tel">
          <input type="tel" placeholder="+7 (___) ___-__-__" />
        </div>
        <span class="protected">
          <svg class="icon icon-color icon-color--dark">
            <use xlink:href="./assets/img/icons/sprite.svg#icon_shield"></use>
          </svg>
          Ваши данные под защитой</span>
      </div>
      <button type="submit" class="btn btn--rounded">Отправить</button>
    </div>
  </div>
</form>

$primary: #fa8710;
$light-yellow: #faf0bb;
$light-swamp: #f4ede6;
$swamp: #b4a897;
$dark-brown: #3f3836;
$brown-hover: #894e12;
$brown: #9b6e4d;
$cream: #fcfaf0;
$yellow: #f7e47c;
$peach: #f7ca7a;
$grey: #4f4f4f;
$white: #ffffff;
$delay: 0.1s ease-in-out;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: inherit;
  font-family: inherit;
}

input,
button {
  border: none;
  font-family: inherit;
  font-size: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
button,
input[type="submit"] {
  cursor: pointer;
}

input:focus,
button:focus {
  outline: none;
}

ul,
li {
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
legend {
  display: table;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  + * {
    clear: both;
  }
}
fieldset {
  border: 0;
  padding: 0.01em 0 0 0;
  margin: 0;
  min-width: 0;
}

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}
h1 {
  color: $dark-brown;
  font-family: "Unbounded", sans-serif;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1.2;
  strong {
    color: $brown;
  }
  span {
    position: relative;
    z-index: 1;
    color: $dark-brown;
    &:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -0.3rem;
      right: -0.3rem;
      border-radius: 0.5rem;
      background: $peach;
      transform: rotate(-3deg);
      z-index: -1;
    }
  }
  &.invert {
    color: $cream;
    strong {
      color: $primary;
    }
  }
}
h2 {
  color: $dark-brown;
  font-family: "Unbounded", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  strong {
    font-weight: 400;
    color: $brown;
  }
  &.clr-white {
    color: $white;
    strong {
      color: $light-yellow;
    }
  }
  &.bold {
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    strong {
      text-transform: none;
    }
  }
}

h3 {
  color: $dark-brown;
  font-family: "Unbounded", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.2;
  strong {
    font-weight: 400;
    color: $brown;
  }
  &.clr-white {
    color: $white;
    strong {
      color: $light-yellow;
    }
  }
}

h4 {
  color: $dark-brown;
  font-family: "Unbounded", sans-serif;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.2;
  strong {
    font-weight: 400;
    color: $brown;
  }
  &.clr-white {
    color: $white;
    strong {
      color: $light-yellow;
    }
  }
}
.btn {
  display: inline-block;
  text-align: center;
  padding: 1.4rem 1.8rem;
  color: $white;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  border-radius: 0.7rem;
  background-color: $primary;
  box-shadow: 0 1rem 2rem 0 rgba(250, 135, 16, 0.3);
  transition: $delay;
  &:not(:disabled):hover {
    background-color: $peach;
    color: $brown-hover;
  }
  &:not(:disabled):active {
    background-color: $yellow;
  }
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  &--rounded {
    padding: 2rem 5rem;
    font-size: 1.7rem;
    border-radius: 6.5rem;
  }
  &--submit {
    padding: 1.6rem 1.8rem;
    width: 100%;
  }
  &--secondary {
    background-color: $light-yellow;
    color: $dark-brown;
    border-radius: 6.5rem;
    border: 0.1rem solid #3f3836;
    font-weight: 700;
    padding: 1.4rem 2.5rem;
    box-shadow: 0 1rem 2rem 0 rgba(99, 47, 47, 0.24);
    &:hover {
      color: $dark-brown;
    }
  }
  &--icon {
    display: inline-flex;
    padding: 2rem 3.7rem;
    align-items: center;
    gap: 1rem;
    border-radius: 6.5rem;
    &:before {
      content: "";
      display: block;
      width: 2.4rem;
      height: 2.4rem;
      background-size: 2.4rem;
      background-repeat: no-repeat;
      transition: $delay;
    }
    &-order {
      &:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 4C3 2.34315 4.34315 1 6 1H18C19.6569 1 21 2.34315 21 4V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V4C19 3.44772 18.5523 3 18 3H6ZM7 6.2C7 5.53726 7.53726 5 8.2 5H15.8C16.4627 5 17 5.53726 17 6.2V9.8C17 10.4627 16.4627 11 15.8 11H8.2C7.53726 11 7 10.4627 7 9.8V6.2ZM9 7V9H15V7H9Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14.0088C7 13.4565 7.44772 13.0088 8 13.0088C8.55228 13.0088 9 13.4565 9 14.0088C9 14.5611 8.55228 15.0088 8 15.0088C7.44772 15.0088 7 14.5611 7 14.0088ZM11 14.0088C11 13.4565 11.4477 13.0088 12 13.0088C12.5523 13.0088 13 13.4565 13 14.0088C13 14.5611 12.5523 15.0088 12 15.0088C11.4477 15.0088 11 14.5611 11 14.0088ZM15 14.0088C15 13.4565 15.4477 13.0088 16 13.0088C16.5523 13.0088 17 13.4565 17 14.0088C17 14.5611 16.5523 15.0088 16 15.0088C15.4477 15.0088 15 14.5611 15 14.0088ZM7 17.9821C7 17.4298 7.44772 16.9821 8 16.9821C8.55228 16.9821 9 17.4298 9 17.9821C9 18.5344 8.55228 18.9821 8 18.9821C7.44772 18.9821 7 18.5344 7 17.9821ZM11 17.9821C11 17.4298 11.4477 16.9821 12 16.9821C12.5523 16.9821 13 17.4298 13 17.9821C13 18.5344 12.5523 18.9821 12 18.9821C11.4477 18.9821 11 18.5344 11 17.9821ZM15 17.9821C15 17.4298 15.4477 16.9821 16 16.9821C16.5523 16.9821 17 17.4298 17 17.9821C17 18.5344 16.5523 18.9821 16 18.9821C15.4477 18.9821 15 18.5344 15 17.9821Z' fill='white'/%3E%3C/svg%3E");
      }
      &:not(:disabled):hover {
        &:before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 4C3 2.34315 4.34315 1 6 1H18C19.6569 1 21 2.34315 21 4V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V4C19 3.44772 18.5523 3 18 3H6ZM7 6.2C7 5.53726 7.53726 5 8.2 5H15.8C16.4627 5 17 5.53726 17 6.2V9.8C17 10.4627 16.4627 11 15.8 11H8.2C7.53726 11 7 10.4627 7 9.8V6.2ZM9 7V9H15V7H9Z' fill='%23894E12'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14.0088C7 13.4565 7.44772 13.0088 8 13.0088C8.55228 13.0088 9 13.4565 9 14.0088C9 14.5611 8.55228 15.0088 8 15.0088C7.44772 15.0088 7 14.5611 7 14.0088ZM11 14.0088C11 13.4565 11.4477 13.0088 12 13.0088C12.5523 13.0088 13 13.4565 13 14.0088C13 14.5611 12.5523 15.0088 12 15.0088C11.4477 15.0088 11 14.5611 11 14.0088ZM15 14.0088C15 13.4565 15.4477 13.0088 16 13.0088C16.5523 13.0088 17 13.4565 17 14.0088C17 14.5611 16.5523 15.0088 16 15.0088C15.4477 15.0088 15 14.5611 15 14.0088ZM7 17.9821C7 17.4298 7.44772 16.9821 8 16.9821C8.55228 16.9821 9 17.4298 9 17.9821C9 18.5344 8.55228 18.9821 8 18.9821C7.44772 18.9821 7 18.5344 7 17.9821ZM11 17.9821C11 17.4298 11.4477 16.9821 12 16.9821C12.5523 16.9821 13 17.4298 13 17.9821C13 18.5344 12.5523 18.9821 12 18.9821C11.4477 18.9821 11 18.5344 11 17.9821ZM15 17.9821C15 17.4298 15.4477 16.9821 16 16.9821C16.5523 16.9821 17 17.4298 17 17.9821C17 18.5344 16.5523 18.9821 16 18.9821C15.4477 18.9821 15 18.5344 15 17.9821Z' fill='%23894E12'/%3E%3C/svg%3E");
        }
      }
    }
    &-photo {
      &:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M13 3H8.3C6.61984 3 5.77976 3 5.13803 3.32698C4.57354 3.6146 4.1146 4.07354 3.82698 4.63803C3.5 5.27976 3.5 6.11984 3.5 7.8V16.2C3.5 17.8802 3.5 18.7202 3.82698 19.362C4.1146 19.9265 4.57354 20.3854 5.13803 20.673C5.77976 21 6.61984 21 8.3 21H17.5C18.43 21 18.895 21 19.2765 20.8978C20.3117 20.6204 21.1204 19.8117 21.3978 18.7765C21.5 18.395 21.5 17.93 21.5 17M19.5 8V2M16.5 5H22.5M11 8.5C11 9.60457 10.1046 10.5 9 10.5C7.89543 10.5 7 9.60457 7 8.5C7 7.39543 7.89543 6.5 9 6.5C10.1046 6.5 11 7.39543 11 8.5ZM15.49 11.9181L7.03115 19.608C6.55536 20.0406 6.31747 20.2568 6.29643 20.4442C6.27819 20.6066 6.34045 20.7676 6.46319 20.8755C6.60478 21 6.92628 21 7.56929 21H16.956C18.3951 21 19.1147 21 19.6799 20.7582C20.3894 20.4547 20.9547 19.8894 21.2582 19.1799C21.5 18.6147 21.5 17.8951 21.5 16.456C21.5 15.9717 21.5 15.7296 21.4471 15.5042C21.3805 15.2208 21.253 14.9554 21.0733 14.7264C20.9303 14.5442 20.7412 14.3929 20.3631 14.0905L17.5658 11.8527C17.1874 11.5499 16.9982 11.3985 16.7898 11.3451C16.6061 11.298 16.4129 11.3041 16.2325 11.3627C16.0279 11.4291 15.8486 11.5921 15.49 11.9181Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }
      &:hover {
        &:before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M13 3H8.3C6.61984 3 5.77976 3 5.13803 3.32698C4.57354 3.6146 4.1146 4.07354 3.82698 4.63803C3.5 5.27976 3.5 6.11984 3.5 7.8V16.2C3.5 17.8802 3.5 18.7202 3.82698 19.362C4.1146 19.9265 4.57354 20.3854 5.13803 20.673C5.77976 21 6.61984 21 8.3 21H17.5C18.43 21 18.895 21 19.2765 20.8978C20.3117 20.6204 21.1204 19.8117 21.3978 18.7765C21.5 18.395 21.5 17.93 21.5 17M19.5 8V2M16.5 5H22.5M11 8.5C11 9.60457 10.1046 10.5 9 10.5C7.89543 10.5 7 9.60457 7 8.5C7 7.39543 7.89543 6.5 9 6.5C10.1046 6.5 11 7.39543 11 8.5ZM15.49 11.9181L7.03115 19.608C6.55536 20.0406 6.31747 20.2568 6.29643 20.4442C6.27819 20.6066 6.34045 20.7676 6.46319 20.8755C6.60478 21 6.92628 21 7.56929 21H16.956C18.3951 21 19.1147 21 19.6799 20.7582C20.3894 20.4547 20.9547 19.8894 21.2582 19.1799C21.5 18.6147 21.5 17.8951 21.5 16.456C21.5 15.9717 21.5 15.7296 21.4471 15.5042C21.3805 15.2208 21.253 14.9554 21.0733 14.7264C20.9303 14.5442 20.7412 14.3929 20.3631 14.0905L17.5658 11.8527C17.1874 11.5499 16.9982 11.3985 16.7898 11.3451C16.6061 11.298 16.4129 11.3041 16.2325 11.3627C16.0279 11.4291 15.8486 11.5921 15.49 11.9181Z' stroke='%23894E12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
      }
    }
    &-next {
      padding: 1.8rem 7rem;
      &:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }
      &:not(:disabled):hover {
        &:before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='%23894E12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
      }
    }
    &:not(:disabled):hover {
      box-shadow: 0 1rem 2rem 0 rgba(235, 167, 47, 0.3);
    }
  }
}
.examples-slider__btn {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
}

.form__name {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    left: 2.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cg clip-path='url(%23clip0_1_14018)'%3E%3Cpath d='M4.87328 17.8185C5.43091 16.5047 6.73285 15.5833 8.25001 15.5833H13.75C15.2672 15.5833 16.5691 16.5048 17.1267 17.8185M14.6667 8.70831C14.6667 10.7334 13.0251 12.375 11 12.375C8.97497 12.375 7.33334 10.7334 7.33334 8.70831C7.33334 6.68327 8.97497 5.04165 11 5.04165C13.0251 5.04165 14.6667 6.68327 14.6667 8.70831ZM20.1667 11C20.1667 16.0626 16.0626 20.1666 11 20.1666C5.9374 20.1666 1.83334 16.0626 1.83334 11C1.83334 5.93737 5.9374 1.83331 11 1.83331C16.0626 1.83331 20.1667 5.93737 20.1667 11Z' stroke='%233F3836' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_14018'%3E%3Crect width='22' height='22' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: 2.2rem;
    background-repeat: no-repeat;
  }
  input {
    padding-left: 5.3rem;
  }
}
.form__tel {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    left: 2.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cg clip-path='url(%23clip0_1_9241)'%3E%3Cpath d='M12.8789 5.49998C13.7742 5.67466 14.5971 6.11255 15.2421 6.75759C15.8871 7.40263 16.325 8.22547 16.4997 9.12081M12.8789 1.83331C14.739 2.03996 16.4737 2.87297 17.7979 4.19557C19.1222 5.51817 19.9574 7.25174 20.1664 9.11165M9.37443 12.7078C8.27298 11.6063 7.40326 10.3609 6.76526 9.03211C6.71039 8.91781 6.68295 8.86066 6.66187 8.78834C6.58695 8.53135 6.64076 8.21578 6.79661 7.99814C6.84046 7.93689 6.89285 7.8845 6.99764 7.77971C7.31811 7.45924 7.47835 7.299 7.58311 7.13787C7.97819 6.53022 7.97819 5.74686 7.58311 5.13921C7.47835 4.97808 7.31811 4.81784 6.99764 4.49737L6.81901 4.31874C6.33185 3.83158 6.08828 3.58801 5.82668 3.45569C5.30641 3.19254 4.692 3.19254 4.17174 3.45569C3.91014 3.58801 3.66656 3.83158 3.17941 4.31874L3.03491 4.46324C2.54942 4.94873 2.30668 5.19147 2.12128 5.5215C1.91556 5.88771 1.76765 6.4565 1.7689 6.87653C1.77002 7.25507 1.84345 7.51377 1.99031 8.03118C2.77953 10.8118 4.26863 13.4356 6.45762 15.6246C8.6466 17.8136 11.2704 19.3027 14.051 20.0919C14.5684 20.2388 14.8272 20.3122 15.2057 20.3133C15.6257 20.3146 16.1945 20.1667 16.5607 19.9609C16.8908 19.7755 17.1335 19.5328 17.619 19.0473L17.7635 18.9028C18.2506 18.4157 18.4942 18.1721 18.6265 17.9105C18.8897 17.3902 18.8897 16.7758 18.6265 16.2555C18.4942 15.9939 18.2506 15.7504 17.7635 15.2632L17.5849 15.0846C17.2644 14.7641 17.1041 14.6039 16.943 14.4991C16.3354 14.104 15.552 14.104 14.9443 14.4991C14.7832 14.6039 14.623 14.7641 14.3025 15.0846C14.1977 15.1894 14.1453 15.2418 14.0841 15.2856C13.8664 15.4415 13.5509 15.4953 13.2939 15.4204C13.2216 15.3993 13.1644 15.3718 13.0501 15.317C11.7213 14.679 10.4759 13.8092 9.37443 12.7078Z' stroke='%233F3836' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_9241'%3E%3Crect width='22' height='22' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: 2.2rem;
    background-repeat: no-repeat;
  }
  input {
    padding-left: 5.3rem;
  }
  &--brown {
    &:before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cg clip-path='url(%23clip0_1_9241)'%3E%3Cpath d='M12.8789 5.49998C13.7742 5.67466 14.5971 6.11255 15.2421 6.75759C15.8871 7.40263 16.325 8.22547 16.4997 9.12081M12.8789 1.83331C14.739 2.03996 16.4737 2.87297 17.7979 4.19557C19.1222 5.51817 19.9574 7.25174 20.1664 9.11165M9.37443 12.7078C8.27298 11.6063 7.40326 10.3609 6.76526 9.03211C6.71039 8.91781 6.68295 8.86066 6.66187 8.78834C6.58695 8.53135 6.64076 8.21578 6.79661 7.99814C6.84046 7.93689 6.89285 7.8845 6.99764 7.77971C7.31811 7.45924 7.47835 7.299 7.58311 7.13787C7.97819 6.53022 7.97819 5.74686 7.58311 5.13921C7.47835 4.97808 7.31811 4.81784 6.99764 4.49737L6.81901 4.31874C6.33185 3.83158 6.08828 3.58801 5.82668 3.45569C5.30641 3.19254 4.692 3.19254 4.17174 3.45569C3.91014 3.58801 3.66656 3.83158 3.17941 4.31874L3.03491 4.46324C2.54942 4.94873 2.30668 5.19147 2.12128 5.5215C1.91556 5.88771 1.76765 6.4565 1.7689 6.87653C1.77002 7.25507 1.84345 7.51377 1.99031 8.03118C2.77953 10.8118 4.26863 13.4356 6.45762 15.6246C8.6466 17.8136 11.2704 19.3027 14.051 20.0919C14.5684 20.2388 14.8272 20.3122 15.2057 20.3133C15.6257 20.3146 16.1945 20.1667 16.5607 19.9609C16.8908 19.7755 17.1335 19.5328 17.619 19.0473L17.7635 18.9028C18.2506 18.4157 18.4942 18.1721 18.6265 17.9105C18.8897 17.3902 18.8897 16.7758 18.6265 16.2555C18.4942 15.9939 18.2506 15.7504 17.7635 15.2632L17.5849 15.0846C17.2644 14.7641 17.1041 14.6039 16.943 14.4991C16.3354 14.104 15.552 14.104 14.9443 14.4991C14.7832 14.6039 14.623 14.7641 14.3025 15.0846C14.1977 15.1894 14.1453 15.2418 14.0841 15.2856C13.8664 15.4415 13.5509 15.4953 13.2939 15.4204C13.2216 15.3993 13.1644 15.3718 13.0501 15.317C11.7213 14.679 10.4759 13.8092 9.37443 12.7078Z' stroke='%239B6E4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_9241'%3E%3Crect width='22' height='22' fill='%239B6E4D'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    }
  }
}

// radio
.radio,
.checkbox {
  display: none;
}
.radio + label,
.checkbox + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  color: $dark-brown;
  font-size: 1.6rem;
  font-weight: 400;
  cursor: pointer;
}
.radio + label::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  flex-grow: 0;
  border: 0.1rem solid $swamp;
  border-radius: 50%;
  margin-right: 0.8rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  background-color: $white;
  box-shadow: 0 0.2rem 0.5rem 0 rgba(155, 96, 77, 0.1);
  transition: $delay;
}
.checkbox + label::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  flex-grow: 0;
  border: 0.1rem solid $swamp;
  border-radius: 0.3rem;
  margin-right: 0.8rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  background-color: $white;
  box-shadow: 0 0.2rem 0.5rem 0 rgba(155, 96, 77, 0.1);
  transition: $delay;
}
.radio:not(:disabled):active + label::before,
.checkbox:not(:disabled):active + label::before {
  background-color: $light-yellow;
  border-color: $swamp;
}
.radio:focus + label::before,
.checkbox:focus + label::before {
  border-color: $primary;
}
.radio:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='11' viewBox='0 0 10 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='10' height='10' rx='5' fill='%23FA8710'/%3E%3C/svg%3E%0A");
}
.checkbox:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M13.1334 1.31836L5.33337 8.682L1.8667 5.40927' stroke='%23FA8710' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.radio:disabled + label::before,
.checkbox:disabled + label::before {
  background-color: $light-yellow;
}
.radio:not(:disabled):not(:checked) + label:hover::before,
.checkbox:not(:disabled):not(:checked) + label:hover::before {
  border-color: $primary;
}
.range {
  display: flex;
  flex-direction: column;
  // padding-bottom: 2rem;
  label {
    margin-bottom: 1rem;
  }
}
input[type="range"] {
  background: $swamp;
  height: 0.2rem;
  margin: 1.5rem 0;
}
label {
  color: $dark-brown;
  font-size: 1.8rem;
  font-weight: 500;
}
// chrome
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3rem;
  height: 3rem;
  background-color: $primary;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Ccircle cx='6' cy='6' r='6' fill='white'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.2rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(250, 135, 16, 0.3);
}
// firefox
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  width: 3rem;
  height: 3rem;
  background-color: $primary;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Ccircle cx='6' cy='6' r='6' fill='white'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.2rem;
  border: none;
  box-shadow: 0 0.5rem 1rem 0 rgba(250, 135, 16, 0.3);
}
.range__value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: $brown;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 0.5rem;
}
.range__current {
  color: $brown;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}
.calc {
}
.calc__fields {
  display: flex;
  max-width: 90rem;
  margin: 5.4rem auto 0 auto;
  border-radius: 1.7rem;
  background: $cream;
  box-shadow: 0 0.4rem 1.7rem 0 rgba(80, 56, 48, 0.23);
}
.fields__sidebar {
  display: flex;
  flex-direction: column;
  padding: 3.6rem;
  max-width: 35.7rem;
  background: $brown;
  color: $white;
  font-size: 1.5rem;
  font-weight: 500;
  border-top-left-radius: 1.7rem;
  border-bottom-left-radius: 1.7rem;
  h3 {
    color: $white;
    line-height: 1;
  }
  p {
    margin-top: 1.6rem;
  }
}
.fields__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.fields__text {
  margin-bottom: 10.5rem;
}
.fields__icon {
  img {
    width: 5.6rem;
    height: auto;
  }
}
.fields__stages {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-bottom: 2.9rem;
}
.fields__stage {
  position: relative;
  color: $light-yellow;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.3;
  transition: $delay;
  &:after {
    position: absolute;
    left: 0;
    top: 100%;
    content: "";
    width: 100%;
    height: 0.9rem;
    background: $light-yellow;
  }
  &._active {
    opacity: 1;
  }
}
.fields__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 3.6rem;
  .btn {
    margin-top: auto;
    width: 100%;
    justify-content: center;
  }
  .protected {
    margin-top: 0;
  }
}
.fields__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  h4 {
    color: $brown;
    flex-basis: 80%;
  }
  .btn-prev--second {
    position: static;
    transform: none;
    width: 5rem;
    height: 5rem;
    background-size: 5rem;
    flex-shrink: 0;
  }
}
.fields__field {
  display: none;
  flex-direction: column;
  min-height: 31rem;
  &._active {
    display: flex;
  }
}
.fields__items {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1.9rem;
  margin-top: 2.4rem;
  margin-bottom: 1.6rem;
  padding-left: 2rem;
  input {
    width: 100%;
  }
}

View Compiled

const quizzes = document.querySelectorAll(".calc__fields");
quizzes.forEach((quiz) => {
  const questions = quiz.querySelectorAll(".fields__field"),
    btnsPrev = quiz.querySelectorAll(".btn-prev"),
    btnsNext = quiz.querySelectorAll(".btn--icon-next"),
    stages = quiz.querySelectorAll(".fields__stage");
  console.log(stages);

  // progress
  // const progressCount = questions.length;

  btnsNext.forEach((btnNext, btnNextIndex) => {
    btnNext.addEventListener("click", (e) => {
      e.preventDefault();

      questions[btnNextIndex].classList.remove("_active");
      questions[btnNextIndex + 1].classList.add("_active");

      stages[btnNextIndex].classList.remove("_active");
      stages[btnNextIndex + 1].classList.add("_active");
    });
    if (!questions[btnNextIndex].classList.contains("_range")) {
      btnNext.disabled = true;
    }
  });

  btnsPrev.forEach((btnPrev, btnPrevIndex) => {
    btnPrev.addEventListener("click", (e) => {
      e.preventDefault();

      questions[btnPrevIndex + 1].classList.remove("_active");
      questions[btnPrevIndex].classList.add("_active");
    });
  });

  questions.forEach((question, questionIndex) => {
    if (questionIndex === 0) {
      question.classList.add("_active");
    } else {
      question.classList.remove("_active");
    }
    question.addEventListener("change", (e) => {
      const target = e.target,
        inputsChecked = question.querySelectorAll("input:checked");
      if (
        inputsChecked.length > 0 ||
        target.classList.contains("range__input")
      ) {
        btnsNext[questionIndex].disabled = false;
      } else {
        btnsNext[questionIndex].disabled = true;
      }
    });
  });
});

This Pen is owned by Andrey on CodePen.

See more by @fuktsbts-the-bold on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.