/* fancy checkboxes - move label after input in html
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
  }
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
  }

  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 1.1em;
    height: 1.1em;
    border: 1px solid var(--dark-color);
    background: white;
    border-radius: .2em;
  }

  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after {
    content: '\2714';
    position: absolute;
    top: .71em;
    left: .18em;
    color: var(--medium-dark-color);
    background-color: var(--light-color);
    line-height: 0;
  }

  [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
  }

  [type="checkbox"]:checked + label:after {
    opacity: 1;
  }
  */

  /**
 * Add box sizing to everything
 * @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	font-size: 112.5%
}

label:has([role="switch"]) {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

[role="switch"] {
	--height: 1.1875em;
	--width: 0.8;

	appearance: none;
	background-color: var(--grayed-light-color);
	height: var(--height);
	width: calc(var(--height) * calc(1 + var(--width)));
	border: 0;
	border-radius: 99em;
	display: inline-block;
}

/* The toggle */
[role="switch"]::after {
	content: "";
	display: block;
	aspect-ratio: 1;
	background-color: var(--almost-white) !important;
	border: max(2px, 0.125em) solid var(--dark-color);
	height: 100%;
	border-radius: 50%;
}

/* on/off state */
[role="switch"]:checked {
	background-color: var(--dark-color);
}

[role="switch"]:checked::after {
	border-color: var(--dark-color) !important;
    translate: calc(var(--height) * var(--width)) 0;
}

[role="switch"]:focus {
  color: var(--almost-white) !important;
  border-color: var(--almost-white) !important;
  outline: 0 !important;
  box-shadow: 0 !important;
}