Checkbox/Radio elements

<label class="checkbox">
  <input class="checkbox__input" type="checkbox" disabled />
  <div class="checkbox__squre">
    <svg
      class="checkbox__mark"
      width="15"
      height="13"
      viewBox="0 0 15 13"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1.5 7.5L5 11L13 2"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
  <span class="checkbox__text">Disabled</span>
</label>

<label class="radio">
  <input class="radio__input" type="radio" name="name1" />
  <div class="radio__round">
    <div class="radio__mark"></div>
  </div>
  <span class="radio__text">Default</span>
</label> 
.checkbox__input:focus ~ .checkbox__text {
  text-decoration: underline;
}
.checkbox__input:checked ~ .checkbox__squre {
  background-color: var(--primary);
}
.checkbox__input:disabled ~ .checkbox__squre {
  background-color: var(--grey-2);
}

.checkbox__input:disabled ~ .checkbox__text,
.checkbox__input:disabled ~ .checkbox__squre .checkbox__mark {
  color: var(--grey-2);
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  left: -200px;
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.checkbox__squre {
  background-color: var(--white);
  width: 28px;
  height: 28px;
  border: 1px solid var(--grey-2);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkbox__mark {
  color: var(--white);
}
.checkbox__text {
  color: var(--grey-4);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
 /* RADIO */ .radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.radio__input {
  position: absolute;
  opacity: 0;
  left: -100vw;
}

.radio__round {
  box-sizing: border-box;

  background-color: var(--white);
  width: 28px;
  height: 28px;
  border: 1px solid var(--grey-2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.radio__mark {
  background-color: var(--white);

  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.radio__text {
  color: var(--grey-4);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

/* :focus */
.radio__input:focus ~ .radio__text {
  text-decoration: underline;
}

/* :checked */
.radio__input:checked ~ .radio__round {
  border: 2px solid var(--primary);
}
.radio__input:checked ~ .radio__round .radio__mark {
  background-color: var(--primary);
}

/* :disabled */
.radio__input:disabled ~ .radio__round {
  border: 2px solid var(--grey-2);
  background: var(--white);
}
.radio__input:disabled ~ .radio__text {
  color: var(--grey-2);
}
.radio__input:disabled ~ .radio__round .radio__mark {
  background-color: var(--grey-2);
}
.radio__input:disabled:not(.radio__input:checked) ~ .radio__round {
  background: var(--grey-2);
}