<section class="slider-wrapper" id="wrapper">
  <button class="slide-arrow" id="slide-arrow-prev">
    &#8249;
  </button>
  <button class="slide-arrow" id="slide-arrow-next">
    &#8250;
  </button>
  <button class="full-screen" title="Enter full screen mode">
    <svg class="full-screen--open" height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
        <g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)">
          <g id="fullscreen" transform="translate(215.000000, 257.000000)">
            <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" />
          </g>
        </g>
      </g>
    </svg>
    
    <svg class="full-screen--close" height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-257.000000, -257.000000)"><g id="fullscreen-exit" transform="translate(257.000000, 257.000000)"><path d="M0,11 L3,11 L3,14 L5,14 L5,9 L0,9 L0,11 L0,11 Z M3,3 L0,3 L0,5 L5,5 L5,0 L3,0 L3,3 L3,3 Z M9,14 L11,14 L11,11 L14,11 L14,9 L9,9 L9,14 L9,14 Z M11,3 L11,0 L9,0 L9,5 L14,5 L14,3 L11,3 L11,3 Z" id="Shape"/></g></g></g></svg>

  </button>
  <ul class="slides-container" id="slides-container">
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
  </ul>
</section>

<footer>
  Pen by <a href="https://www.jemimaabu.com" target="_blank" rel="noopener">Jemima Abu</a> <span class="heart">&hearts;</span>
</footer>

* {
  box-sizing: border-box;
}

body {
  max-width: 1440px;
  margin: auto;
}

.slider-wrapper {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}

.slides-container {
  height: calc(100vh - 2rem);
  width: 100%;
  display: flex;
  overflow: scroll;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: 0;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

.slide {
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
}

.slide:nth-child(1) {
  background-color: #e8dff5;
}

.slide:nth-child(2) {
  background-color: #fce1e4;
}

.slide:nth-child(3) {
  background-color: #fcf4dd;
}

.slide:nth-child(4) {
  background-color: #ddedea;
  margin: 0;
}

.slider-wrapper:not(:hover) .full-screen {
  opacity: 0;
}

.full-screen {
  transition: 150ms;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: fit-content;
  width: fit-content;
  background-color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
  border-radius: 50%;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  cursor: pointer;
}

.full-screen:hover {
  background-color: rgba(255, 255, 255, 1);
}

.full-screen--close {
  display: none
}

:fullscreen .full-screen--open {
  display: none;
}

:fullscreen .full-screen--close {
  display: block;
}

/* .full-screen:not(.is-active) .full-screen--close {
  display: none;
}

.full-screen.is-active .full-screen--open {
  display: none;
} */

footer {
  padding: 1em;
  text-align: center;
  background-color: #ffdfb9;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer .heart {
  color: #dc143c;
}

const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
const wrapper = document.getElementById("wrapper");
const fullscreenButton = document.querySelector(".full-screen");

nextButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft += slideWidth;
});

prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});

fullscreenButton.addEventListener("click", () => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => fullscreenButton.classList.remove("is-active"));
  } else {
    if (wrapper.webkitSupportsFullscreen) {
      wrapper
        .webkitEnterFullscreen()
        .then(() => fullscreenButton.classList.add("is-active"));
    } else {
      wrapper
        .requestFullscreen()
        .then(() => fullscreenButton.classList.add("is-active"));
    }
  }
});