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

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

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

  // Aligns the content in the container
  padding-top: unit.rem(2px);
 }

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

@mixin title() { ... }@mixin title() { 
  @include typography.style-as('section-2');

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

@mixin message() { ... }@mixin message() { 
  @include typography.style-as('paragraph-1');

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

@mixin actions() { ... }@mixin actions() { 
  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-reset;

  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;

$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', 'warning', '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;