@mixin root-container() { ... }@mixin root-container() { 
  @include typography.style-as('price-medium');
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: baseline;

  --kib-product-price-color: #{settings.$text-color};

  color: var(--kib-product-price-color, #{settings.$text-color});
 }

@mixin strikethrough() { ... }@mixin strikethrough() { 
  grid-column: 2;
  grid-row: 2;
  @if $type == 'xs' {
    @include typography.style-as('price-x-small-strikethrough');
  } @else if $type == 'xxs' {
    @include typography.style-as('price-xx-small-strikethrough');
  } @else {
    @include typography.style-as('price-small-strikethrough');
  }

  --kib-product-price-color: #{settings.$strike-text-color};
 }

@mixin price-per-unit() { ... }@mixin price-per-unit() { 
  grid-column: 2;
  grid-row: 1;

  --kib-product-price-color: #{settings.$strike-text-color};
  @include typography.style-as('caption');
 }

@mixin deal() { ... }@mixin deal() { 
  --kib-product-price-color: #{settings.$deal-text-color};
 }

@mixin font-styles($type: md) { ... }@mixin font-styles($type: md) { 
  @if $type == 'md' {
    @include typography.style-as('utility-5', 'strong');
  } @else if $type == 'xs' {
    @include typography.style-as('utility-3', 'strong');
  } @else if $type == 'sm' {
    @include typography.style-as('utility-4', 'strong');
  } @else if $type == 'lg' {
    @include typography.style-as('utility-6', 'strong');
  } @else if $type == 'xl' {
    @include typography.style-as('utility-7', 'strong');
  }
 }

@mixin label() { ... }@mixin label() { 
  @include kib-core.visually-hidden;
 }

$text-color: color.get('ui-elements', 'price', '03') !default;

$strike-text-color: color.get('ui-elements', 'price', '02') !default;

$deal-text-color: color.get(
  'ui-elements',
  'price',
  'primary'
) !default;