.companies__module {
  justify-content: center;
  align-items: center;
  --carousel-anchor-name: --companies;
}
.companies__module.carousel {
  grid-column: content;
  justify-content: unset;
}
.companies__module.carousel:before,
.companies__module.carousel:after {
  content: "";
  display: block;
  width: 25cqi;
}
.companies__module .logo {
  max-width: 12rem;
  height: 8rem;
  width: max-content;
}
.companies__module img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}
.carousel {
  --carousel-anchor-name: --rotator;
  list-style-type: none;
  gap: 2rem;
  margin-inline: auto;
  inline-size: calc(100% - 4rem);
  display: grid; 
  grid-auto-flow: column;
  justify-items: center;
  scrollbar-width: none;
  anchor-name: var(--carousel-anchor-name);
  /* size and scroll state container */
  container-type: inline-size scroll-state;

  /* scroll styles */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  &::scroll-button(left),
  &::scroll-button(right) {
    position-area: var(--_inner);
  }

  & > li {
    scroll-snap-align: center;
    padding: 0;
  }
  &:focus-visible {
    scrollbar-color: var(--primary) transparent;
    outline: none;
  }
  @supports ( container-type: scroll-state ) {
    > * {
      container-type: scroll-state;
      @container not scroll-state(snapped: x) {
        interactivity: inert
      }
    }
  }
}


.scroll-markers {
  scroll-marker-group: after;

  &::scroll-marker-group {
    position: absolute;
    position-anchor: var(--carousel-anchor-name);

    container: marker-group / inline-size;

    display: grid;
    gap: 0.5rem;
    place-content: safe center;
    box-sizing: border-box;

    scrollbar-width: none;
    scroll-behavior: smooth;

    inline-size: 100%;
    max-inline-size: min(90cqi, 210px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    padding: 5px 10px; /* space for focus and scroll */
    scroll-padding-inline: 10px;

    top: anchor(bottom);
    left: calc(anchor(left) - 10%);
    right: calc(anchor(right) - 10%);
    margin-block: 1rem;

    grid-auto-columns: 1rem;
    grid-auto-flow: column;
    justify-self: center;
  }

  > * {
    &::scroll-marker {
      content: " ";
      scroll-snap-align: center;
      aspect-ratio: 1;
      border: 2px solid var(--primary);
      border-radius: 50%;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      animation: scale-in-and-out linear both;
      animation-timeline: view(x);
      interactivity: auto; /* todo: remove once they dont inherit none from inerted origin elements */
    }

    &::scroll-marker:target-current {
      background: var(--primary);
      border-color: var(--primary);
    }

    @media (forced-colors: active) {
      &::scroll-marker:target-current {
        background: Highlight;
        border-color: Highlight;
      }
    }

    &::scroll-marker:not(:active):hover {
      transform: scale(1.25);
    }

    &::scroll-marker:not(:active):focus {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
  }
}

.scroll-buttons {
  &::scroll-button(*) {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    z-index: 1;
    position-anchor: var(--carousel-anchor-name);
    inline-size: 2rem;
    margin-inline: calc(-1 * 2rem / 2);
    line-height: 1;
    place-items: center;
    place-content: center;
    aspect-ratio: 1;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 50%;
    mask-size: cover;
    position-area: var(--_outer);

    @media (forced-colors: active) {
      background: Canvas;
    }
  }
  &::scroll-button(down),
  &::scroll-button(up) {
    display: none;
  }
  &::scroll-button(right) {
    --_inner: center span-inline-start;
    --_inner-under: block-end span-inline-start;
    --_inner-over: block-start span-inline-start;
    --_outer: inline-end center;
    --_outer-under: end;
    --_outer-over: block-start inline-end;
    content: "" / "Scroll Right";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z'/%3E%3C/svg%3E")
      no-repeat 50% 50%;
  }
  &::scroll-button(left) {
    --_inner: center span-inline-end;
    --_inner-under: block-end span-inline-end;
    --_inner-over: block-start span-inline-end;
    --_outer: inline-start center;
    --_outer-under: block-end inline-start;
    --_outer-over: start;
    content: "" / "Scroll Left";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z'/%3E%3C/svg%3E")
      no-repeat 50% 50%;
  }

  /* inner arrows when carousel is reaching full width of viewport or container */
  @container (inline-size >= calc(100cqi - 8rem - 2rem )) {
    &::scroll-button(right),
    &::scroll-button(left) {
      margin-inline: calc( -2 * 2rem );
      position-area: var(--_outer-under);
    }
  }

  &::scroll-button(*):not(:disabled):is(:hover, :focus-visible) {
    background-color: var(--secondary);
    color: var(--white);
    border-color: var(--white);
    transform: scale(1.1);
  }

  &::scroll-button(*):not(:active):focus-visible {
    outline-offset: 2px;
    outline: 1px solid var(--primary);
  }

  &::scroll-button(right):not(:disabled):active {
    transform: translateX(5px) scale(0.95);
  }
  &::scroll-button(left):not(:disabled):active {
    transform: translateX(-5px) scale(0.95);
  }
  &::scroll-button(up):not(:disabled):active {
    transform: translateY(-5px) scale(0.95);
  }
  &::scroll-button(down):not(:disabled):active {
    transform: translateY(5px) scale(0.95);
  }

  &::scroll-button(*):disabled {
    opacity: 25%;
    cursor: not-allowed;
  }    
  @media (hover) {
    &:not(:hover, :focus-within)::scroll-button(*) {
      opacity: 0;
    }
  }
}
@keyframes scale-in-and-out {
  entry 0% {
    transform: scale(0.25);
  }
  entry 100% {
    transform: scale(1);
  }

  exit 0% {
    transform: scale(1);
  }
  exit 100% {
    transform: scale(0.25);
  }
}
@keyframes interactive-when-visible {
  0% { interactivity: auto; }
  100% { interactivity: auto; }
}