@mixin root-container() { ... }@mixin root-container() { 
  @include typography.style-as('paragraph-1');
  @include severity-info;

  display: flex;
  padding: settings.$spacing;
  border-radius: settings.$border-radius;

  @media (forced-colors: active) {
    outline: unit.rem(1px) solid;
    outline-offset: unit.rem(-1px);
  }
 }

@mixin root-container-large() { ... }@mixin root-container-large() { 
  padding: settings.$spacing-large;
 }

@mixin icon() { ... }@mixin icon() { 
  flex-shrink: 0;
  margin-right: settings.$spacing;
  width: settings.$icon-size;
  height: settings.$icon-size;
  fill: currentColor;

  // ensure the icon is vertically centered
  // with the first line of text for all themes
  margin-top: calc((settings.$icon-size - settings.$computed-message-line-height) / -2);
 }

@mixin icon-with-title() { ... }@mixin icon-with-title() { 
  margin-top: calc((settings.$icon-size - settings.$computed-title-line-height) / -2);
 }

@mixin content() { ... }@mixin content() { 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: break-word;
 }

@mixin content-dismissible() { ... }@mixin content-dismissible() { 
  padding-right: calc(#{settings.$dismiss-button-size} + #{settings.$spacing});
 }

@mixin title() { ... }@mixin title() { 
  @include typography.style-as(settings.$title-token-size);

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

@mixin message() { ... }@mixin message() { 
  @include typography.style-as(settings.$messaging-token-size);

  margin-top: 0;
  margin-bottom: 0;
 }

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

  padding-top: spacing.get('s4');
  display: flex;
  justify-content: flex-end;
 }

@mixin actions-dismissible() { ... }@mixin actions-dismissible() { 
  margin-right: calc((#{settings.$dismiss-button-size} + #{spacing.get('s2')}) * -1);
 }

@mixin action-trigger() { ... }@mixin action-trigger() { 
  @include link.link(false);

  color: currentColor;

  &:not(:first-child) {
    margin-left: spacing.get('s2');
  }
 }

@mixin dismiss-button() { ... }@mixin dismiss-button() { 
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: settings.$dismiss-button-size;
  height: settings.$dismiss-button-size;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;

  &::before {
    $offset: kib-core.dimensions-get('tiny') * -1;

    position: absolute;
    top: $offset;
    left: $offset;
    right: $offset;
    bottom: $offset;
    border: unit.rem(1px) solid currentColor;
    border-radius: 100%;
    content: '';
    opacity: 0;
    transition: opacity 0.2s;
  }

  &:hover,
  &:focus {
    outline: 0;

    &::before {
      opacity: 1;
    }
  }
 }

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

@mixin severity-info() { ... }@mixin severity-info() { 
  background-color: settings.$info-background-color;
  color: settings.$info-text-color;
 }

@mixin severity-success() { ... }@mixin severity-success() { 
  background-color: settings.$success-background-color;
  color: settings.$success-text-color;
 }

@mixin severity-caution() { ... }@mixin severity-caution() { 
  @include severity-warning;
 }

@mixin severity-danger() { ... }@mixin severity-danger() { 
  @include severity-error;
 }

@mixin severity-warning() { ... }@mixin severity-warning() { 
  background-color: settings.$warning-background-color;
  color: settings.$warning-text-color;
 }

@mixin severity-error() { ... }@mixin severity-error() { 
  background-color: settings.$error-background-color;
  color: settings.$error-text-color;
 }

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

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

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

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

$title-token-size: 'section-2' !default;

$messaging-token-size: 'paragraph-1' !default;

$computed-title-line-height: calc(
  typography.get($title-token-size, 'line-height') * typography.get($title-token-size, 'font-size')
) !default;

$computed-message-line-height: calc(
  typography.get($messaging-token-size, 'line-height') *
    typography.get($messaging-token-size, 'font-size')
) !default;

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

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

$info-background-color: color.get('message', 'info', '03') !default;

$info-text-color: color.get('message', 'info', '04') !default;

$success-background-color: color.get('message', 'success', '03') !default;

$success-text-color: color.get('message', 'success', '04') !default;

$warning-background-color: color.get-color-property('message', 'warning', '03') !default;

$warning-text-color: color.get-color-property('message', 'warning', '04') !default;

$error-background-color: color.get-color-property('message', 'error', '03') !default;

$error-text-color: color.get-color-property('message', 'error', '04') !default;

$caution-background-color: $warning-background-color !default;

$caution-text-color: $warning-text-color !default;

$danger-background-color: $error-background-color !default;

$danger-text-color: $error-text-color !default;