/**
 * Checkbox.
 *
 * Custom checkbox styles inspired by http://wtfforms.com/.
 */
.checkbox {
  margin: 1.5em 0 1em;
  min-height: none;
  padding-left: 0;

  & label {
    display: block;
    padding-left: 2em;
    position: relative;
  }
  & input {
    float: none;
    margin: 0;
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
  & .checkbox-indicator {
    background-color: var(--color-input-background);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70% 70%;
    border: thin solid var(--color-input-border);
    border-radius: var(--border-radius);
    display: block;
    height: 1.333em;
    position: absolute;
    top: .1em;
    transition: box-shadow var(--transition-duration);
    left: 0;
    width: 1.333em;
  }
  & input:active ~ .checkbox-indicator {
    background-color: var(--color-button-secondary-background);
  }
  & input:checked ~ .checkbox-indicator {
    background-color: var(--color-button-primary-background);
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
    border-color: var(--color-button-primary-background);
  }
  & input:focus ~ .checkbox-indicator {
    box-shadow: 0 0 0 .25em var(--color-active);
  }
}