@mixin root-container() { ... }@mixin root-container() { 
  position: relative;
  max-width: settings.$max-width;
  margin: 0 auto;
 }

@mixin container() { ... }@mixin container() { 
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: settings.$min-height;
  overflow: hidden;
 }

@mixin slides-container() { ... }@mixin slides-container() { 
  display: flex;
  overflow: hidden;
  list-style: none;
 }

@mixin slide() { ... }@mixin slide() { 
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;

  > :last-child {
    margin-bottom: 0;
  }
 }

@mixin slide-hide() { ... }@mixin slide-hide() { 
  display: none;
 }

@mixin nav() { ... }@mixin nav() { 
  padding-left: spacing.get('s1');
  padding-right: spacing.get('s1');
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  background-color: settings.$nav-background;
  border-top-left-radius: settings.$nav-border-radius;
  border-top-right-radius: settings.$nav-border-radius;
 }

@mixin nav-button() { ... }@mixin nav-button() { 
  padding: 0;
  position: relative;
  width: settings.$pagination-button-size;
  height: settings.$pagination-button-size;
  appearance: none;
  background-color: transparent;
  border: 0;
  color: settings.$pagination-button-text-color;
  cursor: pointer;

  &:focus {
    position: relative;

    &:focus-visible {
      outline: none;
    }

    &::after {
      $distance: settings.$emphasis-size * -2;

      position: absolute;
      top: $distance;
      left: $distance;
      right: $distance;
      bottom: $distance;
      border: settings.$emphasis-size solid settings.$emphasis-outer-color;
      box-shadow: inset 0 0 0 settings.$emphasis-size settings.$emphasis-inner-color;
      content: '';
    }
  }
 }

@mixin pause() { ... }@mixin pause() { 
  @include nav-button;
 }

@mixin pagination() { ... }@mixin pagination() { 
  padding: 0;
  display: flex;
  align-items: center;
 }

@mixin pagination-button() { ... }@mixin pagination-button() { 
  @include nav-button;

  padding-left: spacing.get('s1');
  padding-right: spacing.get('s1');

  // Pagination dot element
  &::before {
    position: relative;
    display: block;
    width: settings.$pagination-dot-size;
    height: settings.$pagination-dot-size;
    background-color: settings.$pagination-dot-background-color;
    border: settings.$pagination-dot-border-width solid settings.$pagination-dot-border-color;
    border-radius: 50%;
    content: '';
    transition: border-color 200ms;
  }
 }

@mixin pagination-button-active() { ... }@mixin pagination-button-active() { 
  &::before {
    background-color: settings.$pagination-dot-active-background-color;
  }
 }

@mixin control-icon() { ... }@mixin control-icon() { 
  @include common.chip-icon-styles('transparent');
 }

@mixin slide-vue-transition() { ... }@mixin slide-vue-transition() { 
  transition: transform settings.$slide-transition-duration settings.$slide-transition-timing;

  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
 }

@mixin slide-vue-transition-translation($reverse) { ... }@mixin slide-vue-transition-translation($reverse) { 
  @if $reverse {
    transform: translateX(-100%);
  } @else {
    transform: translateX(100%);
  }
 }

@mixin slide-react-transition() { ... }@mixin slide-react-transition() { 
  animation: settings.$slide-transition-timing;
  @if $leave {
    @if $reverse {
      animation-name: kib-hero-carousel-leave-left;
    } @else {
      animation-name: kib-hero-carousel-leave-right;
    }

    animation-duration: settings.$slide-transition-duration * 2;
  } @else {
    @if $reverse {
      animation-name: kib-hero-carousel-left;
    } @else {
      animation-name: kib-hero-carousel-right;
    }

    animation-duration: settings.$slide-transition-duration * 1;
  }
 }

$max-width: unit.rem(1440px) !default;

$min-height: unit.rem(296px) !default;

$emphasis-size: unit.rem(2px) !default;

$emphasis-outer-color: color.get('action', 'cta', 'primary', 'primary') !default;

$emphasis-inner-color: color.get('action', 'cta', 'alternate', 'primary') !default;

$nav-background: color.get('static', 'gray1', '900a50') !default;

$nav-border-radius: kib-core.dimensions-get('small') !default;

$pagination-button-text-color: color.get('ui-bg', 'primary') !default;

$pagination-button-size: kib-core.dimensions-get('default') !default;

$pagination-dot-background-color: transparent !default;

$pagination-dot-border-color: $pagination-button-text-color !default;

$pagination-dot-border-width: unit.rem(1px) !default;

$pagination-dot-active-background-color: $pagination-dot-border-color !default;

$pagination-dot-size: kib-core.dimensions-get('small') !default;

$control-size: unit.rem(36px) !default;

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

$slide-transition-duration: 600ms !default;

$slide-transition-timing: ease-in-out !default;