Turn checkboxes to clickable buttons with active styling

style.scss

[type="radio"] {
          + {
            span {
              position: relative;
              cursor: pointer;
              background-color: #F7FBFF;
              border: 2px solid #F7FBFF;
              padding: 15px 30px;
              border-radius: 100px;
              display: inline-block;
              margin-bottom: 15px !important;
              &:before {
                display: none;
              }
            }
          }
          opacity: 0;
          position: absolute;
          background-color: #F7FBFF;
          margin-bottom: 15px !important;
          border-radius: 100px;
          padding: 15px 30px;
          &:checked {
            + {
              span {
                display: block;
                border: 2px solid #EA6024;
                background-color: #FFFAF8;
                color: #EA6024;
                border-radius: 100px;
                padding: 15px 30px;
                &:before {
                  display: none;
                }
              }
            }
          }
        }
        [type="checkbox"] {
          + {
            span {
              position: relative;
              cursor: pointer;
              background-color: #F7FBFF;
              border: 2px solid #F7FBFF;
              padding: 15px 30px;
              border-radius: 100px;
              display: inline-block;
              margin-bottom: 15px !important;
              &:before {
                display: none;
              }
            }
          }
          opacity: 0;
          position: absolute;
          background-color: #F7FBFF;
          margin-bottom: 15px !important;
          border-radius: 100px;
          padding: 15px 30px;
          &:checked {
            + {
              span {
                display: block;
                border: 2px solid #EA6024;
                background-color: #FFFAF8;
                color: #EA6024;
                border-radius: 100px;
                padding: 15px 30px;
                &:before {
                  display: none;
                }
              }
            }
          }
        }
      }