.md-list-header-wrapper {
  .md-list-header-list-item-base {
    color: var(--mds-color-theme-text-secondary-normal);
    font-size: 0.875rem;
  }

  // Override margin between start section and middle/fill sections
  div[data-position='start'] {
    margin-right: 0.5rem;
  }

  &[data-outline-only='true'] {
    .md-list-header-list-item-base {
      height: 1px;
      margin-bottom: 0.25rem;
    }

    &[data-outline-position='bottom'] {
      // the separator is drawn after the list item
      // so need to move it back up a bit
      .md-list-header-list-header-separator {
        margin-top: calc(-0.25rem - 1px);
      }
    }
  }

  // ListItemBase with size 32 is preventing text to be bold (by design).
  // We need to revert this in the ListHeader component. (see bold prop).
  &[data-bold='true'] {
    .md-list-header-list-item-base {
      &[data-position='fill'],
      &[data-position='middle'] > *,
      .md-text-wrapper,
      .md-text-wrapper::part(text) {
        font-weight: 750;
      }
    }
  }

  &[data-outline='true'] {
    border-radius: 0;
    background-clip: padding-box;

    &[data-outline-position='bottom'] {
      &[data-outline-color='primary'] {
        .md-list-header-list-header-separator {
          border-bottom: 1px solid var(--mds-color-theme-outline-primary-normal);
        }
      }

      &[data-outline-color='secondary'] {
        .md-list-header-list-header-separator {
          border-bottom: 1px solid var(--mds-color-theme-outline-secondary-normal);
        }
      }
    }

    &[data-outline-position='top'] {
      &[data-outline-color='primary'] {
        .md-list-header-list-header-separator {
          border-top: 1px solid var(--mds-color-theme-outline-primary-normal);
        }
      }

      &[data-outline-color='secondary'] {
        .md-list-header-list-header-separator {
          border-top: 1px solid var(--mds-color-theme-outline-secondary-normal);
        }
      }
    }
  }
}