@mixin root-container() { ... }@mixin root-container() { 
  margin-bottom: spacing.get('s4');
 }

@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;

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

@mixin item-header-wrapper() { ... }@mixin item-header-wrapper() { 
  padding: spacing.get('s4');
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
 }

@mixin item-trigger-wrapper() { ... }@mixin item-trigger-wrapper() { 
  padding-left: spacing.get('s4');
  padding-right: spacing.get('s4');
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  border: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;

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

  &:focus-visible {
    box-shadow: inset 0 0 settings.$item-trigger-box-shadow-width
      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;
  }
 }

@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-hover() { ... }@mixin item-title-hover() { 
  @media (hover: hover) and (pointer: fine) {
    text-decoration: underline;
  }
 }

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

@mixin item-content() { ... }@mixin item-content() { 
  padding-left: spacing.get('s4');
  padding-right: spacing.get('s4');
  @include typography.style-as('paragraph-2');

  color: settings.$item-content-text-color;
  overflow: hidden;
  transition: all 0.3s ease-in-out;

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

@mixin item-content-open() { ... }@mixin item-content-open() { 
  padding-bottom: spacing.get('s2');
 }

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

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

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

$item-icon-size: (kib-core.dimensions-get(default) * 1.25) !default;

$item-border-color: color.get('ui-bg', '04') !default;

$item-border-size: unit.rem(2px) !default;

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

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

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

$item-trigger-focus-border-radius: kib-core.dimensions-get(tiny) !default;

$item-title-spacing: calc(spacing.get('s4') + $item-icon-size) !default;