@mixin container-wrapper() { ... }@mixin container-wrapper() { 
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  height: 100%;

  // Note: need 100% here rather than 100vh. Using 100vh will result not vertically centered in ios Chrome & Safar as
  // url bar height is taken into aacount for the visible height. CDS-4689 resource: https://developers.google.com/web/updates/2016/12/url-bar-resizing
  width: 100%;
  z-index: settings.$z-index;
 }

@mixin wrapper-inner($parent) { ... }@mixin wrapper-inner($parent) { 
  display: flex;
  justify-content: center;
  width: 100%;
  max-height: settings.$max-height-small;
  max-width: settings.$small-width;

  @include media.query(min-md) {
    width: settings.$default-width;
    max-width: settings.$max-width;
    max-height: settings.$max-height-large;
  }

  #{$parent}__container {
    width: 100%; // To override width that get set in the modal container which cannot be removed at this moment for previous version CDS-4946
  }
 }

@mixin large-wrapper-inner($parent) { ... }@mixin large-wrapper-inner($parent) { 
  max-height: settings.$max-height-small;
  width: settings.$small-width;

  @include media.query(min-md) {
    width: settings.$default-width;
    max-width: settings.$max-width-large;
    max-height: settings.$max-height-large;
  }

  #{$parent}__container {
    width: 100%; // To override width that get set in the modal container which cannot be removed at this moment for previous version CDS-4946
  }
 }

@mixin focus-trap() { ... }@mixin focus-trap() { 
  display: flex;
  width: 100%;
  justify-content: center;
 }

@mixin container() { ... }@mixin container() { 
  @include kib-foundations.elevation('high');

  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: settings.$background-color;
  border: none;
  border-radius: settings.$border-radius;
  mask-image: radial-gradient(white, black);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  position: relative; // Note: Override native style for dialog in Chrome. To maintain the same container wrapper height (flexbox) and remain vertically centered in both Chrome and Safari9/9/21
  max-height: 100%;
  max-width: 100%;

  @include media.query(min-md) {
    width: settings.$default-width;
    max-width: settings.$max-width;
    max-height: settings.$max-height-large;
  }
 }

@mixin container-large() { ... }@mixin container-large() { 
  width: settings.$small-width;
  max-height: 100%;

  @include media.query(min-md) {
    max-width: settings.$max-width-large;
    max-height: settings.$max-height-large;
  }
 }

@mixin header() { ... }@mixin header() { 
  padding: spacing.get('s4');
  border-bottom: settings.$divider-size kib-divider.$divider-color-default solid;
  display: flex;
  align-items: center;

  @include media.query(min-md) {
    padding: settings.$large-spacing;
  }
 }

@mixin title() { ... }@mixin title() { 
  @include typography.style-as('display-6');

  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: spacing.get('s4');
  flex: 1;
  color: settings.$title-text-color;
 }

@mixin divider($position) { ... }@mixin divider($position) { 
  content: '';
  background: settings.$divider-background;
  height: settings.$divider-size;
  position: absolute;
  right: 0;
  left: 0;
  z-index: settings.$divider-z-index;

  @if $position == 'top' {
    top: 0;
  }

  @if $position == 'bottom' {
    bottom: 0;
  }
 }

@mixin divider-cover() { ... }@mixin divider-cover() { 
  content: '';
  background-image: linear-gradient(
    #{settings.$background-color},
    #{settings.$background-color} 100%
  );
  z-index: settings.$divider-cover-z-index;
  height: settings.$divider-size;
  flex-shrink: 0;
 }

@mixin body() { ... }@mixin body() { 
  padding: 0;
  @include typography.style-as('paragraph-1');

  display: flex;
  flex: 1 1 0%;
  color: settings.$body-text-color;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  flex-direction: column;

  &::before {
    @include divider(top);
  }

  &::after {
    @include divider(bottom);
  }
 }

@mixin body-inner() { ... }@mixin body-inner() { 
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;

  &::before,
  &::after {
    @include divider-cover;
  }
 }

@mixin scrolling-shadow() { ... }@mixin scrolling-shadow() { 
  // shadow cover, shadow cover, shadow, shadow
  background: settings.$content-background-gradient;
  background-repeat: no-repeat;
  background-color: settings.$background-color;
  background-size: settings.$content-background-size;
  background-attachment: settings.$content-background-attachment;
  background-position: settings.$content-background-position;
 }

@mixin content() { ... }@mixin content() { 
  padding: spacing.get('s4');
  display: flex;
  flex: 1 1 0%;
  color: settings.$body-text-color;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  flex-direction: column;

  // Provide a fallback style for browsers that don't support :focus-visible */
  &:focus {
    box-shadow: inset 0 0 settings.$focus-border settings.$focus-border settings.$focus-color;
    outline: none;
  }

  // Focus style for keyboard-focus on browsers that do support :focus-visible
  &:focus-visible {
    box-shadow: inset 0 0 settings.$focus-border settings.$focus-border settings.$focus-color;
  }

  // Remove the focus indicator on mouse-focus for browsers that do support :focus-visible
  &:focus:not(:focus-visible) {
    box-shadow: none;
  }

  &--has-controls {
    padding-bottom: 0;
  }

  // smartphones, touchscreens
  @media (hover: hover) and (pointer: coarse) {
    &:focus {
      box-shadow: none;
    }
  }

  @include media.query(min-md) {
    padding: spacing.get('s4', 's6', 's6');

    &--has-controls {
      padding-bottom: 0;
    }
  }
 }

@mixin control() { ... }@mixin control() { 
  @include common.control;

  margin-left: auto;
  align-self: flex-start; // Top-align close button when header is multi lines

  &:focus {
    &::after {
      opacity: 1;
    }
  }

  &:focus-visible {
    &::after {
      opacity: 1;
    }
  }

  &:focus:not(:focus-visible) {
    &::after {
      opacity: 0;
    }
  }
 }

@mixin actions() { ... }@mixin actions() { 
  padding: spacing.get('s4');

  @include media.query(min-md) {
    padding: spacing.get('s6');
  }
 }

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

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

$z-index: 5001 !default;

$divider-z-index: 10 !default;

$divider-cover-z-index: 11 !default;

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

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

$default-margins: kib-core.dimensions-get('default') * 2 !default;

$small-margins: kib-core.dimensions-get('small') * 2 !default;

$large-margins: unit.rem(32px) * 2 !default;

$small-width: calc(100% - #{$small-margins}) !default;

$default-width: calc(100% - #{$large-margins}) !default;

$max-height-large: calc(100vh - #{$large-margins}) !default;

$max-height-small: calc(100% - #{$small-margins}) !default;

$focus-border: unit.rem(2px) !default;

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

$title-text-color: color.get('text', 'primary') !default;

$body-text-color: color.get('text', 'primary') !default;

$duration: 0.2s !default;

$large-spacing: spacing.get('s6', 's6', 's4') !default;

$divider-background: kib-divider.$divider-color-default !default;

$divider-size: kib-divider.$divider-size-xs !default;

$content-background-size: 100% unit.rem(40px), 100% unit.rem(40px), 100% unit.rem(14px),
  100% unit.rem(14px);

$content-background-position: 0 0, 0 100%, 0 0, 0 calc(100% - 0.2px);

$content-background-attachment: local, local, scroll, scroll;