.radio-button {

line-height: 44px;
input[type=radio] {
  display: none;
}
input[type=radio]:checked + label:before {
  background-color: $base-color;
  border-color: $base-color;
  background-image: asset-data-url('svg/check.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
}
label {
  cursor: pointer;
  margin-right: 1em;
  padding-left: 1.75em;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    left: 0;
    top: 0;
    border-radius: 2px;
  }
  &:hover {
    &:before {
      border-color: $base-color;
    }
  }
}

}

.checkbox-button {

line-height: 44px;
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + label:before {
  background-color: $base-color;
  border-color: $base-color;
  background-image: asset-data-url('svg/check.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
}
label {
  cursor: pointer;
  margin-right: 1em;
  padding-left: 1.75em;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    left: 0;
    top: 0;
    border-radius: 2px;
  }
  &:hover {
    &:before {
      border-color: $base-color;
    }
  }
}

}