<div class="container">
  <div class="wrapper">
    <form action="/" class="form form__checkbox-radio">
      <h3 class="form__title">Custom Chekckbox / Radio Buttons</h3>
      <div class="form__col">
        <p class="form__subtitle">Custom Checkbox Buttons</p>
        <div class="checkbox-tabs">
          <label class="checkbox-tabs__field">
            <input type="checkbox" name="checkbox-tabs" value="Women" class="checkbox-tabs__input" checked>
            <span class="checkbox-tabs__text">Women</span>
          </label>
          <label class="checkbox-tabs__field">
            <input type="checkbox" name="checkbox-tabs" value="Men" class="checkbox-tabs__input">
            <span class="checkbox-tabs__text">Men</span>
          </label>
          <label class="checkbox-tabs__field">
            <input type="checkbox" name="checkbox-tabs" value="Girls" class="checkbox-tabs__input">
            <span class="checkbox-tabs__text">Girls</span>
          </label>
          <label class="checkbox-tabs__field">
            <input type="checkbox" name="checkbox-tabs" value="Boys" class="checkbox-tabs__input">
            <span class="checkbox-tabs__text">Boys</span>
          </label>
        </div>
      </div>
      <div class="form__col">
        <p class="form__subtitle">Custom Radio Buttons</p>
        <div class="radio-tabs">
          <label class="radio-tabs__field">
            <input type="radio" name="radio-tabs" value="Women" class="radio-tabs__input">
            <span class="radio-tabs__text">Women</span>
          </label>
          <label class="radio-tabs__field">
            <input type="radio" name="radio-tabs" value="Men" class="radio-tabs__input" checked>
            <span class="radio-tabs__text">Men</span>
          </label>
          <label class="radio-tabs__field">
            <input type="radio" name="radio-tabs" value="Girls" class="radio-tabs__input">
            <span class="radio-tabs__text">Girls</span>
          </label>
          <label class="radio-tabs__field">
            <input type="radio" name="radio-tabs" value="Boys" class="radio-tabs__input">
            <span class="radio-tabs__text">Boys</span>
          </label>
        </div>
      </div>
    </form>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  --color-white: #ffffff;
  --color-primary: #17696A;
  
  --color-grey-900: #1E212C;
  --color-grey-800: #424551;
  --color-grey-700: #787A80;
  --color-grey-600: #9A9CA5;
  --color-grey-500: #B3B7BC;
  --color-grey-400: #D7DADD;
  --color-grey-300: #E5E8ED;
  --color-grey-200: #F4F5F6;
  --color-grey-100: #F9F9F9;
}

html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

svg {
  display: block;
  object-fit: cover;
  fill: currentcolor;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

figure {
  margin: 0;
}

article {
  margin: 0;
}

.address {
  font-style: normal;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1260px;
  // overflow:hidden;
}

.btn-reset {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

input {
  border: 0;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.input-reset {
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  background-color: #fff;

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    display: none;
  }
}

.wrapper {
  box-shadow: 4px 8px 40px rgba(8, 24, 111, 0.2);
  border-radius: 30px;
  width: 700px;
  height: 435px;
  padding: 40px
}

.form {
  &__title {
    margin-bottom: 60px;
    font-weight: 900;
    font-size: 32px;
    line-height: 130%;
    color: #1E212C;
  }
  
  &__col {
    &:not(:last-child) {
      margin-bottom: 40px;
    }
  }
  
  &__subtitle {
    margin-bottom: 32px;
    font-weight: 900;
    font-size: 20px;
    line-height: 150%;
    color: #787A80;
  }
}

.checkbox-tabs {
  position: relative;
  display: flex;

  &__field {
    cursor: pointer;
    user-select: none; //grey-400
    padding: 0;

    &:not(:last-child) {
      margin-right: 12px;
    }
  }
  


  &__input {
    position: absolute;
    appearance: none;
    
    &:checked {
      border: 0;
    }
    
    &:checked + .checkbox-tabs__text {
      background: #17696A; // primaery color
      border-radius: 4px;
      color: #fff;      
    }
  }

  &__text {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    border-radius: 4px;
    border: 1px solid #D7DADD;
    color: #787A80; // grey-700
    user-select: none;
  }
}

label {
  padding: 0;
}

.radio-tabs {
  position: relative;
  display: flex;

  &__field {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #D7DADD; // grey-400


    &:not(:last-child) {
      margin-right: 12px;
    }
  }

  &__input {
    position: absolute;
    appearance: none;

    &:checked + .radio-tabs__text {
      background-color: #17696A; // color primary
      color: #fff;
    }
  }

  &__text {
    display: inline-block;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    color: #787A80; // grey-700
    user-select: none;
  }
  
  
  
}