@import "import";

.listWrapper {
  pointer-events: auto;

  &.scrollX {
    width: calc(100% + spacer(4) * 2);
    margin-inline: calc(spacer(4) * -1);
    padding-bottom: spacer(2);
    margin-bottom: calc(spacer(2) * -1);
    overflow-x: auto;
    scrollbar-width: thin;

    .item {
      flex: 0 0 auto;

      &:first-of-type {
        padding-left: spacer(4);
      }

      &:last-of-type {
        padding-right: spacer(4);
      }
    }
  }

  .list {
    @include flex($justify-content: flex-start);
    gap: spacer(2);
  }
}