@mixin root-container() { ... }@mixin root-container() { 
  margin-bottom: settings.$root-spacing;
  background: settings.$root-background-color;
 }

@mixin item-wrapper() { ... }@mixin item-wrapper() { 
  border-top: settings.$item-border-size solid settings.$item-border-color;
  border-bottom: settings.$item-border-size solid settings.$item-border-color;
  background: none;

  & ~ & {
    border-top: none;
  }
 }

@mixin item-header-wrapper() { ... }@mixin item-header-wrapper() { 
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  padding: settings.$item-header-padding;
  border: 0;
  text-align: left;
  cursor: pointer;
 }

@mixin item-trigger-wrapper() { ... }@mixin item-trigger-wrapper() { 
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: settings.$item-trigger-padding-horizontal;
  padding-left: settings.$item-trigger-padding-horizontal;
  border: 0;
  background-color: transparent;
  color: settings.$item-trigger-color;
  cursor: pointer;

  // Provide a fallback style for browsers that don't support :focus-visible
  &:focus {
    border-radius: settings.$item-trigger-focus-border-radius;
    outline: none;
    box-shadow: inset 0 0 0 settings.$item-trigger-box-shadow-width
      settings.$item-trigger-box-shadow-color;
  }

  &:focus-visible {
    box-shadow: inset 0 0 0 settings.$item-trigger-box-shadow-width
      settings.$item-trigger-box-shadow-color;
  }

  // remove the focus indicator on mouse-focus for browsers that do support :focus-visible
  &:focus:not(:focus-visible) {
    box-shadow: none;
  }
  @media (forced-colors: active) {
    background: transparent !important;
  }
 }

@mixin item-header-title-wrapper() { ... }@mixin item-header-title-wrapper() { 
  display: flex;
  align-items: center;
 }

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

  margin: 0 settings.$item-title-spacing 0 0;
  color: settings.$item-title-text-color;
 }

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

@mixin item-title-hover() { ... }@mixin item-title-hover() { 
  @media (hover: hover) and (pointer: fine) {
    text-decoration: underline;
  }
 }

@mixin item-description() { ... }@mixin item-description() { 
  @include typography.style-as('product-text-1');
  width: 100%;

  margin: 0;
  color: settings.$item-content-text-color;
 }

@mixin item-subtitle() { ... }@mixin item-subtitle() { 
  margin-right: settings.$item-title-spacing;
  margin-left: calc(settings.$item-title-spacing * -0.5);
 }

@mixin item-icon() { ... }@mixin item-icon() { 
  flex-shrink: 0;
  width: settings.$item-icon-size;
  height: settings.$item-icon-size;
  margin-left: auto;
  color: settings.$item-icon-color;
 }

@mixin item-header-icon() { ... }@mixin item-header-icon() { 
  flex-shrink: 0;
  align-self: flex-start;
  width: settings.$item-icon-size;
  height: settings.$item-icon-size;
  margin: 0 settings.$item-header-icon-margin 0 0;
  color: settings.$item-icon-color;
 }

@mixin item-content() { ... }@mixin item-content() { 
  @include typography.style-as('paragraph-2');
  display: grid;
  visibility: hidden;

  grid-template-columns: 100%;
  grid-template-rows: 0fr;
  padding-right: settings.$item-content-padding-horizontal;
  padding-bottom: 0;
  padding-left: settings.$item-content-padding-horizontal;
  overflow: hidden;
  transition:
    visibility 0.3s ease-in-out,
    grid-template-rows 0.3s ease-in-out,
    padding-bottom 0.3s ease-in-out;
  color: settings.$item-content-text-color;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
 }

@mixin item-content-open() { ... }@mixin item-content-open() { 
  visibility: visible;
  grid-template-rows: 1fr;
  padding-bottom: settings.$item-content-padding-bottom-open;
  overflow: visible;
 }

@mixin item-content-opening() { ... }@mixin item-content-opening() { 
  overflow: hidden;
 }

@mixin item-content-closed() { ... }@mixin item-content-closed() { 
  @include a11y.visually-hidden;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin-top: calc(settings.$item-content-padding-bottom-open * -1);
  padding: 0;

  clip-path: inset(50%);
 }

@mixin item-content-icon() { ... }@mixin item-content-icon() { 
  padding-left: settings.$item-content-padding-left-icon;
 }

@mixin item-content-transition() { ... }@mixin item-content-transition() { 
  min-height: 0;
 }

@mixin item-close-button-focused() { ... }@mixin item-close-button-focused() { 
  display: flex;
  margin-top: settings.$item-close-button-margin-top;
  padding: settings.$item-close-button-padding;
  border: 0;
  background: transparent;
  color: settings.$item-close-link-text-color;
  text-decoration: underline;
  cursor: pointer;
 }

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

$root-background-color: color.get('ct', 'accordion', 'bg-color') !default;

$item-title-text-color: color.get('ct', 'accordion', 'text-primary-color') !default;

$item-content-text-color: color.get('ct', 'accordion', 'text-alternate-color') !default;

$item-trigger-color: color.get('ct', 'accordion', 'trigger-color') !default;

$item-icon-color: color.get('ct', 'accordion', 'icon-color') !default;

$item-icon-size: unit.rem(24px) !default;

$item-border-color: color.get('ct', 'accordion', 'border-color') !default;

$item-border-size: border.get('bw02') !default;

$item-close-link-text-color: color.get('link', 'focus', 'primary') !default;

$item-trigger-box-shadow-width: unit.rem(2px) !default;

$item-trigger-box-shadow-color: color.get('ct', 'accordion', 'focus-color') !default;

$item-trigger-focus-border-radius: border.get('br01') !default;

$item-header-padding: spacing.get('s4') !default;

$item-trigger-padding-horizontal: spacing.get('s4') !default;

$item-header-icon-margin: spacing.get('s4') !default;

$item-content-padding-horizontal: spacing.get('s4') !default;

$item-content-padding-bottom-open: spacing.get('s2') !default;

$item-content-padding-left-icon: spacing.get('s10') !default;

$item-close-button-margin-top: spacing.get('s2') !default;

$item-close-button-padding: spacing.get('s1') !default;

$item-title-spacing: calc($item-header-padding + $item-icon-size) !default;