@use 'sprucecss/scss/spruce' as *;

.description-list {
  background-color: color('surface');
  border: config('border-width-base', $display) solid color('border');
  border-radius: radius('lg');
  container-type: inline-size;
  overflow: hidden;

  &__header {
    align-items: flex-start;
    border-block-end: config('border-width-base', $display) solid color('border');
    display: flex;
    gap: spacer('s');
    justify-content: space-between;
    padding: spacer('m');
  }

  &__heading {
    @include layout-stack('xxs');
  }

  &__title {
    font-size: font-size('h5');
  }

  &__text {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }

  &__list {
    margin: 0;
  }

  &__row {
    display: grid;
    gap: spacer('xxs') spacer('m');
    padding: spacer('s') spacer('m');

    & + & {
      border-block-start: config('border-width-base', $display) solid color('border');
    }

    @include container-query(32rem) {
      grid-template-columns: 12rem 1fr;
    }

    dt {
      color: color('muted');
      font-size: config('font-size-sm', $typography);
      font-weight: 600;
    }

    dd {
      align-items: center;
      color: color('heading');
      display: flex;
      flex-wrap: wrap;
      gap: spacer('xs');
      margin: 0;
    }
  }
}

<section class="description-list" aria-labelledby="description-list-title">
    <header class="description-list__header">
        <div class="description-list__heading">
            <h2 class="description-list__title" id="description-list-title">Account details</h2>
            <p class="description-list__text">Personal information and preferences.</p>
        </div>
        <a class="btn btn--outline-primary btn--sm" href="#">Edit<span class="sr-only"> account details</span></a>
    </header>
    <dl class="description-list__list">
        <div class="description-list__row">
            <dt>Full name</dt>
            <dd>Ava Martinez</dd>
        </div>
        <div class="description-list__row">
            <dt>Email</dt>
            <dd>ava@example.com <span class="badge badge--success">Verified</span></dd>
        </div>
        <div class="description-list__row">
            <dt>Plan</dt>
            <dd>Team · billed yearly</dd>
        </div>
        <div class="description-list__row">
            <dt>Design style</dt>
            <dd>Editorial</dd>
        </div>
        <div class="description-list__row">
            <dt>About</dt>
            <dd>Product designer focused on design systems and accessible color. Based in Madrid.</dd>
        </div>
    </dl>
</section>