@layer components.root {
  :where(.definition-list) {
    --_border-style: solid;
    --_border-width: 1px;

    display: grid;
    gap: var(--size-3);
    padding: 0;

    &.dotted {
      --_border-style: dotted;
      --_border-width: 2px;
    }

    li {
      display: grid;
      margin: 0;
      padding: 0;

      .term {
        display: block;
        font-weight: 700;
        overflow: hidden;
        position: relative;
      }

      hr {
        display: none;
        margin: 0;
      }
    }

    @container (width > 45ch) {
      gap: var(--size-1);

      li {
        align-items: baseline;
        display: grid;
        gap: var(--size-1);
        grid-template-columns: 1fr auto;

        &:has(hr) {
          grid-template-columns: auto 1fr auto;
        }

        hr {
          background-color: transparent;
          border-block-end: var(--_border-width) var(--_border-style)
            var(--border-color);
          block-size: 2px;
          display: block;
        }

        .term {
          &::after {
            display: inline-block;
          }
        }
        .description {
          color: var(--text-color-2);
        }
      }
    }
  }
}