$padding-horizontal: var(
  --wds-list-item-section-padding-horizontal,
  var(--wds-space-400, 24px)
);
$font-size: var(
  --wds-list-item-section-font-size,
  var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px))
);
$line-height: var(
  --wds-list-item-section-font-line-height,
  var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px))
);
$divider-color: var(
  --wds-color-border-dark-secondary,
  var(--wsr-color-D60, #dfe5eb)
);

.list-item-section {
  background-color: var(
    --wds-list-item-section-fill,
    var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
  );
  display: flex;
  padding: var(--wds-list-item-section-padding-top, var(--wds-space-200, 12px))
    $padding-horizontal
    var(--wds-list-item-section-padding-bottom, var(--wds-space-100, 6px))
    $padding-horizontal;
  width: 100%;
  box-sizing: border-box;

  &#{&}--subheader {
    background-color: var(
      --wds-list-item-section-fill-neutral,
      var(--wds-color-fill-surface-neutral, var(--wsr-color-D70, #eceff3))
    );
    padding: var(
        --wds-list-item-section-padding-vertical-neutral,
        var(--wds-space-150, 9px)
      )
      $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;
  }

  /* four classes: Text's own typography rule is three, and these have to
     outrank it the way the Stylable `.root:subheader .title` selector did */
  &#{&}#{&}--subheader &__title {
    font-weight: var(
      --wds-list-item-section-font-weight-neutral,
      var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530))
    );
    font-size: $font-size;
    line-height: $line-height;
    color: var(
      --wds-list-item-section-title-label-fill-neutral,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D30, #595d70))
    );
  }

  &#{&}--divider {
    padding: var(
        --wds-list-item-section-divider-padding-top,
        var(--wds-space-100, 6px)
      )
      var(
        --wds-list-item-section-divider-padding-horizontal,
        var(--wds-space-400, 24px)
      )
      var(--wds-list-item-section-divider-padding-bottom, var(--wds-space-100, 5px));
  }

  &#{&}--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-bold, var(--wsr-font-weight-bold, 700))
    );
    color: var(
      --wds-list-item-section-title-label-fill,
      var(--wds-color-text-placeholder, var(--wsr-color-D40, #868aa5))
    );
  }

  &#{&} &__title {
    color: var(--wds-color-text-placeholder, var(--wsr-color-D40, #868aa5));
  }

  & &__title-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
  }

  &#{&}--suffix &__title-wrapper {
    width: 70%;
  }

  & &__suffix-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 30%;
    margin-inline-start: var(--wds-space-100, 6px);
  }

  & &__suffix {
    text-align: end;
    height: auto !important;
  }

  &:not(#{&}--ellipsis) &__suffix {
    white-space: normal;
  }
}