@import (reference) 'abbreviation/abbreviation.less';
@import (reference) 'emphasis/emphasis.less';
@import (reference) 'gloss/gloss.less';
@import (reference) 'transcription/transcription.less';
@import (reference) 'translation/translation.less';

// Interlinear Gloss
//
// An interlinear glossed example or utterance. All content contained within an interlinear example is displayed in a serif Unicode font by default; you may need to override the font family for individual elements. In addition to transcription (`<p class=txn>`) and translation (`<p class=tln>`) lines, you can choose to add analysis lines divided into words (`<ol class=words>`) and/or morphemes (`<ol class=morphemes>`). Be sure to add the `lang` attribute to any lines containing transcriptions of data in the target language. Analysis lines can be `<span>`s or `<div>`s according to your preference. If one word / morpheme has an analysis line, all of the words / morphemes in the example should have those same analysis lines, even if those tags are sometimes empty. It is highly recommended that glosses be divided by non-breaking hyphens (U+2011, or `&#8209;` in HTML) rather than regular hyphens so that glosses do not break across lines. Several CSS variables are made available for you to customize the appearance of the interlinear examples.
//
// Markup: interlinear.html
//
// Styleguide components.interlinear
.igl,
.interlinear {

  // --em-color
  //
  // Set the color of emphasized text by giving a value to the `--em-color` variable.
  //
  // Markup:
  // <div class=igl style="--em-color: red;">
  //   <p class=ex-header><code>.igl { --em-color: red; }</code></p>
  //   <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  //   <ol class=words>
  //     <li class=word>
  //       <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
  //       <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>his</span>
  //       <span class=w-gl><abbr title=responsive>resp</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>heːčt‑iʔi</span>
  //       <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
  //     </li>
  //   </ol>
  //   <p class=tln>an eagle met him</p>
  // </div>
  //
  // Styleguide components.interlinear.--em-color

  // --igl-indent
  //
  // The amount to indent analysis lines. The transcription and translation lines (the first and last lines) will be left unindented. Default: `0em`.
  //
  // Markup:
  // <div class=igl style="--igl-indent: 0em;">
  //   <p class=ex-header><code>.igl { --igl-indent: 0em; }</code></p>
  //   <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  //   <ol class=words>
  //     <li class=word>
  //       <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
  //       <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>his</span>
  //       <span class=w-gl><abbr title=responsive>resp</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>heːčt‑iʔi</span>
  //       <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
  //     </li>
  //   </ol>
  //   <p class=tln>an eagle met him</p>
  // </div>
  // <div class=igl style="--igl-indent: 1em;">
  //   <p class=ex-header><code>.igl { --igl-indent: 1em; }</code></p>
  //   <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  //   <ol class=words>
  //     <li class=word>
  //       <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
  //       <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>his</span>
  //       <span class=w-gl><abbr title=responsive>resp</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>heːčt‑iʔi</span>
  //       <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
  //     </li>
  //   </ol>
  //   <p class=tln>an eagle met him</p>
  // </div>
  //
  // Styleguide components.interlinear.--igl-indent
  --igl-indent: 0em;

  // --igl-horizontal-spacing
  //
  // The amount of space to place between words / morphemes in the analysis lines. Default: `1.25em`.
  //
  // Markup:
  // <div class=igl style="--igl-horizontal-spacing: 0.25em;">
  //   <p class=ex-header><code>.igl { --igl-horizontal-spacing: 0.25em; }</code></p>
  //   <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  //   <ol class=words>
  //     <li class=word>
  //       <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
  //       <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>his</span>
  //       <span class=w-gl><abbr title=responsive>resp</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>heːčt‑iʔi</span>
  //       <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
  //     </li>
  //   </ol>
  //   <p class=tln>an eagle met him</p>
  // </div>
  // <div class=igl style="--igl-horizontal-spacing: 1.25em;">
  //   <p class=ex-header><code>.igl { --igl-horizontal-spacing: 1.25em; }</code></p>
  //   <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  //   <ol class=words>
  //     <li class=word>
  //       <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
  //       <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>his</span>
  //       <span class=w-gl><abbr title=responsive>resp</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>heːčt‑iʔi</span>
  //       <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
  //     </li>
  //   </ol>
  //   <p class=tln>an eagle met him</p>
  // </div>
  //
  // Styleguide components.interlinear.--igl-horizontal-spacing
  --igl-horizontal-spacing: 1.25em;

  // --igl-vertical-spacing
  //
  // The amount of space to place above and below the words / morphemes in the analysis lines. Default: `0.25em`.
  //
  // Markup:
  // <div class=igl style="--igl-vertical-spacing: 0em;">
  //   <p class=ex-header><code>.igl { --igl-vertical-spacing: 0em; }</code></p>
  //   <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  //   <ol class=words>
  //     <li class=word>
  //       <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
  //       <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>his</span>
  //       <span class=w-gl><abbr title=responsive>resp</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>heːčt‑iʔi</span>
  //       <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
  //     </li>
  //   </ol>
  //   <p class=tln>an eagle met him</p>
  // </div>
  // <div class=igl style="--igl-vertical-spacing: 1em;">
  //   <p class=ex-header><code>.igl { --igl-vertical-spacing: 1em; }</code></p>
  //   <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  //   <ol class=words>
  //     <li class=word>
  //       <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
  //       <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>his</span>
  //       <span class=w-gl><abbr title=responsive>resp</abbr></span>
  //     </li>
  //     <li class=word>
  //       <span class=w-m lang=ctm>heːčt‑iʔi</span>
  //       <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
  //     </li>
  //   </ol>
  //   <p class=tln>an eagle met him</p>
  // </div>
  //
  // Styleguide components.interlinear.--igl-vertical-spacing
  --igl-vertical-spacing: 0.25em;

  display    : block;
  font-family: var(--font-unicode-serif);
  line-height: 1.5;

  // Grammatical Glosses
  //
  // Grammatical glosses are displayed in small caps and indicated with either the `.gl` or `.gloss` classes, or by wrapping the gloss in an `<abbr>` tag. Best practice is to include a `title` attribute on grammatical glosses, indicating the term that the gloss stands for; this allows the user to hover over the gloss for its definition. See the [grammatical gloss](#kssref-components-gloss) component.
  //
  // Styleguide components.interlinear.glosses
  abbr, .abbr, .abbreviation, .gl, .gloss {
    .abbr;
    .gl;
  }

  // Example Emphasis
  //
  // Emphasis is indicated using either `<em>` or `<b>` tags (both are semantically valid for this use case), or the `.em` class. See the [example emphasis](#kssref-components-emphasis) component.
  //
  // Styleguide components.interlinear.emphasis
  b, em, .em, .emphasis, strong {
    color      : var(--em-color);
    font-weight: bold;
  }

  // Example Header
  //
  // Example headers (containing information about the interlinear example) are given the `.ex-header` class and styled with an underline. See the [example header component](#kssref-components-example-header) for a demonstration of an example header in use.
  //
  // Styleguide components.interlinear.ex-header
  .ex-header {
    margin-block-end: var(--igl-vertical-spacing);
  }

  .ex-source {
    margin-block: 0em;
  }

  .lit, .literal {
    clear  : left;
    display: inline;
    margin : 0em;
    padding: 0em;
  }

  .morphemes,
  .words {
    display:             flex;
    flex-flow:           row wrap;
    list-style:          none;
    margin:              0em;
    margin-inline-start: var(--igl-indent);
    padding:             0em;
  }

  .morpheme,
  .word {
    display:            flex;
    flex-direction:     column;
    margin-block-end:   var(--igl-vertical-spacing);
    margin-block-start: var(--igl-vertical-spacing);
  }

  .morpheme > *,
  .word > * {
    margin:  0em;
    padding: 0em;
  }

  li + li,
  .morpheme + .morpheme,
  .word + .word {
    margin-inline-start: var(--igl-horizontal-spacing);
  }

  .tln, .translation {
    .tln;
    margin : 0em;
    padding: 0em;
  }

  > .tln:has(+ .lit) {
    display: flow-root;
  }

  .txn, .transcription {
    .txn;
    margin:  0em;
    padding: 0em;
  }

  u, .u, .underline {
    text-decoration: underline;
  }

  .words {
    font-size: smaller;
  }

}