/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-auto-manual-play-pause-slideshow.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated html may be modified in any 
way to fit your requirements.
=================================================================== */

#slideshow {
  /* VARIABLES */

  /* enter your number of slides and timings */
  --slides:8;
  --static:4.5s;
  --move:0.5s;
  --aspect:1280/600;
  --max-width:900px;
  --width:95%;

  /* colors */
  --play-color:#000; /* play button color */
  --pause-color:#fff; /* play button color */
  --label-color:#888; /* slide selector color */
  --cursor-color:#000; /* current slide color */

  /* do not alter the following variables */
  --slide-time:calc(var(--static) + var(--move));
  --total-time:calc(var(--slides) * var(--slide-time));
  --img:blank;
  --order:calc(var(--slides) + 1);
}

#slideshow {max-width:var(--max-width); width:var(--width); margin:50px auto; position:relative; display:flex; flex-wrap:wrap; justify-content: space-between; box-shadow: 0 0 0 2px #000; }
#show {width:100%; aspect-ratio:var(--aspect); background:#888; border:1px solid #fff; border-bottom:0; box-sizing:border-box; order:-1;}
#show::after {display:block; width:100%; aspect-ratio:var(--aspect); position:absolute; left:0; top:0; content:""; opacity:0; transition:0.25s; background-size:200%; background-position:center -100%; border:1px solid #fff; border-bottom:0; box-sizing:border-box;}
#show #slide {width:100%; height:100%; display:flex;}

#slideshow label {display:block; width:calc(100% / var(--slides)); height:20px; background:var(--label-color); cursor:pointer; text-align:center; border:1px solid #fff; box-sizing:border-box;  position:relative; z-index:2;}
#slideshow [name="boats"] {display:none;}

#show #slide div {display:block; width:0px; height:100%; animation:show var(--total-time) infinite linear;}
#show #slide div img {display:block; width:100%; height:100%; object-fit:cover;}

/* add extra line for more images * -9, * -10 etc. */
#f1:checked ~ #show {--del: 0s;}
#f2:checked ~ #show {--del: calc(var(--slide-time) * -1);}
#f3:checked ~ #show {--del: calc(var(--slide-time) * -2);}
#f4:checked ~ #show {--del: calc(var(--slide-time) * -3);}
#f5:checked ~ #show {--del: calc(var(--slide-time) * -4);}
#f6:checked ~ #show {--del: calc(var(--slide-time) * -5);}
#f7:checked ~ #show {--del: calc(var(--slide-time) * -6);}
#f8:checked ~ #show {--del: calc(var(--slide-time) * -7);}

/* Add extra line for more images and increase the *4 *5 *6 etc. */
#show #slide div:nth-of-type(1) {animation-delay:calc(var(--move) * -1 + var(--del));}
#show #slide div:nth-of-type(2) {animation-delay:calc(var(--static) + var(--del));}
#show #slide div:nth-of-type(3) {animation-delay:calc(var(--static) + var(--slide-time) * 1 + var(--del));}
#show #slide div:nth-of-type(4) {animation-delay:calc(var(--static) + var(--slide-time) * 2 + var(--del));}
#show #slide div:nth-of-type(5) {animation-delay:calc(var(--static) + var(--slide-time) * 3 + var(--del));}
#show #slide div:nth-of-type(6) {animation-delay:calc(var(--static) + var(--slide-time) * 4 + var(--del));}
#show #slide div:nth-of-type(7) {animation-delay:calc(var(--static) + var(--slide-time) * 5 + var(--del));}
#show #slide div:nth-of-type(8) {animation-delay:calc(var(--static) + var(--slide-time) * 6 + var(--del));}

/* add extra line for more images */
#f1:active ~ #show::after {background-image:url(boat1.jpg);}
#f2:active ~ #show::after {background-image:url(boat2.jpg);}
#f3:active ~ #show::after {background-image:url(boat3.jpg);}
#f4:active ~ #show::after {background-image:url(boat4.jpg);}
#f5:active ~ #show::after {background-image:url(boat5.jpg);}
#f6:active ~ #show::after {background-image:url(boat6.jpg);}
#f7:active ~ #show::after {background-image:url(boat7.jpg);}
#f8:active ~ #show::after {background-image:url(boat8.jpg);}

#slideshow label:active ~ #show #cover {animation:unset;}
#slideshow label:active ~ #show #cursor {animation:unset; z-index:-1;}
#slideshow label:active ~ #show #slide div {animation:unset;}

#slideshow label:active {background:var(--cursor-color);}

[name="boats"]:active ~ #show::after {opacity:1; background-size:100%; background-position:center top;}


/* This does need a little calculation. It is a pity that @keyframes cannot have calc() as percentage values */
@keyframes show {
0% {order:var(--order); width:0%;}

1.25% {width:100%;} /* STEP 2 : Step1 divided by 'Total slide time' divided by '--move time' (12.5% / (5 / 0.5) = 12.5% / 10 = 1.25%) */
12.5% {width:100%;} /* STEP 1 : 100% divided by number of slides (100% / 8 = 12.5%) */ 
13.75% {width:0%;}  /* STEP 3 : Step1 plus Step2 (20% + 1.25%) */

100% {width:0%;} 
}

/* cover to stop selection when next slide is sliding into position */
#cover {width:100%; height:0; position:absolute; left:0; top:0; background:#0000; animation:cover 5s infinite linear; z-index:5;}
@keyframes cover {
0% {height:0;}
80% {height:0;}
80.01% {height:100%;}
100% {height:100%}
}

/* slide indicator */
#cursor {width:calc(100% / var(--slides)); height:20px; background:var(--cursor-color); border:1px solid #fff; box-sizing:border-box; position:absolute; left:0; bottom:0; animation:pos var(--total-time) var(--del) steps(var(--slides)) infinite; z-index:3;}


@keyframes pos {
0% {left:0;}
100% {left:100%;}
}


/* Play/Pause styling */
#playpause {position:absolute; top:6px; left:6px; z-index:1; appearance:none; display:block; box-sizing:border-box; margin:0; padding:0; width:0; height:30px; cursor:pointer; transition:0.25s;
border-style:double; border-width: 0 0 0 25px; border-radius:0;
border-color:#0000 #0000 #0000 var(--play-color);
}
#playpause:checked {
border-style:solid;
border-width:15px 0 15px 25px;
border-color:#0000 #0000 #0000 var(--pause-color);
}
#playpause:checked ~ #show #cursor,
#playpause:checked ~ #show #slide div,
#playpause:checked ~ #show #cover {animation-play-state: paused;}