NavListSection.css

.header {
  padding: 0 var(--gutter-static-two-thirds);
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--color-border);
}

.label {
  margin-bottom: var(--gutter-static-two-thirds);
  font-size: var(--font-size-large);
  color: var(--color-text-p2);
  line-height: 1.2;
  transition: color 0.07s;
}

.content {
  position: relative;
  composes: focusWithinIndicator withNegativeOffset from "../sharedStyles/focusWithinIndicator.css";
}

.root:focus-within {
  & .label {
    color: var(--color-text);
  }
}

/*
  Set height of header to add spacing when stacking NavList's
  with one or more NavListSection's as children:

  <NavList>
    <NavListSection>
  </NavList>
  <-- create spacing -->
  <NavList>
    <NavListSection>
  </NavList>

  ...and when NavListSections are stacked in general:
  <NavList>
    <NavListSection>
    <NavListSection>
    <NavListSection>
  </NavList>
 */
.navListSectionControl + .navListSectionControl,
.root + .root {
  & .header {
    min-height: 62px;
  }
}