@mixin card() { ... }@mixin card() { 
  @include kib-foundations.card;

  position: relative;
  display: flex;
  flex-direction: column;
  max-width: var(--kib-product-card-max-width, #{settings.$max-width});
  min-width: var(--kib-product-card-min-width, #{settings.$min-width});
 }

@mixin card-elevated() { ... }@mixin card-elevated() { 
  @include elevation.apply('emphasis-secondary');
 }

@mixin card-flat() { ... }@mixin card-flat() { 
  border: none;
 }

@mixin card-landscape() { ... }@mixin card-landscape() { 
  display: grid;
  grid-auto-columns: #{settings.$landscape-grid-base-settings};

  --kib-product-card-max-width: none;
 }

@mixin card-landscape-extended() { ... }@mixin card-landscape-extended() { 
  container-type: inline-size;
  grid-template-columns: #{settings.$landscape-grid-extended-settings};
 }

@mixin card-landscape-extended-container() { ... }@mixin card-landscape-extended-container() { 
  @include card-landscape-extended;
 }

@mixin card-landscape-extended-container-query() { ... }@mixin card-landscape-extended-container-query() { 
  @container (min-width: #{unit.rem(660px)}) {
    @include card-landscape-extended-large;
  }
 }

@mixin card-landscape-group() { ... }@mixin card-landscape-group() { 
  grid-auto-columns: #{settings.$landscape-grid-landscape-group-settings};
 }

@mixin card-landscape-extended-large() { ... }@mixin card-landscape-extended-large() { 
  grid-template-columns:
    min(18rem, max(8rem, 30%))
    1fr #{settings.$actions-landscape-extended-width};
 }

@mixin card-landscape-flat() { ... }@mixin card-landscape-flat() { 
  @warn "card-landscape-flat mixin is deprecated";
 }

@mixin card-canvas-only() { ... }@mixin card-canvas-only() { 
  --kib-product-card-max-width: #{settings.$max-width};
 }

@mixin card-condensed() { ... }@mixin card-condensed() { 
  width: settings.$condensed-width;

  --kib-product-card-min-width: #{settings.$condensed-width};
 }

@mixin canvas-flat() { ... }@mixin canvas-flat() { 
  border-radius: settings.$border-radius settings.$border-radius 0 0;
 }

@mixin canvas-landscape() { ... }@mixin canvas-landscape() { 
  --kib-product-card-canvas-height: auto;

  grid-column: 1;
  grid-row: 1 / 3;
  border-radius: settings.$border-radius-inner 0 0 settings.$border-radius-inner;
 }

@mixin canvas-landscape-flat() { ... }@mixin canvas-landscape-flat() { 
  border-radius: settings.$border-radius 0 0 settings.$border-radius;
 }

@mixin canvas-landscape-extended() { ... }@mixin canvas-landscape-extended() { 
  padding: spacing.get('s4');
  grid-row: 1;
 }

@mixin canvas-landscape-extended-container() { ... }@mixin canvas-landscape-extended-container() { 
  @include canvas-landscape-extended;

  @container (min-width: #{unit.rem(440px)}) and (max-width: #{unit.rem(659px)}) {
    @include canvas-landscape-extended-medium;
  }
 }

@mixin canvas-landscape-extended-medium() { ... }@mixin canvas-landscape-extended-medium() { 
  grid-row: 1 / 3;
 }

@mixin canvas-only() { ... }@mixin canvas-only() { 
  width: 100%;
  border-radius: settings.$border-radius-inner;
 }

@mixin canvas-only-flat() { ... }@mixin canvas-only-flat() { 
  border-radius: settings.$border-radius;
 }

@mixin canvas-content() { ... }@mixin canvas-content() { 
  padding: spacing.get('s2');
  text-align: center;
 }

@mixin overlay() { ... }@mixin overlay() { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: settings.$canvas-overlay-background;
  opacity: settings.$canvas-overlay-opacity;
  pointer-events: none;
 }

@mixin flag-container() { ... }@mixin flag-container() { 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
 }

@mixin choices() { ... }@mixin choices() { 
  display: inline-flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  color: settings.$canvas-text-color;
 }

@mixin choices-landscape() { ... }@mixin choices-landscape() { 
  padding: spacing.get('s2');
  padding-bottom: 0;

  > :last-child {
    margin-bottom: 0;
  }
 }

@mixin choices-portrait-spacing() { ... }@mixin choices-portrait-spacing() { 
  $spacing: if($is-condensed == condensed, settings.$spacing, settings.$spacing-base);

  margin-top: calc(0.4rem - $spacing);
 }

@mixin content() { ... }@mixin content() { 
  padding: var(--kib-product-card-content-padding, #{settings.$spacing-base});
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-direction: column;

  & > :last-child {
    margin-bottom: 0;
  }
 }

@mixin content-landscape() { ... }@mixin content-landscape() { 
  --kib-product-card-content-padding: #{settings.$spacing};

  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
 }

@mixin content-landscape-extended() { ... }@mixin content-landscape-extended() { 
  --kib-product-card-content-padding: #{settings.$spacing-base};
 }

@mixin content-flat() { ... }@mixin content-flat() { 
  padding-left: 0;
  padding-right: 0;
 }

@mixin content-bottom() { ... }@mixin content-bottom() { 
  margin-top: auto;
  width: 100%;

  & > :last-child {
    margin-bottom: 0;
  }
 }

@mixin content-condensed() { ... }@mixin content-condensed() { 
  --kib-product-card-content-padding: #{settings.$spacing-condensed};
 }

@mixin actions() { ... }@mixin actions() { 
  padding: 0 settings.$spacing-base settings.$spacing-base;
 }

@mixin actions-flat() { ... }@mixin actions-flat() { 
  padding: 0 spacing.get('s1') settings.$spacing-base;
 }

@mixin actions-condensed() { ... }@mixin actions-condensed() { 
  padding: 0 settings.$spacing settings.$spacing;
 }

@mixin actions-landscape() { ... }@mixin actions-landscape() { 
  padding: 0 settings.$spacing settings.$spacing;
  grid-column: 2;
  grid-row: 2;
 }

@mixin actions-landscape-extended() { ... }@mixin actions-landscape-extended() { 
  padding: settings.$spacing-base;
  grid-column: 1 / 3;
  grid-row: 2;
 }

@mixin actions-landscape-extended-container() { ... }@mixin actions-landscape-extended-container() { 
  @include actions-landscape-extended;

  @container (min-width: #{unit.rem(440px)}) and (max-width: #{unit.rem(659px)}) {
    @include actions-landscape-extended-medium;
  }

  @container (min-width: #{unit.rem(660px)}) {
    @include actions-landscape-extended-large;
  }
 }

@mixin actions-landscape-extended-medium() { ... }@mixin actions-landscape-extended-medium() { 
  grid-column: 2;
  grid-row: 2;
 }

@mixin actions-landscape-extended-large() { ... }@mixin actions-landscape-extended-large() { 
  padding-left: 0;
  grid-column: 3;
  grid-row: 1;
 }

@mixin choices-hide() { ... }@mixin choices-hide() { 
  display: none;
 }

@mixin generator-landscape() { ... }@mixin generator-landscape() { 
  @include card-landscape;

  #{$parent}__canvas {
    @include canvas-landscape;
  }
  #{$parent}__choices {
    @include choices-landscape;

    display: none;

    &--canvas {
      display: inline-flex;
    }
  }
  #{$parent}__content {
    @include content-landscape;
  }
  #{$parent}__actions {
    @include actions-landscape;
  }
 }

@mixin generator-portrait-condensed() { ... }@mixin generator-portrait-condensed() { 
  @include card-condensed;
  #{$parent}__content {
    @include content-condensed;
  }
  #{$parent}__actions {
    @include actions-condensed;
  }
 }

@mixin generator-landscape-extended() { ... }@mixin generator-landscape-extended() { 
  @include generator-landscape;
  @include card-landscape-extended;

  @if $size == large {
    @include card-landscape-extended-large;
  }

  #{$parent}__canvas {
    @include canvas-landscape-extended;

    @if $size == medium {
      @include canvas-landscape-extended-medium;
    }
  }
  #{$parent}__content {
    @include content-landscape-extended;
  }
  #{$parent}__actions {
    @include actions-landscape-extended;

    @if $size == medium {
      @include actions-landscape-extended-medium;
    } @else if $size == large {
      @include actions-landscape-extended-large;
    }
  }
 }

// rather than the canvas area.
@mixin canvas { ... }// rather than the canvas area.
@mixin canvas { padding: var(--kib-product-card-canvas-padding, #{spacing.get('s2')});
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  height: var(--kib-product-card-canvas-height, max-content);
  flex: 0 1 auto;
  min-width: var(--kib-product-card-canvas-min-width, #{settings.$canvas-min-width});
  color: settings.$canvas-text-color;
  background-color: settings.$canvas-background-color;
  border-radius: settings.$border-radius-inner settings.$border-radius-inner 0 0;
  overflow: hidden;

  > :last-child:not(.kib-product-flag) {
    padding-bottom: 0;
    margin-bottom: 0;
  } }

/// Change default card into landscape layout
@mixin generator-landscape($parent: '.kib-product-card') { ... }/// Change default card into landscape layout
@mixin generator-landscape($parent: '.kib-product-card') { @include card-landscape;

  #{$parent}__canvas {
    @include canvas-landscape;
  }
  #{$parent}__choices {
    @include choices-landscape;

    display: none;

    &--canvas {
      display: inline-flex;
    }
  }
  #{$parent}__content {
    @include content-landscape;
  }
  #{$parent}__actions {
    @include actions-landscape;
  } }

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

$min-width: unit.rem(200px) !default;

$condensed-width: unit.rem(160px) !default;

$canvas-text-color: color.get('text', 'tertiary') !default;

$canvas-background-color: color.get('static', 'gray1', '50') !default;

$canvas-min-width: unit.rem(80px) !default;

$canvas-overlay-background: color.get('static', 'gray1', '900') !default;

$canvas-overlay-opacity: 0.03 !default;

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

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

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

$landscape-grid-base-settings: string.unquote('min(24.8rem, max(8rem, 35%)) 1fr') !default;

$landscape-grid-extended-settings: string.unquote('min(18rem, max(8rem, 35%)) 1fr') !default;

$landscape-grid-landscape-group-settings: string.unquote('min(14rem, max(8rem, 40%)) 1fr') !default;

$actions-landscape-extended-width: unit.rem(230px) !default;

$border-radius: card.$border-radius !default;

$border-radius-inner: $border-radius - card.$border-width !default;