@mixin root-container() { ... }@mixin root-container() { 
  // Initialize custom properties at root level
  --kib-ingress-card-background-color: #{ct.get('ingress-card', 'container', 'active', 'bg-color')};
  --kib-ingress-card-border-color: #{ct.get('ingress-card', 'container', 'active', 'border-color')};
  --kib-ingress-card-border-width: #{ct.get('ingress-card', 'border-width', 'standard')};
  --kib-ingress-card-halo-color: #{ct.get('ingress-card', 'container', 'active', 'halo-color')};
  --kib-ingress-card-halo-width: #{ct.get('ingress-card', 'border-width', 'halo')};
  --kib-ingress-card-halo-gap: #{ct.get('ingress-card', 'border-width', 'halo-gap')};

  @include card.card;
  @include card.card-interactive-default;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  min-height: settings.$min-height;

  padding: spacing.get('s3', 's4');
  border: none; // Override border from kib-foundations.card-interactive
  outline: 0;
  background-color: var(--kib-ingress-card-background-color);
  text-align: left;

  transition: background-color 0.1s ease-in, box-shadow 0.1s ease-in;

  // Inset box-shadow simulates border so width changes (e.g. focus) do not shift layout.
  box-shadow: 0 0 0
      var(--kib-ingress-card-border-width, #{ct.get('ingress-card', 'border-width', 'standard')})
      var(
        --kib-ingress-card-border-color,
        #{ct.get('ingress-card', 'container', 'active', 'border-color')}
      )
      inset,
    0 0 var(--kib-ingress-card-box-shadow-blur, 0)
      var(--kib-ingress-card-halo-width, #{ct.get('ingress-card', 'border-width', 'halo-gap')})
      var(
        --kib-ingress-card-halo-color,
        #{ct.get('ingress-card', 'container', 'active', 'halo-color')}
      );

  @include common.card-interactive-forced-colors;

  @media (hover: hover) and (pointer: fine) {
    @media not (forced-colors: active) {
      // Remove elevation on hover; reset blend mode from elevation (fixes dark-mode contrast).
      &:hover:not(:active):not(:focus-visible) {
        --kib-ingress-card-background-color: #{ct.get(
            'ingress-card',
            'container',
            'hover',
            'bg-color'
          )};
        --kib-ingress-card-border-color: #{ct.get(
            'ingress-card',
            'container',
            'hover',
            'border-color'
          )};
        --kib-ingress-card-halo-color: #{ct.get('ingress-card', 'container', 'hover', 'halo-color')};
      }
    }
  }

  &:focus-visible {
    --kib-ingress-card-background-color: #{ct.get('ingress-card', 'container', 'focus', 'bg-color')};
    --kib-ingress-card-border-color: #{ct.get('ingress-card', 'container', 'focus', 'border-color')};
    --kib-ingress-card-border-width: #{ct.get('ingress-card', 'border-width', 'focused')};
    --kib-ingress-card-halo-color: #{ct.get('ingress-card', 'container', 'focus', 'halo-color')};
  }

  // Remove elevation from press state (darker background already signals press)
  &:active {
    --kib-ingress-card-background-color: #{ct.get(
        'ingress-card',
        'container',
        'pressed',
        'bg-color'
      )};
    --kib-ingress-card-border-color: #{ct.get(
        'ingress-card',
        'container',
        'pressed',
        'border-color'
      )};
    --kib-ingress-card-border-width: #{ct.get('ingress-card', 'border-width', 'standard')};
    --kib-ingress-card-halo-color: #{ct.get('ingress-card', 'container', 'pressed', 'halo-color')};
    background-color: var(--kib-ingress-card-background-color);
    box-shadow: 0 0 0 var(--kib-ingress-card-border-width) var(--kib-ingress-card-border-color)
      inset;
  }

  &:disabled {
    @include common.card-interactive-disabled-hcm;
  }
 }

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

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

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

@mixin icon-wrapper() { ... }@mixin icon-wrapper() { 
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  // 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;
  margin-right: spacing.get('s2');

  > 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() { 
  flex-grow: 1;
 }

@mixin chevron() { ... }@mixin chevron() { 
  display: block;
  flex-shrink: 0;
  width: settings.$arrow-size;
  height: settings.$arrow-size;
  margin: auto;
  margin-right: 0;
 }

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

  display: flex;
  flex-wrap: nowrap;
  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;
  flex-shrink: 0;

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

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

$icon-size: unit.rem(24px) !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: unit.rem(24px) !default;

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