/* Block */

.root {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  align-content: flex-end; /* preserve alignment of items when wrapped */

  min-height: 2rem; /* ~32px (26px design * 1.2 design-to-app ratio) */
  box-sizing: content-box;

  padding-bottom: 0.75rem; /* 12px (~10px design * 1.2 design-to-app ratio) */
  border-bottom: var(--global-border-width--normal) solid
    var(--global-color-primary--dark);
}

/* Elements */

/* Do not allow external margin styles */
/* FAQ: Examples: global `h1`–`h6`, user styles) */
.heading {
  margin: 0;

  /* FAQ: It is simpler to do this in CSS than in JavaScript */
  /* text-transform: capitalize; */

  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: flex-end;
  align-content: flex-end;
  padding-left: 16px;
  padding-right: 16px;
}
/* Header actions are always after heading text */
.heading ~ * {
  max-height: 100%; /* (gently) force oversized elements to fit */
}

/* Modifiers */

.for-form {
  /* FAQ: No styles necessary, but this is here for consistency */
}

.for-table {
  border-bottom: none;
}