@value contentColorScope from "pageflow-scrolled/values/colors.module.css";

.contentMargin {
  display: grid;
  grid-template-columns: var(--content-margin) minmax(0, var(--content-max-width, 1fr)) var(--content-margin);
  justify-content: center;
  margin: 0 auto;
}

.contentMargin > * {
  grid-row: 1;
}

.contentMargin > button {
  grid-column: 3;
  z-index: 1;
  align-self: center;
}

.contentMargin > button:first-child {
  grid-column: 1;
}

.scrollButtons-below > button:first-child,
.scrollButtons-below > button {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: auto;
}

.scrollButtons-below > button:first-child {
  justify-self: start;
}

.container {
  grid-column: 2;
  container-type: inline-size;
  display: flex;
  justify-content: center;
}

.fullContainer {
  grid-column: 1 / -1;
}

.list {
  composes: scope-externalLinks from global;
  composes: contentColorScope;
  flex: 1;
  padding: 0;
  margin: 0;
  list-style: none;
}

.full {
  --max-width: var(--section-max-width);
  --max-width-padding: calc((100cqw - var(--max-width)) / 2);
  --full-width-padding: max(100cqw * var(--content-margin-fraction), var(--max-width-padding, 0px));
  --full-width-content-width: calc(100cqw - var(--full-width-padding) * 2);
  padding: 0 var(--full-width-padding);
}

.textPosition-below {
  min-height: 240px;
}

.textPosition-overlay {
  --link-width-s-phone-columns: 1;
}

.scroller {
  overflow: visible;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;

  --clip-margin: 0.5rem;
  margin: 0 calc(-1 * var(--clip-margin));

  --scroller-padding-inline: calc(var(--clip-margin) + var(--full-width-padding, 0px));
  padding: 0;
  scroll-padding-left: var(--scroller-padding-inline);

  --hover-scale-adjustment: 0.2;
}

.scroller > li {
  scroll-snap-align: start;
}

.full.scroller {
  --clip-margin: 0px;
}

.scroller > li:first-child {
  margin-left: var(--scroller-padding-inline);
}

.scroller > li:last-child {
  margin-right: var(--scroller-padding-inline);
}

.full.scroller.layout-center {
  --max-width: max(var(--layout-inline-content-max-width),
                   var(--reference-max-width, 0) / var(--columns));
}
