.radio {
  position: relative;
  display: inline-flex;
}
.radio__input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.radio__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 450;
  font-size: 14px;
  line-height: 1.57143;
  color: #6C789C;
  cursor: pointer;
  user-select: none;
  padding: 9px 16px;
  border-radius: 10px;
  background: #F6F8FE;
  border: 1px solid transparent;
  transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.radio__label:hover {
  border-color: #F6F8FE;
  color: #303030;
}
.radio__input:checked + .radio__label, .radio__input:checked + .radio__label:hover {
  border-color: #6C789C;
  color: #3F4162;
}