/*
 * 26 April 2023
 * CSS Radio Group with Subtle Animation
 * tested on Firefox v112.0.1/x64 and Chrome v114.0.5720.4-dev/x64
 */

/* === make your customizations here === */
:root {
	--outline-focus: 2px solid;
	--outline-offset: 0.875rem;
}

.radio-group {
	--offset-radio-box: -0.25rem;
	--size-radio-box: 1.5rem;
	--gap-radio-text: 0.75rem;
	--opacity-radio: 0.75;
	--spacing-radio: 0.8rem;
	--spacing-heading: 1.25rem;
	--size-font: 1rem;
	--size-font-heading: 1.5rem;
	--duration-radio: 200ms;
	--delay-radio: 100ms;
}

.wrapper {
	gap: 4rem;
}

section {
	padding: 4rem 2rem;
}

.light-theme {
	color: hsl(250, 100%, 2.5%);
	--background: #fff;
	--color-heading: hsl(250, 100%, 2.5%);
	--color-radio: hsl(250, 100%, 2.5%);
	--color-radio-checked: hsl(239, 100%, 61%);
	--color-outline: rgba(0, 0, 0, 0.4);
}

.dark-theme {
	color: #fff;
	--background: #090b10;
	--color-heading: hsl(174, 42%, 65%);
	--color-radio: #fff;
	--color-radio-checked: hsl(174, 42%, 65%);
	--color-outline: #fff;
}

.dark-theme .heading {
	text-shadow: 0 0.125rem 0.625rem hsla(174, 42%, 65%, 0.3);
}

/* === presentation === */
html,
body {
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Comfortaa', Ubuntu, Arial, Helvetica, sans-serif;
	font-weight: 700;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

section {
	background-color: var(--background);
	display: grid;
	place-items: center;
}

.wrapper {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

section ::-moz-selection {
	background-color: var(--color-radio-checked);
	color: var(--background);
}

section ::selection {
	background-color: var(--color-radio-checked);
	color: var(--background);
}

fieldset,
legend,
label {
	all: unset;
	position: relative;
}

label,
legend {
	display: block;
}

/* === relevant portion === */
.heading {
	color: var(--color-heading);
	margin-bottom: var(--spacing-heading);
	font-size: var(--size-font-heading);
	line-height: 125%;
}

.radio {
	color: currentColor;
}

.radio-wrapper {
	font-size: 0;
}

.radio-wrapper input[type='radio'] {
	width: calc(var(--size-radio-box) + var(--gap-radio-text));
	height: calc(var(--size-radio-box) + var(--gap-radio-text));
}

.radio {
	font-size: var(--size-font);
	font-weight: inherit;
	opacity: var(--opacity-radio);
	transition: all ease var(--duration-radio) var(--delay-radio);
	position: relative;
	top: calc(var(--offset-radio-box) * -1);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	display: inline-flex;
	place-items: flex-start;
}

.radio:hover {
	opacity: 1;
}

.radio span {
	position: relative;
	top: var(--offset-radio-box, 0);
	min-width: var(--size-radio-box);
	min-height: var(--size-radio-box);
	margin-right: var(--gap-radio-text);
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
}

.radio span::before {
	top: 0;
	width: 100%;
	height: 100%;
	border: max(2px, var(--size-radio-box) * 0.1) solid var(--color, var(--color-radio));
	transition: all ease var(--duration-radio) var(--delay-radio);
}

.radio span::after {
	bottom: 0%;
	width: 50%;
	height: 50%;
	background-color: var(--color, var(--color-radio));
	transform: translate(-50%, 50%);
	transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) var(--duration-radio) var(--delay-radio);
}

.radio span::before,
.radio span::after {
	content: '';
	position: absolute;
	left: 0%;
	border-radius: 50%;
	display: block;
}

.radio-wrapper input:checked ~ .radio span::after {
	left: 50%;
	bottom: 50%;
}

.radio-wrapper input:checked ~ .radio {
	--color: var(--color-radio-checked);
	opacity: 1;
}

.radio::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateY(var(--offset-radio-box));
	width: calc(100% + var(--outline-offset));
	height: calc(100% + var(--outline-offset));
	border: var(--outline-focus);
	border-color: var(--color-outline);
	border-radius: 3px;
	opacity: 0;
}

.radio-wrapper input:focus-visible ~ .radio::before {
	opacity: 1;
}

.radio-group .radio-wrapper {
	margin-bottom: var(--spacing-radio);
}

.radio-group .radio-wrapper:last-of-type {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.radio span::after {
		transition: none;
	}
}

/* === reset === */
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	position: relative;
}

.radio-wrapper input {
	position: absolute;
	left: 0;
	top: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
	clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
	opacity: 0.2;
}