@mixin root-container() { ... }@mixin root-container() { 
  @include card.card;
  @include card.card-interactive;

  padding: spacing.get('s3', 's4');
  display: flex;
  width: 100%;

  // This fixes IE11 vertical alignment bug
  // @see https://chewyinc.atlassian.net/browse/CDS-4167
  height: settings.$min-height * 0.5;
  min-height: settings.$min-height;
  align-items: center;
  justify-content: stretch;
  text-align: left;

  &::after {
    display: block;
    margin: auto;
    margin-right: 0;
    flex-shrink: 0;
    width: settings.$arrow-size;
    height: settings.$arrow-size;
    background-image: url(settings.$arrow-background-image);
    content: '';
  }
 }

@mixin root-container-with-subtitle() { ... }@mixin root-container-with-subtitle() { 
  padding-top: spacing.get('s4');
  padding-bottom: spacing.get('s4');
  height: auto;
  align-items: flex-start;
 }

@mixin image-wrapper() { ... }@mixin image-wrapper() { 
  margin-right: spacing.get('s4');
  display: block;

  > svg,
  > img {
    display: block;
    width: auto;
    height: settings.$icon-wrapper-height;
  }
 }

@mixin icon-wrapper() { ... }@mixin icon-wrapper() { 
  margin-right: spacing.get('s2');
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  // This is to prevent a height jump if icon is plain or wrapped in a container
  // without having to set a fixed height to the whole card element.
  height: settings.$icon-wrapper-height;

  > svg,
  > img {
    display: block;
    width: settings.$icon-size;
    height: settings.$icon-size;
  }
 }

@mixin icon-wrapper-with-subtitle() { ... }@mixin icon-wrapper-with-subtitle() { 
  height: settings.$icon-size;
 }

@mixin compact() { ... }@mixin compact() { 
  padding-top: spacing.get('s2');
  padding-bottom: spacing.get('s2');
 }

@mixin content() { ... }@mixin content() { 
  padding-right: spacing.get('s4');
  flex-grow: 1;
 }

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

  display: flex;
  align-items: center;
  justify-content: flex-start;
 }

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

  margin-top: spacing.get('s2');
  margin-bottom: 0;
  color: settings.$subtitle-text-color;
 }

@mixin icon-container() { ... }@mixin icon-container() { 
  @include icon-container.icon-container;

  margin-right: spacing.get('s4');
  flex-shrink: 0;
 }

@mixin icon-container-small() { ... }@mixin icon-container-small() { 
  @include icon-container.icon-container('xs');
 }

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

$icon-wrapper-height: map.get(
  map.get(kib-foundations.$icon-container-sizes, 'xs'),
  'container'
) !default;

$subtitle-text-color: kib-foundations.color-get('text', 'tertiary') !default;

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

$arrow-background-image: kib-core.svg-encode(
  '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M9.31 6.32c.42-.42 1.1-.42 1.5-.02l4.88 4.94c.41.42.41 1.1 0 1.51L10.8 17.7c-.41.41-1.08.41-1.5 0a1.08 1.08 0 0 1 0-1.52L13.44 12 9.3 7.83a1.08 1.08 0 0 1 0-1.51z" /></svg>'
);

$min-height: kib-foundations.rem(52px) !default;