/*! scroller */
.scroller-container {
  position: relative;
  margin-block-start: var(--icc-spacing-7);
  /*margin-inline-end: calc(var(--icc-mobile-padding) * -1);*/
}
.scroller-container-progress {
  display: none;
  position: absolute;
  top: -80px;
  right: 0;
}
@media screen and (width > 900px) {
  .scroller-container-progress {
    display: block;
  }
}
.scroller-container-inner {
  --scroller-element: 10;
  --scroller-min-width: 200px;
  --scroller-max-width: calc(
    ((100vw / var(--scroller-element)) - (2 * var(--icc-mobile-padding)))
  );
  display: grid;
  grid-template-columns: repeat(
    var(--scroller-element),
    minmax(
      min(var(--scroller-min-width), calc(100% - 2rem)),
      var(--scroller-max-width)
    )
  );
  gap: var(--icc-spacing-6);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
@media screen and (width > 900px) {
  .scroller-container-inner {
    gap: var(--icc-spacing-7);
  }
}

.scroller-container-100x100 .scroller-container-inner {
  grid-template-columns: repeat(var(--scroller-element), 100%);
  margin-block: var(--icc-spacing-2);
}
.scroller-container-100x100 .scroller-container-progress {
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  padding-inline: var(--icc-spacing-4);
}
.scroller-container-100x100 .icc-btn-progress {
}
.scroller-container-100x100 .scroller-container-next {
  float: right;
}

@supports (scrollbar-color: auto) {
  .scroller-container-inner {
    scrollbar-color: var(--icc-tertiary-700) var(--icc-gray-100);
    scrollbar-width: thin;
  }
}
@supports selector(::-webkit-scrollbar) {
  .scroller-container-inner::-webkit-scrollbar {
    height: 2px;
    background-color: var(--icc-gray-100);
  }
  .scroller-container-inner::-webkit-scrollbar-thumb {
    background-color: var(--icc-tertiary-700);
  }
}
.scroller-container-inner > div {
  scroll-snap-align: start;
  margin-bottom: var(--icc-spacing-3);
}

/*! infinite scroller */
/* https://www.youtube.com/watch?v=iLmBy-HKIAw */
.infinite-scroller {
  max-width: 100%;
}

.infinite-scroller .infinite-scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.infinite-scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 10%,
    white 90%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.infinite-scroller[data-animated="true"] .infinite-scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 80s)
    var(--_animation-direction, forwards) linear infinite;
}

.infinite-scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.infinite-scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.infinite-scroller[data-speed="fast"] {
  --_animation-duration: 60s;
}

.infinite-scroller[data-speed="slow"] {
  --_animation-duration: 100s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/*! Page opener (accordion su mobile, paginazione verticale su desktop) */
.pageopener_container {
  display: grid;
  .page {
    display: none;
  }
  .pageopener[data-visible="true"] + .page {
    display: block;
  }
  button {
    background-color: transparent;
    border: none;
    color: var(--icc-neutral-white);
    font-size: var(--icc-text-xl);
    padding-block: var(--icc-spacing-4);
    text-align: start;
    padding-inline: var(--icc-spacing-4);

    display: grid;
    grid-template-areas: "sentiero freccia" "titolo freccia";
    grid-template-columns: 1fr 30px;

    h5 {
      grid-area: sentiero;
    }
    h2 {
      grid-area: titolo;
    }
    span {
      grid-area: freccia;
      align-self: center;
    }
    span {
      transform: rotate(90deg);
      transition: transform 0.5s ease-in-out;
    }

    &[data-visible="true"] span {
      display: block;
      transform: rotate(-90deg);
    }
  }
}

@media screen and (width > 900px) {
  .pageopener_container {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "link target";
    column-gap: var(--icc-spacing-6);
    padding: 10px;

    button {
      font-size: var(--icc-text-2xl);
      padding-inline: var(--icc-spacing-4);

      span {
        display: none;
      }

      &[data-visible="true"] span {
        display: block;
        transform: rotate(0deg);
      }
    }

    .pageopener {
      grid-column: 1;
    }
    .page {
      display: none;
      grid-area: target;
      grid-row-start: 1;
      grid-row-end: 9999;
    }
    .pageopener[data-visible="true"] {
      background-color: rgba(255, 255, 255, 0.1);
    }
    .pageopener[data-visible="true"] + .page,
    .pageopener + .page:has([data-visible="true"]) {
      display: block;
      opacity: 1;
    }
    &#pageopener:not(:has([data-visible="true"])) > div:first-of-type {
      display: block;
      opacity: 1;
    }
  }
}