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

  --pagination-timer-animation-play-state: running;
 }

@mixin variation() { ... }@mixin variation() { 
  // nav mixin
  --nav-background: #{settings.$nav-background};
  --nav-border-top-left-radius: #{settings.$nav-border-radius};
  --nav-border-top-right-radius: #{settings.$nav-border-radius};
  --nav-align-items: inherit;
  --nav-gap: inherit;
  --nav-width: inherit;
  --nav-justify-content: inherit;

  // nav-button mixin
  --nav-button-width: #{settings.$pagination-button-size};
  --nav-button-height: #{settings.$pagination-button-size};

  // pagination mixin
  --pagination-justify-content: inherit;
  --pagination-gap: inherit;

  // pagination-button mixin
  --pagination-button-padding-left: #{spacing.get('s1')};
  --pagination-button-padding-right: #{spacing.get('s1')};
  --pagination-button-width: #{settings.$pagination-button-size};
  --pagination-button-height: #{settings.$pagination-button-size};
  --pagination-button-border-focus: #{settings.$emphasis-size solid settings.$emphasis-outer-color};
  --pagination-button-box-shadow-focus: #{inset 0 0 0 settings.$emphasis-size
    settings.$emphasis-inner-color};
  --pagination-button-tab-highlight-color: inherit;

  // pagination-button mixin: dot-element
  --pagination-button-dot-element-bg: transparent;
  --pagination-button-dot-element-height: #{settings.$pagination-dot-size};
  --pagination-button-dot-element-border-radius: 50%;
  --pagination-button-dot-element-width: #{settings.$pagination-dot-size};
  --pagination-button-dot-element-border: #{settings.$pagination-dot-border-width} solid #{settings.$pagination-dot-border-color};
  --pagination-button-dot-element-transition: inherit;

  // pagination-button-active mixin
  --pagination-button-active-bg: #{settings.$pagination-dot-active-background-color};
  --pagination-button-active-bg-size: inherit;
  --pagination-button-active-bg-position: inherit;

  @if $variation == 'modern' {
    @include variation-modern;
  }
 }

@mixin variation-modern() { ... }@mixin variation-modern() { 
  // nav mixin #{settings.$nav-background};
  --nav-background: transparent;
  --nav-border-top-left-radius: #{settings.$nav-border-radius};
  --nav-border-top-right-radius: #{settings.$nav-border-radius};
  --nav-align-items: center;
  --nav-gap: #{settings.$variation-modern-nav-button-gap};
  --nav-width: 100%;
  --nav-justify-content: center;

  // nav-button mixin
  --nav-button-width: #{settings.$variation-modern-nav-button-size};
  --nav-button-height: #{settings.$variation-modern-nav-button-size};

  // pagination mixin
  --pagination-justify-content: flex-end;
  --pagination-gap: #{settings.$variation-modern-pagination-button-gap};

  // pagination-button mixin
  --pagination-button-padding-left: inherit;
  --pagination-button-padding-right: inherit;
  --pagination-button-width: min(100%, #{settings.$variation-modern-pagination-button-width});
  --pagination-button-height: #{settings.$variation-modern-pagination-button-tap-height};
  --pagination-button-border-focus: 0;
  --pagination-button-box-shadow-focus: none;
  --pagination-button-tab-highlight-color: transparent;

  // pagination-button mixin: dot-element
  --pagination-button-dot-element-bg: #{settings.$variation-modern-pagination-dot-background-color};
  --pagination-button-dot-element-height: #{settings.$variation-modern-pagination-dot-height};
  --pagination-button-dot-element-border-radius: #{settings.$variation-modern-pagination-dot-border-radius};
  --pagination-button-dot-element-width: inherit;
  --pagination-button-dot-element-border: inherit;
  --pagination-button-dot-element-transition: border-color 200ms;

  // pagination-button-active mixin
  --pagination-button-active-bg: linear-gradient(
    to right,
    white 50%,
    #{settings.$variation-modern-pagination-dot-background-color} 0
  );

  // linear-gradient(to right, white 50%, settings.$pagination-dot-background-color 0);
  --pagination-button-active-bg-size: 200% 100%;
  --pagination-button-active-bg-position: right;
 }

@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;
  }

  &:focus {
    position: absolute;

    &::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 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: var(--nav-background);
  border-top-left-radius: var(--nav-border-top-left-radius);
  border-top-right-radius: var(--nav-border-top-right-radius);

  // variation: modern
  align-items: var(--nav-align-items);
  gap: var(--nav-gap);
  width: var(--nav-width);
  justify-content: var(--nav-justify-content);
 }

@mixin nav-button() { ... }@mixin nav-button() { 
  padding: 0;
  position: relative;
  width: var(--nav-button-width);
  height: var(--nav-button-height);
  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: var(--pagination-button-border-focus);
      box-shadow: var(--pagination-button-box-shadow-focus);
      content: '';
    }
  }
 }

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

  -webkit-tap-highlight-color: var(--pagination-button-tab-highlight-color);
 }

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

  &:focus-within {
    --pagination-timer-animation-play-state: paused;
  }
 }

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

  padding-left: var(--pagination-button-padding-left);
  padding-right: var(--pagination-button-padding-right);
  width: var(--pagination-button-width);
  height: var(--pagination-button-height);
  -webkit-tap-highlight-color: var(--pagination-button-tab-highlight-color);

  // Pagination dot element
  &::before {
    position: relative;
    display: block;
    background-color: var(--pagination-button-dot-element-bg);
    height: var(--pagination-button-dot-element-height);
    border-radius: var(--pagination-button-dot-element-border-radius);
    width: var(--pagination-button-dot-element-width);
    border: var(--pagination-button-dot-element-border);
    transition: var(--pagination-button-dot-element-transition);
    content: '';
  }
 }

@mixin pagination-button-active() { ... }@mixin pagination-button-active() { 
  -webkit-tap-highlight-color: var(--pagination-button-tab-highlight-color);

  &::before {
    background: var(--pagination-button-active-bg);
    background-size: var(--pagination-button-active-bg-size);
    background-position: var(--pagination-button-active-bg-position);

    // modern variation: animation settings
    animation-name: kib-hero-carousel-pagination-button-timer-bar;
    animation-timing-function: linear;
    animation-duration: var(--slide-duration);
    animation-play-state: var(--pagination-timer-animation-play-state);

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

    @media (forced-colors: active) {
      background-color: Highlight;
    }
  }
 }

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

  pointer-events: none;
 }

@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;
    animation-fill-mode: forwards;
  }
 }

$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;

$variation-modern-nav-background: linear-gradient(
  180deg,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.2) 100%
) !default;

$variation-modern-nav-button-size: unit.rem(18px) !default;

$variation-modern-nav-button-gap: spacing.get(s2) !default;

$variation-modern-pagination-container-size: unit.rem(258) !default;

$variation-modern-pagination-button-width: unit.rem(60px) !default;

$variation-modern-pagination-button-tap-height: unit.rem(28px) !default;

$variation-modern-pagination-button-gap: spacing.get('s1') !default;

$variation-modern-pagination-margin-bottom: calc(math.div(spacing.get('s1'), 2)) !default;

$variation-modern-pagination-border-radius: unit.rem(1px) !default;

$variation-modern-pagination-padding: unit.rem(1px) !default;

$variation-modern-pagination-box-shadow: 0 0 0 1px color.get('action', 'switch', 'foreground'),
  0 0 0 2px color.get('ui-bg', 'brand', 'primary');

$variation-modern-pagination-dot-background-color: rgba(white, 0.6) !default;

$variation-modern-pagination-dot-border-radius: spacing.get(s5) !default;

$variation-modern-pagination-dot-width: unit.rem(60px) !default;

$variation-modern-pagination-dot-height: spacing.get(s1) !default;