* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: var(--primary-color-5-opacity);
	--fg: var(--p-color);
	--primary: var(--primary-color);
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
}

input[type="radio"], 
input[type="checkbox"],
input, select  {
	color: var(--p-color);
	font-size: var(--p-font-size);
    line-height: var(--p-line-height);
    font-family: var(--p-font-family);
}

main {
	margin: auto;
	padding: 1.5rem 0;
	width: 100%;
}
form {
	margin: auto;
	max-width: 76em;
	position: relative;
	width: calc(100% - 3em);
}

form.single-column {
    max-width: 25rem;
}

label,
input[type="radio"], 
input[type="checkbox"]  {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
label {
	background-color: hsla(0,0%,100%,0);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	padding: 1.5rem;
	transition: background-color var(--trans-dur);
    margin-bottom: var(--rem-05);
	font-size: var(--p-font-size);
    line-height: var(--p-line-height);
    font-family: var(--p-font-family);
    font-weight: var(--font-medium-weight);
}

label.select {
    padding-bottom: .5rem;
}

input[type="radio"], 
input[type="checkbox"],
checkmark  {
	background-color: hsl(0,0%,100%);
	border-radius: 50%;
	box-shadow:
		0 0 0 0.0625em hsl(var(--hue),90%,80%),
		0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
	flex-shrink: 0;
	margin-inline-end: 1em;
	outline: transparent;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	transition:
		background-color var(--trans-dur),
		box-shadow var(--trans-dur);
	-webkit-appearance: none;
	appearance: none;
}
input[type="radio"]:before,
input[type="radio"]:after, 
input[type="checkbox"]:before, 
input[type="checkbox"]:after,
checkmark:after,checkmark:before {
	content: "";
	display: block;
	position: absolute;
	transform: scale(0);
	transition: transform var(--trans-dur) var(--trans-timing);
}
input[type="radio"]:before, 
input[type="checkbox"]:before,
checkmark:before  {
	border-radius: 50%;
	box-shadow:
		0 0 0 0.5em var(--primary) inset,
		0 0 0 0.0625em var(--primary);
	top: -0.0625em;
	left: -0.0625em;
	width: calc(100% + 0.125em);
	height: calc(100% + 0.125em);
}
input[type="radio"]:after {
	border-radius: 50%;
	background-color: hsl(0,0%,100%);
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
}

input[type="checkbox"]:after, checkmark:after {
    background-color: transparent;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
    border-radius: 4px;
    top: 19%;
    left: 34%;
    width: 20%;
    height: 40%;
    transform: scale(0) rotate(0deg)
}
input[type="radio"]:checked:before,
input[type="radio"]:checked:after,
input[type="checkbox"]:checked:before,
checkmark:before, checkmark.after {
	transform: scale(1);
}

input[type="checkbox"]:checked:after,
checkmark:after {
    background-color: transparent;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
    border-radius: 4px;
    top: 19%;
    left: 34%;
    width: 20%;
    height: 40%;
    transform: scale(1) rotate(45deg);
}
label:has(input[type="radio"]:checked),
label:has(input[type="radio"]:not(:checked)):hover, 
label:has(input[type="checkbox"]:checked),
label:has(input[type="checkbox"]:not(:checked)):hover {
	background-color: var(--primary-color-10-opacity);
    color: var(--primary-color);
}
.selection {
	border-radius: var(--border-radius);
	box-shadow: 0 0 0 0.125em var(--primary) inset;
	display: none;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4.5rem;
	transition: transform var(--trans-dur) var(--trans-timing);
}
label:has(input[type="radio"]:checked) ~ .selection {
	animation: fade-in var(--trans-dur) var(--trans-timing);
	display: inherit;
}
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(calc(100% + 0.5rem));
}
label:nth-of-type(3):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(calc(200% + 2 * 0.5rem));
}
label:nth-of-type(4):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(calc(300% + 3 * 0.5rem));
}
label:nth-of-type(5):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(calc(400% + 4 * 0.5rem));
}
label:nth-of-type(6):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(calc(500% + 5 * 0.5rem));
}
label:nth-of-type(7):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(calc(600% + 6 * 0.5rem));
}
label:nth-of-type(8):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(calc(700% + 7 * 0.5rem));
}
.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    font-family: var(--p-font-family);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,90%);
	}
	label {
		background-color: hsla(var(--hue),90%,30%,0);
	}
	label:has(input[type="radio"]:checked),
	label:has(input[type="radio"]:not(:checked)):hover,
	label:has(input[type="checkbox"]:checked),
	label:has(input[type="checkbox"]:not(:checked)):hover {
		background-color: var(--primary-color-10-opacity);
        color: var(--primary-color);
	}
	input[type="radio"], 
    input[type="checkbox"],
	checkmark {
		background-color: var(--primary-color);
		box-shadow:
			0 0 0 0.0625em var(--primary-color),
			0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
	}
}

checkmark.reverseColor {
	background-color: transparent;
}

checkmark.reverseColor::after {
	border-color: var(--border-radius);
}

/* Animations */
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/*STYLE THE SELECT DROPDOWNS*/
.selectWrapper {
    position: relative;
    width: 100%;
  }
  .selectWrapper::after {
    color: var(--p-color);
    content: "";
    border-bottom: var(--border-outline);
    border-left: var(--border-outline);
    width: 0.5rem;
    height: 0.5rem;
    transform: rotate(-45deg);
    margin-right: 1.5rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: 1.35rem;
    font-size: 1rem;
  }
  
  select.classicSelect {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(--primary-color-5-opacity);
    color: var(--primary-color);
    border: none;
	border-radius: var(--border-radius);
    cursor: pointer;
	padding: 0 1rem;
    width: 100%;
    font-size: 1rem;
    height:56px;
  }
  select.classicSelect:focus {
    color: black;
	box-shadow: 0 0 0 0.125em var(--primary) inset;
    outline:none;
    border: none;
  }
  select.classicSelect::-ms-expand {
    display: none;
  }