body {
	
	padding: 20px 20px;
	color: var(--text);
}

section {
	
	border-bottom: 1px solid var(--dividers);
	padding-bottom: 10px;
	margin-bottom: 10px;
	
	&:last-of-type { border-bottom: 0; }
	
	div {
		
		padding-bottom: 10px;
		
		> label:not(.switch) {
			
			display: block;
			float: left;
			width: 158px;
			text-align: right;
			font-size: 13px;
			line-height: 20px;
			font-weight: 400;
			padding-right: 10px;
			
			&::after { content: ':'; }
			
			&.empty::after { content: ''; }
		}
		
		ul {
			
			margin-left: 158px;
		}
		
		select,
		input[type="range"] {
			
			appearance: none;
			background-color: transparent;
			display: block;
			width: calc(100% - 160px);
			font-size: 13.5px;
		}
		
		input[type="range"] {
			
			background-image: var(--datalist);
			background-repeat: no-repeat;
			background-position: right 7px top;
		}
		
		input[type=range]::-webkit-slider-thumb {
			
			appearance: none;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			margin-top: -5px;
			background-image: linear-gradient(to bottom, #f8f8f8, #ececec);
			border: 1px solid #a8a8a8;
		}
		
		input[type=range]::-webkit-slider-runnable-track {
			
			height: 5px;
			border-radius: 2px;
			background: var(--accent-light);
			box-shadow: inset 0 2px 0 var(--accent);
		}
		
		input[type="range"]:focus {
			
			outline: none;
			
			&::-webkit-slider-thumb {
				
				border-color: var(--accent);
				box-shadow: 0 0 3px 2px var(--accent-light);
			}
		}
		
		.select-container { position: relative; }
		
		select {
			
			appearance: none;
			height: 22px;
			padding: 0 6px;
			font-size: 12px;
			background: var(--select);
			border: 1px solid var(--select-border);
			color: var(--input-color);
			border-radius: 3px;
			
			&:focus {
				
				outline: none;
				border-color: var(--accent);
				box-shadow: 0 0 3px 2px var(--accent-light);
			}
			
			& + svg {
				
				pointer-events: none;
				
				position: absolute;
				top: 0;
				right: 2px;
				
				.select-back { fill: url(#light-gradient); }
				.select-border-dark { opacity: 0; }
			}
		}
		
		datalist {
			
			display: flex;
			justify-content: space-between;
			margin-left: 160px;
			
			option {
				
				line-height: 20px;
				font-size: 20px;
				
				&:first-of-type { font-size: 10px; }
			}
		}
		
		label.radio {
			
			display: flex;
			justify-content: flex-start;
			align-items: center;
			min-height: 20px;
		}
		
		input[type="radio"] {
			
			appearance: none;
			margin: 0 6px 0 0;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			
			& + svg {
				
				position: absolute;
				
				.radio-back { fill: #fff; }
				.radio-border-light { fill: rgba(0,0,0,.3); }
				.radio-border-dark { fill: transparent; }
				.radio-checked { opacity: 0; }
			}
			
			&:checked + svg {
				
				.radio-back { fill: var(--accent-light); }
				.radio-border-light { fill: var(--accent-dark) }
				.radio-checked { opacity: 1; }
			}
			
			&:focus {
				
				outline: none;
				border-color: var(--accent);
				box-shadow: 0 0 3px 2px var(--accent-light);
			}
		}
		
		.switch {
			
			position: relative;
			display: inline-block;
			width: 40px;
			height: 18px;
			
			&+ label {
				
				display: inline;
				float: none;
				padding: 0 0 0 2px;
				font-size: 11px;
				
				&::after { content: ''; }
			}
		}
		
		.switch input {
			
			opacity: 0;
			width: 0;
			height: 0;
		}
		
		.slider {
			
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ccc;
			border-radius: 18px;
			transition: .25s;
		}
			
		.slider:before {
			
			position: absolute;
			content: "";
			height: 14px;
			width: 14px;
			left: 2px;
			bottom: 2px;
			background-color: white;
			border-radius: 50%;
			transition: .25s;
		}
		
		input:checked + .slider {
			
			background-color: var(--accent-light);
			box-shadow: inset 0 2px 0 var(--accent);
		}
			
		input:focus + .slider {
			
			border-color: var(--accent);
			box-shadow: 0 0 3px 2px var(--accent-light);
		}
			
		input:checked + .slider:before { transform: translateX(21px); }
		
		li {
			
			label { font-size: 13px; }
		}
	}
}


[data-theme="dark"] {
	
	section {
		
		div {
			
			select {
				
				border-left: 0;
				border-right: 0;
				border-bottom: 0;
				
				& + svg {
					
					.select-back { fill: var(--accent); }
					.select-border-light { opacity: 0; }
					.select-border-dark { opacity: 1; }
				}
			}
			
			input[type=range]::-webkit-slider-runnable-track {
				
				background: var(--accent);
				box-shadow: inset 0 2px 0 var(--accent-dark);
			}
			
			input:checked + .slider {
				
				background-color: var(--accent);
				box-shadow: inset 0 2px 0 var(--accent-dark);
			}
			
			input:focus + .slider {
				
				border-color: var(--accent);
				box-shadow: 0 0 3px 2px var(--accent-light);
			}
			
			input[type="radio"] {
				
				& + svg {
					
					.radio-back {
						
						fill: url(#dark-back);
					}
					.radio-border-light { fill: transparent; }
					.radio-border-dark { fill: rgba(255,255,255,.3); }
				}
				
				&:checked + svg {
					
					.radio-back { fill: var(--accent); }
					.radio-border-light { fill: transparent; }
				}
			}
			
			.switch	{
				
				.slider {
					
					background-color: transparent;
					background-image: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.28));
				}
			}
			
			input:checked+.slider { background-image: none; }
		}
	}
}
