@conduction/components/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  --conduction-horizontal-overflow-wrapper-background-color: unset;
  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;

  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
}

.container {
  position: relative;
  background-color: var(--conduction-horizontal-overflow-wrapper-background-color);
}

.wrapper {
  overflow-x: scroll;
}

.scrollButton {
  position: sticky;
  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);

  margin-inline-start: var(--conduction-horizontal-overflow-wrapper-margin-inline-start);
  margin-inline-end: var(--conduction-horizontal-overflow-wrapper-margin-inline-end);
  margin-block-start: var(--conduction-horizontal-overflow-wrapper-margin-block-start);
  margin-block-end: var(--conduction-horizontal-overflow-wrapper-margin-block-end);
}

.scrollButton.right {
  left: 100%;
}

/* Hide scrollbar */
.wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}