@mixin container() { ... }@mixin container() { 
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
 }

@mixin vertical() { ... }@mixin vertical() { 
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
  flex-direction: column;
  scroll-snap-type: y mandatory;
 }

@mixin hide-scrollbar() { ... }@mixin hide-scrollbar() { 
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
 }

@mixin item() { ... }@mixin item() { 
  margin: 0;
  width: auto;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  &:not(:last-child) {
    margin-right: settings.$default-gap;
  }
 }

@mixin item-vertical() { ... }@mixin item-vertical() { 
  &:not(:last-child) {
    margin-right: 0;
    margin-bottom: settings.$default-gap;
  }
 }

@mixin item-snap-start() { ... }@mixin item-snap-start() { 
  scroll-snap-align: start;
 }

@mixin item-snap-center() { ... }@mixin item-snap-center() { 
  scroll-snap-align: center;
 }

@mixin item-snap-end() { ... }@mixin item-snap-end() { 
  scroll-snap-align: end;
 }

$default-gap: spacing.get('s2') !default;