/* Adapted from https://codepen.io/tutsplus/pen/MWYXJdj */

.featured-list-radio {
  position: absolute;
  /*bottom: 0;
  left: -9999px;*/
  visibility: hidden;
}

.featured-list-label {
  cursor: pointer;
  display: block;
}

.featured-wrapper {
  position: relative;
}

.featured-wrapper .featured-list {
  display: grid;
}

.featured-wrapper .featured-list li {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 0.25s;
}

.featured-wrapper .arrows label::before,
.featured-wrapper .arrows label::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  /*background-color: #fff;*/
  opacity: 0.5;
  transition: opacity 0.25s;
}

.featured-wrapper .arrows label::before {
  /*left: 10px;*/
  left: -36px;
}

.featured-wrapper .arrows label::after {
  /*right: 10px;*/
  right: -36px;
}

.featured-wrapper .dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.featured-wrapper .dots li:not(:last-child) {
  margin-right: 8px;
}

.featured-wrapper .dots label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #fff;
  transition: background 0.25s;
}

.featured-wrapper .dots label:hover {
  background: currentColor;
}

/* MIMIC CLICK EVENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[id="image1"]:checked ~ .container .featured-list li:nth-child(1),
[id="image2"]:checked ~ .container .featured-list li:nth-child(2),
[id="image3"]:checked ~ .container .featured-list li:nth-child(3),
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::before,
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::after {
  opacity: 1;
}

[id="image1"]:checked ~ .container .arrows [for="image3"]::before,
[id="image2"]:checked ~ .container .arrows [for="image1"]::before,
[id="image3"]:checked ~ .container .arrows [for="image2"]::before {
  content: '';
  background-image: url(/site-assets/images/icons/caret-prev-thick.svg);
}

[id="image1"]:checked ~ .container .arrows [for="image2"]::after,
[id="image2"]:checked ~ .container .arrows [for="image3"]::after,
[id="image3"]:checked ~ .container .arrows [for="image1"]::after {
  content: '';
  background-image: url('/site-assets/images/icons/caret-next-thick.svg');
}

[id="image1"]:checked ~ .container [for="image1"] .outer,
[id="image2"]:checked ~ .container [for="image2"] .outer,
[id="image3"]:checked ~ .container [for="image3"] .outer {
  background: rgba(0, 0, 0, 0.75);
}

[id="image1"]:checked ~ .container [for="image1"] .inner,
[id="image2"]:checked ~ .container [for="image2"] .inner,
[id="image3"]:checked ~ .container [for="image3"] .inner {
  opacity: 1;
  transform: none;
}