@mixin root-container() { ... }@mixin root-container() { 
  @include kib-button-new.root;

  @include media.query('max-sm') {
    margin-left: unit.negative(settings.$max-small);
    margin-right: unit.negative(settings.$max-small);
  }
 }

@mixin wrapper() { ... }@mixin wrapper() { 
  position: relative;
 }

@mixin content() { ... }@mixin content() { 
  @include kib-scroller.container;
  @include kib-scroller.hide-scrollbar;

  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  display: grid;
  gap: settings.$gap;
  grid-auto-flow: column;
  scroll-snap-type: none;
  justify-content: flex-start;

  &:focus {
    outline: 0;
  }

  @include media.query('max-sm') {
    gap: settings.$gap-small;
    padding-left: settings.$max-small;
    padding-right: settings.$max-small;
    scroll-padding: settings.$max-small;

    // This is a spacer to have a gap applied at the end of the carousel.
    &::after {
      content: '';
      width: unit.rem(1px);
    }
  }
 }

@mixin scroll-snap() { ... }@mixin scroll-snap() { 
  scroll-snap-type: x proximity;
 }

@mixin control() { ... }@mixin control() { 
  @include kib-button-new.generate-styles;

  & + & {
    margin-left: 0;
  }

  padding: 0;
  position: absolute;
  top: 50%;
  margin-top: math.div(settings.$control-size, -2);
  width: settings.$control-size;
  height: settings.$control-size;

  @include media.query('max-sm') {
    &:not(:focus-within) {
      @include kib-core.visually-hidden;
    }
  }
 }

@mixin control-next() { ... }@mixin control-next() { 
  right: settings.$control-offset;

  @include media.query('min-md') {
    right: settings.$control-offset-large;
  }
 }

@mixin control-prev() { ... }@mixin control-prev() { 
  left: settings.$control-offset;

  @include media.query('min-md') {
    left: settings.$control-offset-large;
  }
 }

@mixin control-icon() { ... }@mixin control-icon() { 
  width: settings.$control-icon-size;
  height: settings.$control-icon-size;
 }

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

@mixin view-all() { ... }@mixin view-all() { 
  align-self: center;
 }

@mixin view-all-link() { ... }@mixin view-all-link() { 
  @include typography.style-as('paragraph-2');

  padding-left: spacing.get('s4');
  padding-right: spacing.get('s4');
  display: block;
  color: settings.$view-all-link-text-color;
  text-align: center;
  text-decoration: none;
 }

@mixin view-all-button() { ... }@mixin view-all-button() { 
  @include kib-button-new.generate-styles('action', 'tertiary', 'large', true);

  margin: spacing.get('s2');
 }

@mixin view-all-icon() { ... }@mixin view-all-icon() { 
  display: block;
  width: settings.$view-all-icon-size;
  height: settings.$view-all-icon-size;
 }

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

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

$max-small: spacing.get('s4') !default;

$control-size: kib-button-new.$default-height !default;

$control-icon-size: kib-core.dimensions-get('large') !default;

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

$control-offset-large: calc(#{spacing.get('s2')} * -1) !default;

$view-all-control-size: unit.rem(56px) !default;

$view-all-link-text-color: color.get('text', 'primary') !default;

$view-all-icon-size: $control-icon-size !default;