/* Subhead */

.Subhead {
  display: flex;
  padding-bottom: var(--yattho-stack-padding-condensed, 8px);
  margin-bottom: var(--yattho-stack-gap-normal, 16px);
  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
  flex-flow: row wrap;
  justify-content: flex-end; /* Keep actions right aligned. */
}

/* Modifier class to give a lot of breathing room between sections of content. */
.Subhead--spacious {
  margin-top: var(--base-size-40, 40px);
}

/* <h2> sized heading with normal font weight */
.Subhead-heading {
  font-size: 24px;
  font-weight: var(--base-text-weight-normal, 400);
  flex: 1 1 auto;
  order: 0;
}

/* Make the text bold and red for dangerous content */
.Subhead-heading--danger {
  font-weight: var(--base-text-weight-semibold, 600);
  color: var(--color-danger-fg);
}

/* One-liner of supporting text */
.Subhead-description {
  font-size: var(--yattho-text-body-size-medium, 14px);
  color: var(--color-fg-muted);
  flex: 1 100%;
  order: 2;
}

/* Add 1 or 2 buttons to the right of the heading */
.Subhead-actions {
  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);
  align-self: center;
  justify-content: flex-end;
  order: 1;

  & + .Subhead-description {
    margin-top: var(--base-size-4, 4px);
  }
}