/* (almost) pure CSS slider inspired by https://webdesign.tutsplus.com/how-to-build-a-simple-carousel-with-vanilla-javascript--cms-41734t */

div.slider {
  position: relative;
}

div.slider div.scroller {
  display: flex;
  margin: 0 25px;
  padding: 0 0 25px;
  position: relative;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

div.scroller::-webkit-scrollbar { 
  width: 0;
  height: 0;
}

div.slider .page {
  min-height: 100%;
  flex: 1 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 0;
  z-index: 1;
}

div.slider div.spacer {
  margin: 25px 25px 0;
  padding: 0;
  min-height: 100%;
  border: none;
}

div.slider span.large {
  display: block;
  font-weight: bold;
  font-size: 600%;
  line-height: 100%;
}

div.slider cite {
  font-style: normal;
}

div.slider figcaption {
  display: block;
  font-size: small;
  width: 100%;
  border-top: .15rem solid var(--pico-blockquote-border-color);
  margin: 1rem 0 0;
  padding-top: .2rem;
}

div.slider button {
  display: block;
  flex: none;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: none;
  position: absolute;
  top: calc(50% - 35px);
  z-index: 2;
  border: none;
  background-color: transparent;
  opacity: 35%;
  cursor: pointer;
  transition: all 220ms ease-in-out; 
}

div.slider button:hover, div.slider button:active {
  opacity: 100%;
}

div.slider button:default {
  opacity: 35%;
}

/* SVG background image buttons inspired by https://svg-tutorial.com/svg/svg-in-css */

div.slider button.prev {
  left: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'><path d='M 50 15 l -35,35 35,35' stroke='black' stroke-width='10' fill='none' /></svg>");
}

div.slider button.next {
  right: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'><path d='M 50 15 l 35,35 -35,35' stroke='black' stroke-width='10' fill='none' /></svg>");
}