.wrapper {
  margin-bottom: var(--ds-size-14);
}
.component {
  margin-bottom: var(--ds-size-8);
  :is(h3, .ds-heading) {
    margin-top: 0;
    margin-bottom: var(--ds-size-3);
  }
}
.props {
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid var(--ds-color-neutral-border-subtle);
  border-radius: var(--ds-border-radius-lg);
  background-color: var(--ds-color-neutral-surface-default);
  dl {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: subgrid;
    row-gap: var(--ds-size-2);
    column-gap: var(--ds-size-4);
    font-size: 0.875rem;
    padding: var(--ds-size-5);
    margin: 0;
    border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
    &:last-child {
      border-bottom: none;
    }
    dt {
      grid-column: 1 / 2;
      color: var(--ds-color-neutral-text-subtle);
      &.propName {
        grid-column: 1 / 3;
        margin-bottom: var(--ds-size-1);
      }
    }
    dd {
      margin: 0;
      grid-column: 2 / 3;
    }
  }
}
.type,
.default {
  color: var(--ds-color-text-subtle);
}
.required {
  color: var(--ds-color-neutral-text-subtle);
  margin-inline-start: var(--ds-size-4);
  border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
  line-height: var(--ds-line-height-sm);
  padding: var(--ds-size-1) var(--ds-size-2);
  min-height: var(--ds-size-8);
  border-radius: var(--ds-border-radius-md);
}
