/* ----------------------------------
 * CHECKBOXES / RADIOS
 * ---------------------------------- */

label.pack-checkbox,
label.pack-radio,
label.pack-switch {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  height: 5rem;
  position: relative;
  background: none;
}

label.pack-checkbox input,
label.pack-radio input,
label.pack-switch input {
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

label.pack-checkbox input + span,
label.pack-radio input + span {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1rem 0 0 -1rem;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  -moz-box-sizing: border-box;
  border: 0.2rem solid #00caf2;
  background: #fff;
}

label.pack-radio input + span {
  margin: -1.1rem 0 0 -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 1.1rem;
}

label.pack-checkbox input + span {
  border-radius: 0.4rem;
}

label.pack-checkbox input:checked + span {
  background: #00caf2;
}

label.pack-checkbox input:checked + span:before {
  top: 0;
  left: -0.8rem;
  position: absolute;
  content: "d";
  width: 2rem;
  font-size: 3rem;
  height: 2rem;
  line-height: 2rem;
  color: #fff;
  font-family: "whatev";
  -moz-osx-font-smoothing: grayscale;
}

label.pack-radio input + span:before {
  position: absolute;
  content: "";
  top: 0.4rem;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.4rem;
  background: #fff;
  border-radius: 0.5rem;
}

label.pack-radio input:checked + span:before {
  background: #00caf2;
}

/* 'Dangerous' switches */
label.pack-checkbox.danger input + span,
label.pack-radio.danger input + span {
  border-color: #b91800;
}

label.pack-checkbox.danger input:checked + span {
  background: #b91800;
}

label.pack-radio.danger input:checked + span:before {
  background: #b91800;
}

/* ----------------------------------
 * ON/OFF SWITCHES
 * ---------------------------------- */

label.pack-switch input + span {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1rem 0 0 -1.9rem;
  width: 3.8rem;
  height: 2rem;
  pointer-events: none;
  border-radius: 1.1rem;
  border: 0.1rem solid #dfdfdf;
  overflow: hidden;
  background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNjBweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgNjAgMTgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjMwIiBmaWxsPSIjRUNFQUU5IiB3aWR0aD0iMzAiIGhlaWdodD0iMTgiLz48cmVjdCB4PSIwIiBmaWxsPSIjRjI2NzM5IiB3aWR0aD0iMzAiIGhlaWdodD0iMTgiLz48Y2lyY2xlIGZpbGw9IiNFQ0VBRTkiIGN4PSIzMCIgY3k9IjkiIHI9IjkuNSIvPjxjaXJjbGUgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSIzMCIgY3k9IjkiIHI9IjguNSIvPjwvc3ZnPg==) no-repeat -2.1rem 0 / 6rem 1.8rem;
  transition: background 0.2s ease, border 0.2s ease;
  -moz-box-sizing: border-box;
}

/* switch: 'ON' state */
label.pack-switch input:checked + span {
  background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNjBweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgNjAgMTgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjMwIiBmaWxsPSIjRUNFQUU5IiB3aWR0aD0iMzAiIGhlaWdodD0iMTgiLz48cmVjdCBmaWxsPSIjRjI2NzM5IiB3aWR0aD0iMzAiIGhlaWdodD0iMTgiLz48Y2lyY2xlIGZpbGw9IiNGMjY3MzkiIGN4PSIzMCIgY3k9IjkiIHI9IjkuNSIvPjxjaXJjbGUgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjNjg2ODY4IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSIzMCIgY3k9IjkiIHI9IjguNSIvPjwvc3ZnPg==) no-repeat -0.3rem 0 / 6rem 1.8rem;
  border-color: #f26739;
}

/* disabled state */
label.pack-checkbox input:disabled + span,
label.pack-radio input:disabled + span,
label.pack-switch input:disabled + span {
  opacity: 0.4;
}

label.pack-switch input.uninit + span {
  transition: none;
}