/*
Default gallery styles. Assumes thumbnail container has the "gallery" class, and the default class
options are used: `{featureClass: "feature", selectedClass: "selected"}`
*/

/* The feature is a grid to stack the prev/next buttons on top of the image */
.feature {
  display: grid;
  justify-content: center;
  margin: 0;
  margin-bottom: 10px;
}

/* The image size is capped to leave room for the thumbnails underneath */
.feature img {
  grid-column: 1;
  grid-row: 1;
  max-width: 100%;
  max-height: 80vh;
}
.feature figcaption {
  text-align: center;
}

.feature > button {
  grid-column: 1;
  grid-row: 1;

  /* Remove browser button styles */
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;

  font-size: 80px;
  width: 1em;
  color: transparent;
  z-index: 1; /* Stack on top of image */
  touch-action: manipulation; /* Disable double-tap zoom on mobile */
}

.feature > button.next {
  /* Move the next button to the right side */
  margin-left: auto;
}

/* The prev/next button arrows */
.feature > button.prev::before {
  display: flex;
  margin-left: 0.25em;
  content: '‹';
}
.feature > button.next::before {
  display: flex;
  margin-right: 0.25em;
  justify-content: flex-end;
  content: '›';
}

/* On hover, show the prev/next arrows and gradient backgrounds */
.feature > button.prev:hover::before,
.feature > button.next:hover::before {
  color: white;
  opacity: 0.6;
}
.feature > button.prev:hover {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.500) 0%,
    rgba(0, 0, 0, 0.227) 50%,
    rgba(0, 0, 0, 0.073) 75%,
    rgba(0, 0, 0, 0.016) 87.5%,
    rgba(0, 0, 0, 0) 100%
  );
}
.feature > button.next:hover {
  background: linear-gradient(270deg,
    rgba(0, 0, 0, 0.500) 0%,
    rgba(0, 0, 0, 0.227) 50%,
    rgba(0, 0, 0, 0.073) 75%,
    rgba(0, 0, 0, 0.016) 87.5%,
    rgba(0, 0, 0, 0) 100%
  );
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Limit the thumbnail height to fit at least one row under the feature */
.gallery img {
  height: 10vh;
  border: 3px solid transparent;
}

.gallery img.selected {
  border: 3px solid var(--dark);
}

.gallery > * {
  cursor: pointer;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
}