.data-box {
  $component-name: ".data-box";
  $padding: -1;

  display: grid;
  grid-template-areas:
    "header button"
    "content content"
  ;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: spacing(-2);
  row-gap: spacing(-4);
  padding: spacing($padding);
  max-width: $line-width-max;
  @include set-colors("background-secondary", $rewrite-css-vars: true);

  & + & {
    margin-top: spacing(-1);
  }

  &--hide-header {
    grid-template-areas:
      "content button"
    ;

    #{$component-name} + & {
      margin-top: $width-border;
    }

    #{$component-name}__header {
      @include screenreader-only;
    }
  }

  &__header {
    grid-area: header;
    @include set-font(1, "single", $weight: "bold");
    margin: 0;
  }

  &__button {
    grid-area: button;
    margin-right: spacing(-5, $times: -1);
  }

  .dl {
    grid-area: content;
    margin-top: 0;
    margin-bottom: 0;
  }

  &__content {
    grid-area: content;
    @include content-container;
  }


  &__subtitle {
    @include set-font(0, "single", $weight: "bold");
    margin-top: 0;
    margin-bottom: spacing(-5);

    &:not(:first-child) {
      margin-top: spacing(-2);
    }
  }

  &__empty-item {
    color: color("foreground");
  }
}