$padding-horizontal: var(
  --wds-list-item-section-padding-horizontal,
  var(--wds-space-300)
);
$font-size: var(
  --wds-list-item-section-font-size,
  var(--wds-font-size-body-tiny)
);
$line-height: var(
  --wds-list-item-section-font-line-height,
  var(--wds-font-line-height-body-tiny)
);
$divider-color: var(--wds-color-border-dark-secondary);

.list-item-section {
  background-color: var(
    --wds-list-item-section-fill,
    var(--wds-color-fill-transparent-secondary)
  );
  padding: var(--wds-list-item-section-padding-top, var(--wds-space-200))
    $padding-horizontal
    var(--wds-list-item-section-padding-bottom, var(--wds-space-200))
    $padding-horizontal;

  &#{&}--subheader {
    background-color: var(
      --wds-list-item-section-fill-neutral,
      var(--wds-color-fill-transparent-secondary)
    );
    padding: var(
        --wds-list-item-section-padding-vertical-neutral,
        var(--wds-space-200)
      )
      $padding-horizontal;
    box-shadow: inset 0 var(--wds-border-width-varied, 1px) 0 0 $divider-color,
      inset 0 calc(-1 * var(--wds-border-width-varied, 1px)) 0 0 $divider-color;
  }

  &#{&}#{&}--subheader &__title {
    font-weight: var(
      --wds-list-item-section-font-weight-neutral,
      var(--wds-font-weight-semi-bold)
    );
    font-size: $font-size;
    line-height: $line-height;
    color: var(
      --wds-list-item-section-title-label-fill-neutral,
      var(--wds-color-black-500)
    );
  }

  &#{&}--divider {
    padding: var(--wds-list-item-section-divider-padding-top, var(--wds-space-200))
      var(--wds-list-item-section-divider-padding-horizontal, var(--wds-space-200))
      var(--wds-list-item-section-divider-padding-bottom, var(--wds-space-200));
  }

  &#{&}--whitespace {
    padding: var(--wds-space-100, 6px) $padding-horizontal;
  }

  &#{&}#{&} &__title-wrapper &__title {
    font-size: $font-size;
    line-height: $line-height;
  }

  &#{&}#{&}:not(#{&}--subheader) &__title-wrapper &__title {
    font-weight: var(
      --wds-list-item-section-font-weight,
      var(--wds-font-weight-semi-bold)
    );
  }
}