EN TR
<button onclick="toggleModal()" class="show-modal-btn">Show Modal</button>

<div class="feedback-modal">
    <a href="javascript:;" onclick="toggleModal()" class="modal-close-btn">
        <img src="img/icon-close.svg" alt="">
    </a>
    <h3>Give feedback</h3>
    <ul class="feedback-form">
        <li>
            <label class="title no-bold">
                What do you think of the editing tool?
            </label>
            <ul>
                <li>
                    <label>
                        <input type="radio" name="x" value="1">
                        <span class="box">
                            <svg width="44" height="44" viewBox="0 0 44 44" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <circle cx="24" cy="24" r="16" class="face-bg rank1"/>
                                <path d="M16.5 18.3334H16.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M27.5 18.3334H27.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M17.4167 27.9583C18.6236 26.7266 20.2755 26.0324 22 26.0324C23.7245 26.0324 25.3764 26.7266 26.5834 27.9583"
                                      stroke="#2C3E50" stroke-width="2.75" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M32.2043 32.2776C30.8093 33.713 30.8231 36.0019 32.2354 37.4203C33.6477 38.8387 35.9365 38.8624 37.3779 37.4736C38.8193 36.0847 38.8805 33.7966 37.5155 32.3326L34.8333 29.3333L32.2043 32.2776V32.2776Z"
                                      stroke="#2C3E50" stroke-width="2.75" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                                <path d="M38.2525 24.7812C38.414 23.8628 38.4968 22.9324 38.5 22C38.5 12.8873 31.1127 5.5 22 5.5C12.8873 5.5 5.5 12.8873 5.5 22C5.5 31.1127 12.8873 38.5 22 38.5C23.265 38.5 24.4933 38.3607 25.6667 38.093"
                                      stroke="#2C3E50" stroke-width="2.75" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="x" value="1">
                        <span class="box">
                            <svg width="44" height="44" viewBox="0 0 44 44" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <circle cx="24" cy="24" r="16" class="face-bg rank2"/>
                                <circle cx="22" cy="22" r="16.5" stroke="#2C3E50" stroke-width="2.75"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"/>
                                <path d="M16.5 18.3334H16.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round"
                                      stroke-linejoin="round"/>
                                <path d="M27.5 18.3334H27.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round"
                                      stroke-linejoin="round"/>
                                <path d="M17.4167 29.3333C20.7007 27.2774 24.5516 26.3146 28.4167 26.5833"
                                      stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="x" value="1" checked>
                        <span class="box">
                            <svg width="44" height="44" viewBox="0 0 44 44" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <circle cx="24" cy="24" r="16" class="face-bg"/>
                                <circle cx="22" cy="22" r="16.5" stroke="#2C3E50" stroke-width="2.75"
                                        stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16.5 18.3334H16.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M27.5 18.3334H27.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16.5 27.5H27.5" stroke="#2C3E50" stroke-width="2.75" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="x" value="1">
                        <span class="box">
                            <svg width="44" height="44" viewBox="0 0 44 44" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <circle cx="24" cy="24" r="16" class="face-bg rank4"/>
                                <circle cx="22" cy="22" r="16.5" stroke="#2C3E50" stroke-width="2.75"
                                        stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16.5 18.3334H16.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M27.5 18.3334H27.5184" stroke="#2C3E50" stroke-width="2.75"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M17.4166 27.5C18.6235 28.7318 20.2755 29.4259 22 29.4259C23.7245 29.4259 25.3764 28.7318 26.5833 27.5"
                                      stroke="#2C3E50" stroke-width="2.75" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="x" value="1">
                        <span class="box">
                            <svg width="44" height="44" viewBox="0 0 44 44" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <circle cx="24" cy="24" r="16" class="face-bg rank5"/>
                                <circle cx="22" cy="22" r="16.5" stroke="#2C3E50" stroke-width="2.75"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"/>
                                <path d="M16.5 16.5H16.5184" stroke="#2C3E50" stroke-width="2.75" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                                <path d="M27.5 16.5H27.5184" stroke="#2C3E50" stroke-width="2.75" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                                <path d="M16.0416 23.8334C16.0416 23.074 15.426 22.4584 14.6666 22.4584C13.9072 22.4584 13.2916 23.074 13.2916 23.8334H16.0416ZM30.7083 23.8334C30.7083 23.074 30.0927 22.4584 29.3333 22.4584C28.5739 22.4584 27.9583 23.074 27.9583 23.8334H30.7083ZM29.3333 25.2084C30.0927 25.2084 30.7083 24.5927 30.7083 23.8334C30.7083 23.074 30.0927 22.4584 29.3333 22.4584V25.2084ZM14.6666 22.4584C13.9072 22.4584 13.2916 23.074 13.2916 23.8334C13.2916 24.5927 13.9072 25.2084 14.6666 25.2084V22.4584ZM13.2916 23.8334C13.2916 28.6428 17.1905 32.5417 22 32.5417V29.7917C18.7093 29.7917 16.0416 27.1241 16.0416 23.8334H13.2916ZM22 32.5417C26.8094 32.5417 30.7083 28.6428 30.7083 23.8334H27.9583C27.9583 27.1241 25.2907 29.7917 22 29.7917V32.5417ZM29.3333 22.4584H14.6666V25.2084H29.3333V22.4584Z"
                                      fill="#2C3E50"/>
                            </svg>
                        </span>
                    </label>
                </li>
            </ul>
        </li>
        <li>
            <label class="title">
                Do you have any thoughts you’d like to share?
            </label>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </li>
        <li>
            <label class="title">
                May we follow you up on your feedback?
            </label>
            <div class="radio-group">
                <label class="radio">
                    <input type="radio" name="feedback" value="1">
                    <span class="radio-btn"></span>
                    <span class="radio-text">Yes</span>
                </label>
                <label class="radio">
                    <input type="radio" name="feedback" value="0">
                    <span class="radio-btn"></span>
                    <span class="radio-text">No</span>
                </label>
            </div>
        </li>
        <li>
            <div class="actions">
                <button type="submit">Send</button>
                <button type="button">Cancel</button>
            </div>
        </li>
    </ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected];500;600&family=Merriweather:[email protected]&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 0;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
  outline: 0;
}

html, body {
  height: 100%;
}

body {
  background: #EAEDF5;
  display: flex;
  align-items: center;
  justify-content: center;
  .show-modal-btn {
    height: 50px;
    border-radius: 5px;
    padding: 0 50px;
    color: #fff;
    background: #3B70FF;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
  }
}

.feedback-modal {
  width: 567px;
  background: #fff;
  border-radius: 15px;
  padding: 105px 80px 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  overflow: auto;
  max-height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 300ms linear all;
  box-shadow: 0 37px 40px 0 rgba(#385298, .18);

  &.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }

  .modal-close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #EAEDF5;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  h3 {
    font-family: 'Merriweather', sans-serif;
    font-size: 22px;
    margin-bottom: 10px;
  }

  .feedback-form {
    > li {
      margin-bottom: 50px;

      &:last-child {
        margin-bottom: 0;
      }

      .title {
        font-size: 18px;
        font-weight: 500;
        padding-bottom: 10px;
        display: block;

        &.no-bold {
          font-weight: normal;
        }
      }

      textarea {
        height: 150px;
        border-radius: 5px;
        border: 1px solid #A9B2CA;
        width: 100%;
        resize: none;
        padding: 20px;
        font-size: 16px;

        &:focus {
          border-color: #3B70FF;
        }
      }

      .radio-group {
        display: flex;
        padding-top: 15px;
        align-items: center;

        .radio {
          display: flex;
          align-items: center;
          margin-right: 55px;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }

          .radio-btn {
            width: 27px;
            height: 27px;
            border-radius: 50%;
            border: 1px solid #A9B2CA;
            min-width: 27px;
            margin-right: 15px;
            position: relative;
            &::before {
              content: '';
              width: 13px;
              height: 13px;
              border-radius: 50%;
              background: #3B70FF;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: none;
            }
          }

          .radio-text {
            font-size: 16px;
          }

          input {
            display: none;
            &:checked + .radio-btn {
              border-color: #3B70FF;
              &::before {
                display: block;
              }
            }
          }
        }
      }

      .actions {
        display: flex;
        justify-content: space-between;
        button {
          width: 49%;
          height: 65px;
          border-radius: 5px;
          border: 1px solid #A9B2CA;
          background: transparent;
          font-size: 18px;
          color: #717B94;
          font-weight: 600;
          cursor: pointer;
          &[type="submit"] {
            background: #3B70FF;
            color: #fff;
            border-color: #3B70FF;
          }
        }
      }

      ul {
        padding-top: 24px;
        display: flex;

        li {
          label {
            cursor: pointer;

            input {
              display: none;

              &:checked + .box {
                background: #EAEDF5;

                .face-bg {
                  fill: #FFBA44;

                  &.rank1 {
                    fill: #ff4444;
                  }

                  &.rank2 {
                    fill: #ff7f44;
                  }

                  &.rank4 {
                    fill: #cdff44;
                  }

                  &.rank5 {
                    fill: #7ae91a;
                  }
                }
              }
            }

            .box {
              width: 76px;
              height: 76px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
function toggleModal() {
    document.querySelector('.feedback-modal').classList.toggle('active');
}