/**
 * forms-checkbox.css
 * 
 * Styling for checkbox and radio elements.
 * 
 * Index
 * 
 * - Checkbox and Radio Styling and Layout
 * - Labels
 * 
 */

/*-----------------------------------------------------------------------
# Checkbox and Radio Styling and Layout
------------------------------------------------------------------------*/

.checkbox-element,
.radio-element {
  position: relative;
}

.checkbox-element:not(:last-of-type),
.radio-element:not(:last-of-type) {
  margin-bottom: 30px;
}

.checkbox-element input[type="checkbox"],
.radio-element input[type="radio"] {
  left: -99999px;
  opacity: 0;
  position: absolute;
}

/*-----------------------------------------------------------------------
# Labels
------------------------------------------------------------------------*/

.checkbox-element label,
.radio-element label {
  cursor: pointer;
  font-size: 1rem;
  line-height: 24px;
  padding-left: 35px;
  vertical-align: middle;
}
.checkbox-element label::before,
.radio-element label::before {
  background: #FFFFFF;
  border: 2px solid rgba(35, 117, 183, 0.6);
  content: '';
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}
.checkbox-element input[type="checkbox"]:focus + label::before,
.checkbox-element input[type="checkbox"].focus + label::before,
.radio-element input[type="radio"]:focus + label::before,
.radio-element input[type="radio"].focus + label::before {
  -webkit-box-shadow: 0 0 8px #2375BB;
  -moz-box-shadow: 0 0 8px #2375BB;
          box-shadow: 0 0 8px #2375BB;
  outline: none;
}
.checkbox-element label::before {
    border-radius: 4px;
}
.checkbox-element input[type="checkbox"]:checked + label::before,
.checkbox-element input[type="checkbox"][checked="checked"] + label::before {
    background: url(../../../img/icons/check.png) center center no-repeat;
}
.radio-element label::before {
    border-radius: 12px;
}
.radio-element input[type="radio"]:checked + label::before,
.radio-element input[type="radio"][checked="checked"] + label::before {
    background: url(../../../img/icons/radio-selected.png) center center no-repeat;
}