<!--
Slider Scaling Options, comment/uncomment the desired opening tag
Cover: Fill parent element
Fixed: Predefined width and height, 600x400 for demo
Propotional: Scales to match parent width; options for 4x3, 5x4, and 16x9, and 1.35x1
-->
<div class="slider slider--cover">
<!-- <div class="slider slider--fixed"> -->
<!-- <div class="slider slider--proportional slider--proportional-16x9"> -->
	<div class="slider__inner">
		<input checked type="radio" name="slider__radiobox" id="slider__radiobox--1" class="slider__radiobox slider__radiobox--1"><label for="slider__radiobox--1" class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item-1"></label><label for="slider__radiobox--4" class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev-4"></label><label for="slider__radiobox--2" class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next-2"></label>
		<input         type="radio" name="slider__radiobox" id="slider__radiobox--2" class="slider__radiobox slider__radiobox--2"><label for="slider__radiobox--2" class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item-2"></label><label for="slider__radiobox--1" class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev-1"></label><label for="slider__radiobox--3" class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next-3"></label>
		<input         type="radio" name="slider__radiobox" id="slider__radiobox--3" class="slider__radiobox slider__radiobox--3"><label for="slider__radiobox--3" class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item-3"></label><label for="slider__radiobox--2" class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev-2"></label><label for="slider__radiobox--4" class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next-4"></label>
		<input         type="radio" name="slider__radiobox" id="slider__radiobox--4" class="slider__radiobox slider__radiobox--4"><label for="slider__radiobox--4" class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item-4"></label><label for="slider__radiobox--3" class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev-3"></label><label for="slider__radiobox--1" class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next-1"></label>
		<div class="slider__slides">
			<div class="slider__slide slider__slide--1"><img alt="Placeholder 940x470" src="https://via.placeholder.com/940x470?text=940x470"></div>
			<div class="slider__slide slider__slide--2"><img alt="Placeholder 1200x600" src="https://via.placeholder.com/1200x600?text=1200x600"></div>
			<div class="slider__slide slider__slide--3"><img alt="Placeholder 300x150" src="https://via.placeholder.com/300x150?text=300x150"></div>
			<div class="slider__slide slider__slide--4"><img alt="Placeholder 800x400" src="https://via.placeholder.com/800x400?text=800x400"></div>
		</div>
	</div>
</section>

/** base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/** slider */

.slider {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;

	&:hover {

		.slider__radiobox-label--prev,
		.slider__radiobox-label--next {
			opacity: 1;
		}

		.slider__radiobox-label--prev { left:  6%; }
		.slider__radiobox-label--next { right: 6%; }
	}
	
	&--cover {
		width: 100vw;
		height: 100vh;
	}

	&--fixed {
		width: 600px;
		height: 400px;
	}

	&--proportional {
		width: 100%;
		height: auto;
	}
}

.slider__inner {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	background: #ddd;
	
	.slider--cover & {
		width: 100%;
		height: 100%;
	}

	.slider--fixed & {
		width: 100%;
		height: 100%;
	}

	.slider--proportional & {
		width: 100%;
		height: 0;
	}

	.slider--proportional-4x3 & {  padding-top: (3 /  4 * 100%); } // 4:3  = 75%
	.slider--proportional-5x4 & {  padding-top: (4 /  5 * 100%); } // 5:4  = 80%
	.slider--proportional-16x9 & { padding-top: (9 / 16 * 100%); } // 16:9 = 56.25%
}

.slider__slides {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: (100% * 4);
	height: 100%;
	overflow-y: hidden;
	transition: margin-left 0.4s;
}

.slider__slide {
	display: block;
	float: left;
	position: relative;
	width: (100% / 4);
	height: 100%;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.slider__radiobox-label {
	display: block;
	position: absolute;
	z-index: 2;
	cursor: pointer;
	
	&:focus {
		background-color: red;
	}

	&--item {
		bottom: 6%;
		left: 50%;
		transform: translateX(-50%);
		padding: 6px;
		border: 6px solid transparent;
		border-radius: 50%;
		background: black;
		background-clip: padding-box;
		opacity: 0.3;
		transition: opacity 0.2s;

		&:hover {
			opacity: 0.5;
		}

		&-1 { margin-left: (12px * -3); }
		&-2 { margin-left: (12px * -1); }
		&-3 { margin-left: (12px * 1); }
		&-4 { margin-left: (12px * 3); }
	}

	&--prev,
	&--next {
		display: none;
		top: 50%;
		transform: translateY(-50%);
		height: 0;
		border: 12px solid black;
		border-top-color: transparent;
		border-bottom-color: transparent;
		opacity: 0;
		transition:
			left 0.2s,
			right 0.2s,
			opacity 0.2s;
	}

	&--prev { left:  -6%; border-left:  0; border-right-width: 24px; }
	&--next { right: -6%; border-right: 0; border-left-width:  24px; }
}

.slider__radiobox {
	position: absolute;
	top: 0;
	z-index: 1;
	opacity: 0;

	&--1:checked ~ .slider__slides { margin-left:     0; }
	&--2:checked ~ .slider__slides { margin-left: -100%; }
	&--3:checked ~ .slider__slides { margin-left: -200%; }
	&--4:checked ~ .slider__slides { margin-left: -300%; }

	&--1:checked + .slider__radiobox-label--item-1,
	&--2:checked + .slider__radiobox-label--item-2,
	&--3:checked + .slider__radiobox-label--item-3,
	&--4:checked + .slider__radiobox-label--item-4 {
		opacity: 1;
	}

	&--1:checked ~ .slider__radiobox-label--prev-4,
	&--2:checked ~ .slider__radiobox-label--prev-1,
	&--3:checked ~ .slider__radiobox-label--prev-2,
	&--4:checked ~ .slider__radiobox-label--prev-3,
	&--1:checked ~ .slider__radiobox-label--next-2,
	&--2:checked ~ .slider__radiobox-label--next-3,
	&--3:checked ~ .slider__radiobox-label--next-4,
	&--4:checked ~ .slider__radiobox-label--next-1 {
		display: block;
	}

	&--1:focus:focus-visible + .slider__radiobox-label--item-1,
	&--2:focus:focus-visible + .slider__radiobox-label--item-2,
	&--3:focus:focus-visible + .slider__radiobox-label--item-3,
	&--4:focus:focus-visible + .slider__radiobox-label--item-4 {
 		outline: 5px auto Highlight;
  		outline: 5px auto -webkit-focus-ring-color;
	}
}