// Examples
//
// A set of one or more linguistic examples. By convention, examples in linguistics publications are numbered (1), (2), (3), etc. To number the examples, wrap them in an `<ol class=examples>` tag, and place each example in a `<li class=ex>` element. All content within an example displays in a serif Unicode font by default; you may need to override the font family for individual elements. `<b>` and `<em>` tags within examples are styled with the `.em` class by default (see the [example emphasis](#kssref-components-emphasis) component).
//
// Markup: examples.html
//
// Styleguide components.examples
.exs, .examples {

  // --example-indent
  //
  // How far to indent each example. Controlling this value is useful when the number of examples on your page reaches multiple place values. Default: `1.5em`.
  //
  // Markup:
  // <ol class=examples style="counter-reset: examples 100;">
  //   <li class='ex A' style="--example-indent: 1.5em;">This is an example with <code>--example-indent</code> set to <code>1.5em</code>.</li>
  //   <li class='ex B' style="--example-indent: 2.5em;">This is an example with <code>--example-indent</code> set to <code>2.5em</code>.</li>
  // </ol>
  //
  // Styleguide components.examples.--example-indent
  --example-indent: 1.5em;

  // --example-margin
  //
  // How much spacing to place before and after each example in the list. Defaults to 1em.
  //
  // Styleguide components.examples.--example-margin
  --example-margin: 1em;

  list-style-type: none;

  // Placing this here lowers its specificity, allowing for other display options in 2-column formats, etc.
  li {
    display: list-item;
  }

  .ex, .example {

    counter-increment  : examples;
    counter-reset      : subexamples;
    margin-block       : var(--example-margin);
    margin-inline-start: var(--example-indent);
    position           : relative;

    &::before {
      content:             '(' counter(examples) ')';
      margin-inline-start: calc(var(--example-indent) * -1);
      margin-inline-end:   var(--example-indent);
      position:            absolute;
    }

  }

  .subexs, .subexamples {

    display            : inline-block;
    list-style-type    : none;
    margin-inline-start: 1.5em;
    padding            : 0em;

    li {
      counter-increment: subexamples;
      padding-block-end: 0.5em;
    }

    li::before {
      content            : counter(subexamples, lower-alpha) '.';
      margin-inline-start: -1.5em;
      position           : absolute;
    }

  }

}

.two-col {
  li {
    column-gap           : 1em;
    display              : grid;
    grid-template-columns: 1fr 1fr;
  }
}

.three-col {
  li {
    column-gap           : 1em;
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}