@mixin heading() { ... }@mixin heading() { 
  @include typography.style-as('paragraph-2');

  color: color.get('text', 'secondary');
  margin-bottom: spacing.get('s2');
 }

@mixin group() { ... }@mixin group() { 
  display: flex;
  gap: spacing.get('s2');
  flex-wrap: wrap;
  padding: spacing.get('s1');
  margin-left: calc(spacing.get('s1') * -1);
  margin-right: calc(spacing.get('s1') * -1);
  position: relative;

  // Small screens like mweb, vertical tablet
  @include media.query('max-md') {
    @include horizontal-scroll;
  }
 }

@mixin text-swatch() { ... }@mixin text-swatch() { 
  @include swatch-shared-styles;

  min-width: settings.$text-swatch-container-min-width;
  max-width: settings.$text-swatch-container-max-width;
  min-height: settings.$text-swatch-container-min-height;
  position: relative;
  padding: spacing.get('s2', 's3');
  text-align: left;
  flex: 0 0 auto;
 }

@mixin text-swatch-header() { ... }@mixin text-swatch-header() { 
  @include typography.style-as('paragraph-2');

  color: color.get('link', 'active', 'primary');
 }

@mixin text-swatch-details() { ... }@mixin text-swatch-details() { 
  @include typography.style-as('caption');

  color: color.get('text', 'secondary');

  &:not(:last-child) {
    margin-bottom: spacing.get('s2');
  }
 }

@mixin meta() { ... }@mixin meta() { 
  @include typography.style-as('caption');

  // Floats text to bottom
  margin-top: auto;
 }

@mixin selected() { ... }@mixin selected() { 
  --kib-swatch-border-width: #{settings.$selected-border-width};
  --kib-swatch-border-color: #{color.get('action', 'selection-control', 'on', 'primary')};

  &:focus {
    --kib-swatch-border-color: #{color.get('action', 'selection-control', 'on', 'primary')};
  }

  &:active {
    --kib-swatch-background-color: #{color.get('action', 'cta', 'alternate', '02')};
  }

  @media (forced-colors: active) {
    border-color: Highlight !important;
  }
 }

@mixin unavailable() { ... }@mixin unavailable() { 
  --kib-swatch-border-color: #{color.get('ui-bg', '07')};

  color: color.get('text', 'secondary');

  &:hover {
    --kib-swatch-border-color: #{color.get('ui-bg', '05')};
    --kib-swatch-background-color: #{color.get('action', 'utility', 'alternate', '03')};
  }

  &:focus {
    --kib-swatch-border-color: #{color.get('ui-bg', '05')};
    --kib-swatch-outline-color: #{color.get('action', 'cta', 'alternate', '02')};
  }

  &:active {
    --kib-swatch-border-color: #{color.get('action', 'selection-control', 'off', '02')};
    --kib-swatch-background-color: #{color.get('action', 'utility', 'alternate', '02')};
  }
 }

@mixin both-selected-unavailable() { ... }@mixin both-selected-unavailable() { 
  --kib-swatch-border-color: #{color.get('ui-bg', '05')};

  &:hover,
  &:focus {
    --kib-swatch-border-color: #{color.get('ui-bg', '06')};
  }
 }

@mixin unavailable-text-with-strikethru() { ... }@mixin unavailable-text-with-strikethru() { 
  @include typography.style-as('price-x-small-strikethrough');

  color: color.get('text', 'secondary');

  @media (forced-colors: active) {
    color: GrayText;
  }
 }

@mixin unavailable-text-indeterminate() { ... }@mixin unavailable-text-indeterminate() { 
  color: color.get('text', 'secondary');

  @media (forced-colors: active) {
    color: GrayText;
  }
 }

@mixin text-swatch-text-only() { ... }@mixin text-swatch-text-only() { 
  text-align: center;
  justify-content: center;
 }

@mixin image-swatch() { ... }@mixin image-swatch() { 
  @include swatch-shared-styles;

  width: min-content;
  min-width: settings.$image-swatch-min-width;
  padding: spacing.get('s2');
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;

  img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: settings.$image-swatch-image-width;
    border-radius: settings.$inner-border-radius;
    margin-left: auto;
    margin-right: auto;
  }
 }

@mixin image-swatch-header() { ... }@mixin image-swatch-header() { 
  @include typography.style-as('caption');

  margin-bottom: unit.rem(2px);
  color: color.get('text', 'primary');
 }

@mixin image-strikethrough() { ... }@mixin image-strikethrough() { 
  position: relative;
  width: 100%;
  background-color: transparent;

  img {
    opacity: 0.5;
  }

  &::before {
    content: '';
    position: absolute;
    top: spacing.get('s1');
    left: spacing.get('s1');
    right: spacing.get('s1');
    bottom: spacing.get('s1');
    background-image: linear-gradient(
      to top right,
      transparent calc(50% - #{settings.$strikethrough-height}),
      #{color.get('static', 'gray1', '900')},
      transparent calc(50% + #{settings.$strikethrough-height})
    );
    forced-color-adjust: none;
    z-index: 2;
  }
 }

@mixin swatch-shared-styles() { ... }@mixin swatch-shared-styles() { 
  display: flex;
  gap: unit.rem(2px);
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  border: 0;
  outline: transparent;
  box-shadow: 0 0 0 var(--kib-swatch-border-width, #{settings.$unselected-border-width})
      var(--kib-swatch-border-color, #{color.get('ui-bg', '05')}) inset,
    0 0 0 var(--kib-swatch-outline-width, 0)
      var(--kib-swatch-outline-color, #{color.get('action', 'cta', 'alternate', '02')});
  background-color: var(
    --kib-swatch-background-color,
    #{color.get('action', 'utility', 'alternate', 'primary')}
  );
  border-radius: settings.$border-radius;
  color: color.get('text', 'primary');
  cursor: pointer;

  &:hover {
    --kib-swatch-border-color: #{color.get('action', 'selection-control', 'off', '02')};
    --kib-swatch-background-color: #{color.get('action', 'cta', 'alternate', '03')};
  }

  &:focus {
    --kib-swatch-outline-width: #{settings.$text-swatch-box-shadow-focus};
    --kib-swatch-border-color: #{color.get('action', 'selection-control', 'off', '02')};
  }

  &:active {
    --kib-swatch-background-color: #{color.get('action', 'cta', 'alternate', '02')};
    --kib-swatch-outline-width: 0;
  }
 }

@mixin large() { ... }@mixin large() { 
  min-width: settings.$large-min-width;

  img {
    width: settings.$large-image-width;
  }
 }

@mixin horizontal-scroll() { ... }@mixin horizontal-scroll() { 
  display: flex;
  flex-wrap: nowrap;
  overflow: auto hidden;

  // Hide scrollbar but still allow horizontal scroll
  @include kib-scroller.hide-scrollbar;
 }

@mixin wrap-layout() { ... }@mixin wrap-layout() { 
  @include media.query('max-md') {
    display: flex;
    gap: spacing.get('s2');
    flex-wrap: wrap;
  }
 }

@mixin row-layout() { ... }@mixin row-layout() { 
  @include media.query('min-lg') {
    @include horizontal-scroll;
  }
 }

$unselected-border-width: unit.rem(1px);

$selected-border-width: unit.rem(2px);

$border-radius: unit.rem(8px);

$inner-border-radius: unit.rem(4px);

$text-swatch-container-min-width: unit.rem(60px);

$text-swatch-container-max-width: unit.rem(200px);

$text-swatch-container-min-height: unit.rem(45px);

$text-swatch-box-shadow-focus: unit.rem(3px);

$text-swatch-small-container-width: calc(100vw - spacing.get('s7'));

$image-swatch-min-width: unit.rem(78px);

$image-swatch-image-width: unit.rem(62px);

$large-min-width: unit.rem(100px);

$large-image-width: unit.rem(84px);

$strikethrough-height: unit.rem(1px);