label {
	max-width: 100%;
	width: auto;
	height: auto;
	line-height: 1.75rem;
	border: 0;
}

label[for] {
	/* Clickable stuff gets a pointer cursor... */
	cursor: pointer;
}

label > [type="checkbox"],
label > [type="radio"] {
	/* checkboxes nested inside labels */
	margin-right: 0.5rem;
	line-height: inherit;
}

* + label,
fieldset + input,
fieldset + fieldset {
	margin-top: 2rem;
}

.hidden + label {
	margin-top: 0;
}


/*
.radio-label

Markup: <input type="radio" class="masked" id="radio-1" />
<label class="radio-label" for="radio-1">Yes, choose me!</label>

Styleguide: 3.radio-label
*/

/*
.checkbox-label

Markup: <input type="checkbox" class="masked" id="checkbox-1" />
<label class="checkbox-label" for="checkbox-1">Yes, choose me!</label>

Styleguide: 3.checkbox-label
*/

.radio-label,
.checkbox-label {
	position: relative;
	padding-left: 2.25rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	min-height: 2.5rem;
	text-align: left;
}

.right-label {
	padding-left: 0;
	padding-right: 3rem;
}

.radio-label > input,
.checkbox-label > input {
	position: absolute;
	top: 0;
	left: 0;
}

.right-label > input {
	left: auto;
	right: 0;
}

.dialog > .radio-label,
.dialog > .checkbox-label {
	display: block;
}

.radio-label::before,
.radio-label::after,
.checkbox-label::before,
.checkbox-label::after {
	content: '';
	position: absolute;
	top: 0.5625rem;
	left: 0;
	margin-top: 0;
	width: 1.5rem;
	height: 1.5rem;
	box-sizing: border-box;
}

.right-label::before,
.right-label::after {
	left: auto;
	right: 0;
}

.radio-label::before,
.checkbox-label::before {
	background-color: white;
	border: 1px solid #cccccc;
}

.radio-label::before {
	border-radius: 1rem;
}

.checkbox-label::before,
.checkbox-label::after {
	border-radius: 0;
}

.radio-label::after,
.checkbox-label::after {
	display: none;
}

.masked[type="radio"]:checked + .radio-label::after,
.masked[type="checkbox"]:checked + .checkbox-label::after {
	display: block;
}

.radio-label::after {
	top: 0.9375rem;
	left: 0.375rem;
	width: 0.75rem;
	height: 0.75rem;
	background-color: currentcolor;
	border-radius: 0.375rem;
}

.checkbox-label::after {
	content: '✓';
	text-align: center;
}

.radio-label > input,
.checkbox-label > input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
}

.masked + .checkbox-label,
.masked + .radio-label {
    margin-top: 0;
}

/* .yes-radio-label
   .no-radio-label
*/

.yes-radio-label::before,
.no-radio-label::before {
	border-width: 0;
	background-color: #7B7B74;
}

.masked[type="radio"]:checked + .yes-radio-label::before,
.yes-radio-label:hover::before,
.yes-radio-label:focus::before {
	background-color: green;
	border-color: green;
}

.masked[type="radio"]:checked + .no-radio-label::before,
.no-radio-label:hover::before,
.no-radio-label:focus::before {
	background-color: #C22820;
	border-color: #C22820;
}

.yes-radio-label::after,
.no-radio-label::after {
	display: block;
	top: 0.375rem;
	left: 0;
	width: 2rem;
	height: 2rem;
	background-color: transparent;
	background-size: auto;
}

.yes-radio-label::after {
	background-position: 5px -394px;
}

.no-radio-label::after {
	background-position: 8px -432px;
}


/*
.error-label
*/

/*
.help-label
*/

.error-label {
	color: #d0153e;
}

.col-1 + .error-label, .col-1 + .help-label { grid-column-start: 1; }
.col-2 + .error-label, .col-2 + .help-label { grid-column-start: 2; }
.col-3 + .error-label, .col-3 + .help-label { grid-column-start: 3; }
.col-4 + .error-label, .col-4 + .help-label { grid-column-start: 4; }
.col-5 + .error-label, .col-5 + .help-label { grid-column-start: 5; }
.col-6 + .error-label, .col-6 + .help-label { grid-column-start: 6; }
.col-7 + .error-label, .col-7 + .help-label { grid-column-start: 7; }
.col-8 + .error-label, .col-8 + .help-label { grid-column-start: 8; }
.col-9 + .error-label, .col-9 + .help-label { grid-column-start: 9; }

.span-1 + .error-label, .span-1 + .help-label { grid-column-end: span 1; }
.span-2 + .error-label, .span-2 + .help-label { grid-column-end: span 2; }
.span-3 + .error-label, .span-3 + .help-label { grid-column-end: span 3; }
.span-4 + .error-label, .span-4 + .help-label { grid-column-end: span 4; }
.span-5 + .error-label, .span-5 + .help-label { grid-column-end: span 5; }
.span-6 + .error-label, .span-6 + .help-label { grid-column-end: span 6; }
.span-7 + .error-label, .span-7 + .help-label { grid-column-end: span 7; }
.span-8 + .error-label, .span-8 + .help-label { grid-column-end: span 8; }
.span-9 + .error-label, .span-9 + .help-label { grid-column-end: span 9; }

.row-1  + .error-label, .row-1  + .help-label { grid-row-start: 1; }
.row-2  + .error-label, .row-2  + .help-label { grid-row-start: 2; }
.row-3  + .error-label, .row-3  + .help-label { grid-row-start: 3; }
.row-4  + .error-label, .row-4  + .help-label { grid-row-start: 4; }
.row-5  + .error-label, .row-5  + .help-label { grid-row-start: 5; }
.row-6  + .error-label, .row-6  + .help-label { grid-row-start: 6; }
.row-7  + .error-label, .row-7  + .help-label { grid-row-start: 7; }
.row-8  + .error-label, .row-8  + .help-label { grid-row-start: 8; }
.row-9  + .error-label, .row-9  + .help-label { grid-row-start: 9; }
.row-10 + .error-label, .row-10 + .help-label { grid-row-start: 10; }
.row-11 + .error-label, .row-11 + .help-label { grid-row-start: 11; }
.row-12 + .error-label, .row-12 + .help-label { grid-row-start: 12; }
.row-13 + .error-label, .row-13 + .help-label { grid-row-start: 13; }
.row-14 + .error-label, .row-14 + .help-label { grid-row-start: 14; }
.row-15 + .error-label, .row-15 + .help-label { grid-row-start: 15; }
.row-16 + .error-label, .row-16 + .help-label { grid-row-start: 16; }