_radio-checkbox.scss

// Radios & checkboxes
//
// Part of any good form.

$radio-check-size: 12px;

// Some shared styling for checkboxes & radios
//input[type=radio], input[type=checkbox] {
.radio, .checkbox {
     -moz-user-select: none;
  -webkit-user-select: none;
   -webkit-appearance: none;
      -moz-appearance: none;
  vertical-align: -1px;
  padding: 0;
  margin: 0; // reset
  font-size: 100%;
  outline: none;
  //background-image: linear-gradient(transparent, var(--color-shadow-2));
  border: 1px solid var(--color, var(--color-prime-3));
  //box-shadow: 0 0 0 var(--space-px) var(--color, var(--color-prime-2));
  //background-color: transparent; // iOS reset
  background-color: var(--color, var(--color-prime-1));
  outline: none;
  width:  $radio-check-size;
  height: $radio-check-size;
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: box-shadow .4s;
  border-radius: 0;// ios7 reset 

  align-self: center; // opinionated smart default for checkboxed within flex rows
  &:focus {
    background-color: var(--color, var(--color-accent-2));
    border-color: var(--color, var(--color-accent-4));
  }
  &:disabled {
    border: 1px solid var(--color, var(--color-main-4));
    background-color: var(--color, var(--color-main-1));
    cursor: not-allowed;
  }
  &:disabled:hover {
    background-color: var(--color, var(--color-main-1)) !important;
  }
  &:disabled::after, &:disabled::before {
    background-color: var(--color, var(--color-main-4));
    border-color: var(--color, var(--color-main-4));
  }
  &:after, &:before {
    content: '';
    position: absolute;
    background-color: var(--color, var(--color-main-7));
  }
}

//input[type=radio] {
.radio {
  border-radius: 50%;
  &:after {
    //border: 1px solid var(--color, var(--color-main-7));
    border-radius: 50%;
    width:  6px;
    height: 6px;
    top:  50%;
    left: 50%;
    transform: scale(0) translateX(-50%) translateY(-50%);
    transform-origin: 0% 0%;
  }
  &:checked:after {
    transform: scale(1) translateX(-50%) translateY(-50%);
  }
}

// pseudo real checkboxes with a checkmark
//input[type=checkbox] {
.checkbox {
  position: relative;
  border-radius: var(--space-px);
  &:before, &:after {
    width:  3px;
    height: 6px;
    top:  0;
    left: 0;
  }
  // left part
  &:after {
    transform: scale(0) translateX(2px) translateY(2px)  rotate(-45deg);
  }
  // right part
  &:before {
    transform: scale(0) translateX(7px) translateY(-5px) rotate(45deg);
    transform-origin: 2px 7px;
    height: 14px;
  }
  &:checked {
    &:after  { transform: scale(1) translateX(2px) translateY(2px)  rotate(-45deg); }
    &:before { transform: scale(1) translateX(7px) translateY(-5px) rotate(45deg); }
  }
}

.active {
  .radio, .checkbox {
    background-image: linear-gradient(var(--color-highlight-3), var(--color-highlight-1));
    border-color: var(--color-main-1);
    &:after, &:before {
      background-color: var(--color-main-1);
    }
    &:focus {
      box-shadow: 0 0 0 var(--space-px) var(--color-main-1);
    }
  }
}