.ScrollView {
  overflow: hidden;

  &-scroller {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; // IE/Edge
    scrollbar-width: none; // FF

    &::-webkit-scrollbar {
      display: none;
    }
  }
  &--fullWidth {
    margin: 0 calc(var(--gutter) * -1);
  }
  &--fullWidth:not(&--hasControls) &-inner {
    padding: 0 var(--gutter);
  }
}

.ScrollView--x {
  .ScrollView-scroller {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-bottom: -18Px;
    padding-bottom: 18Px;
  }
  .ScrollView-inner {
    display: flex;
  }
  .ScrollView-item {
    flex: 0 0 auto;
    margin-left: @scroll-view-spacing-x;

    &:first-child {
      margin-left: 0;
    }
  }
}

.ScrollView--hasControls {
  display: flex;
  align-items: center;

  .ScrollView-scroller {
    flex: 1;
  }
}

.ScrollView-control {
  padding: 6px;
  color: var(--color-text-3);
  font-size: @font-size-md;

  &:not(:disabled):hover {
    color: var(--brand-1);
  }
}