/*################################*\
    xmeter  |  _base.less
\*################################*/
@import (reference) url('./__settings.less');
@import (reference) url('./__tool.fontsize.less');
@import (reference) url('./__tool.borders.less');
@import (reference) url('./__tool.delims.less');
@import (reference) url('./_h-FontSize.less');
@import (reference) url('./_-mb.less');
@import (reference) url('./_-pt.less');
@import (reference) url('./_-pl.less');


@p-line-height: 1.5; // equivalent to custom prop `--line-height` // COMBAK{FALLBACK} for custom property
@p-color-gray-fallback: rgba(0,0,0, 0.25); // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
@p-color-gray: #00000040;
@p-lh: (@p-line-height * 1rem); // equivalent to unit `1lh`, or custom prop `--lh`

// Contents
// ------------------------------------
// # GENERIC...........................`html` and far-reaching page-wide selectors
// # SECTIONS..........................sections, articles, headers, footers, headings
// # GROUPING..........................grouping content
//   ## Paragraphs.........................paragraphs, block-level textual elements
//   ## Lists..............................ordered, unordered, dictionary
//   ## Tables.............................tables
// # TEXT..............................text-level, phrasing (inline) content and links
//   ## Links..............................inline hyperlinks
//   ## Stress.............................text outstanding from surrounding prose
//   ## Documentation......................documentation elements
//   ## Data...............................machine- or human-readable data
// # FORMS.............................form elements
//   ## Resets.............................resets for form elements
//   ## Textual............................textual form elements
//   ## Buttons............................button-like form elements
// # EMBEDDED..........................images, videos, other media
// # INTERACTIVE.......................user-interactive HTML elements


//++++++++++++++++++++++++++++++++//
//    # GENERIC
//++++++++++++++++++++++++++++++++//
@import (inline) url('reset.css');
@import (inline) url('../../node_modules/normalize.css/normalize.css');

* {
  &,
  &::before,
  &::after {
    content: none;
    box-sizing: border-box;
    column-rule: 0 solid; // change initial column-rule from `medium none`
    @media print {
      background: transparent !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }
  }
  &:not(input):not(button):not(select), // NOTE be careful here: if overriding, specificity > 3
  // &:not(input, button, select), // CHANGED{NEW} selector not supported yet // NB{LINK} <https://caniuse.com/#feat=css-not-sel-list> // TODO once removed, fix NB:LINK (L430)
  &::before,
  &::after {
    border: 0 solid; // change initial border from `medium none`
  }
}

// Set up vertical rhythm system.
// [1] default line-height. Change in your own project if you wish.
// [2] COMBAK{FALLBACK} for `lh` units (https://drafts.csswg.org/css-values/#lh)
// [3] COMBAK{FALLBACK} for custom property
// [4] addresses support for `rem` units (otherwise these would be in `body` selector)
// [5] Root font-size (rem) should *not* be set to an absolute unit, so that users can specify
//     font sizing settings in their user agent.
html {
  --line-height: 1.5; // [1]
  --lh: calc(var(--line-height) * 1rem); // [2]
  font-size: 100%; // [4] [5]
  line-height: @p-line-height; // [3]
  line-height: var(--line-height); // [4]
}

// Vertical spacing between typographical blocks
// NOTE: `textarea` is inline by default but overriding here: should be block (opinionated)
h1, h2, h3, h4, h5, h6,
p, pre, figure, blockquote,
ol, ul, dl,
table,
form, fieldset, textarea,
details {
  .-mb-1;
}
h1 {
  .-pt-1;
}

// Font sizes for text-level elements should be in units of `em` instead of `rem` because
// they should scale with their parents.
// Also, inline elements should not affect vertical rhythm, thus line-heights are zero.
// (The `display` property of these elements should automatically
// have a value of `inline` (do not set manually), either by browser default
// or by CSS **initial value**.)
span, br,
em, strong, i, mark, u, small, s,
dfn, b, abbr, var, q, cite, sup, sub,
data, time, code, kbd, samp,
label {
  line-height: 0;
}

// Elements with a transparent content model
// should display what their contents display.
a, ins, del, slot {
}
//++++ end # GENERIC ++++//


//++++++++++++++++++++++++++++++++//
//    # SECTIONS
//++++++++++++++++++++++++++++++++//
body {
	tab-size: 4;
}
main {
}
section {
}
article {
}
aside {
}
nav {
}
main {
}
header {
}
footer {
}

h1, h2, h3, h4, h5, h6 {
  .h-FontSize;
  font-weight: 700;
}
h1 { --font-scale: @g-font-size-h1; --tracks: 2; }
h2 { --font-scale: @g-font-size-h2; --tracks: 2; }
h3 { --font-scale: @g-font-size-h3; --tracks: 2; }
h4 { --font-scale: @g-font-size-h4;              }
h5 { --font-scale: @g-font-size-h5;              }
h6 { --font-scale: @g-font-size-h6;              }
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  h1 { .font-size-el(@g-font-size-h1; 2); }
  h2 { .font-size-el(@g-font-size-h2; 2); }
  h3 { .font-size-el(@g-font-size-h3; 2); }
  h4 { .font-size-el(@g-font-size-h4;  ); }
  h5 { .font-size-el(@g-font-size-h5;  ); }
  h6 { .font-size-el(@g-font-size-h6;  ); }
}

h1 {
  margin-top: 0;       // COMBAK{FALLBACK}
  margin-top: initial; // COMBAK{FALLBACK}
  margin-top: unset;   // COMBAK{FALLBACK}
  margin-block-start: unset; // undo Normalize
}

address {
}
//++++ end # SECTIONS ++++//


//++++++++++++++++++++++++++++++++//
//    # GROUPING
//++++++++++++++++++++++++++++++++//
div {
}
hr {
  display: none;
}
  //--------------------------------//
  //    ## Paragraphs
  //--------------------------------//
  p {
  }
  pre {
    .h-FontSize;
    --font-scale: @g-font-size-mill;
    text-align: left; // code blocks are always aligned left, regardless of writing mode
    text-indent: 0;
    white-space: pre;
    overflow: auto;
  }
  @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    pre {
      .font-size-el(@g-font-size-mill);
    }
  }
  figure {
    // undo Normalize
    margin-top: 0      ; margin-left: 0      ; margin-right: 0      ; // COMBAK{FALLBACK}
    margin-top: initial; margin-left: initial; margin-right: initial; // COMBAK{FALLBACK}
    margin-top: unset  ; margin-left: unset  ; margin-right: unset  ; // COMBAK{FALLBACK}
    margin-block-start: unset;
    margin-inline: unset;
  }
  figcaption {
  }
  blockquote {
  }
  //---- end ## Paragraphs ----//

  //--------------------------------//
  //    ## Lists
  //--------------------------------//
  ol,
  ul,
  dl {
    li > &,
    dt > &,
    dd > & {
      margin-bottom: 0;       // COMBAK{FALLBACK}
      margin-bottom: initial; // COMBAK{FALLBACK}
      margin-bottom: unset;   // COMBAK{FALLBACK}
      margin-block-end: unset; // undo default vertical spacing for nested lists
    }
  }
  ol,
  ul {
		.-pl-4;
    li > &,
    dt > &,
    dd > & {
			.-pl-2;
    }
  }
  ol {
  }
  ul {
  }
  dl {
  }
  li {
  }
  dt {
  }
  dd {
  }
  //---- end ## Lists ----//

  //--------------------------------//
  //    ## Tables
  //--------------------------------//
  table {
    max-width: 100%; // fluid tables for responsive purposes
    border-collapse: collapse;
    text-align: left; // fix browser BUG // which? file an issue!
  }
  caption {
    text-align: center;
  }
  thead,
  tfoot {
    vertical-align: bottom; // for heading alignment
  }
  thead {
  }
  tfoot {
  }
  tbody {
    vertical-align: top; // for data alignment
  }
  tr {
  }
  th {
    font-weight: 700;
  }
  td {
  }
  //---- end ## Tables ----//
//++++ end # GROUPING ++++//


//++++++++++++++++++++++++++++++++//
//    # TEXT
//++++++++++++++++++++++++++++++++//
// NB: RECOMMENDATION:
// Do not use `br` to indicate line breaks, use CSS instead.
// One exception: MAY use `address > br` to indicate line breaks (by convention)
br {
}
  //--------------------------------//
  //    ## Links
  //--------------------------------//
  a[href] {
    // color: #00e;    // default `:link`
    // color: #551a8b; // default `:visited`
    // color: #f00;    // default `:active`
    color: #06c; // `hsl(210deg, 100%, 40%)` // ratios: 5.57 aginst white, 3.77 against black
    text-decoration: underline; // COMBAK{FALLBACK}
    text-decoration-line: underline;
    cursor: pointer;
  }
  //---- end ## Links ----//

  //--------------------------------//
  //    ## Stress
  //--------------------------------//
  em {
    font-style: italic;
  }
  strong {
    font-weight: 700;
  }
  i {
    font-style: italic;
  }
  mark {
    background-color: fadeout(#ffe168, 50%); // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
    background-color: #ffe16880; // Google-flavored comments in Google Docs
    color: inherit; // COMBAK{FALLBACK}
    color: unset; // unset browser default color
  }
  u {
    color: #360; // `hsl(90deg, 100%, 20%)` // ratios: 6.90 aginst white, 3.04 against black
    // color: #405a04; // StackOverflow-flavored diff // ratios: 7.83 against white, 2.68 against black
    text-decoration: underline; // COMBAK{FALLBACK}
    text-decoration-line: underline;
  }
  small {
    font-size: (@g-font-size-mill * 1em);
  }
  s {
    color: #c03; // `hsl(345deg, 100%, 40%)` // ratios: 5.81 aginst white, 3.62 against black
    // color: #a82400; // StackOverflow-flavored diff // ratios: 7.20 against white, 2.92 against black
    text-decoration: line-through; // COMBAK{FALLBACK}
    text-decoration-line: line-through;
  }
  //---- end ## Stress ----//

  //--------------------------------//
  //    ## Documentation
  //--------------------------------//
  ins {
    // background-color: #d1e1ad; // StackOverflow-flavored diff
    background-color: #acf2bd; // GitHub-flavored diff
  }
  del {
    // background-color: #e5bdb2; // StackOverflow-flavored diff
    background-color: #fdb8c0; // GitHub-flavored diff
  }
  dfn {
    font-style: inherit; // undo Normalize
    font-weight: 700;
  }
  b {
    font-weight: 700;
  }
  abbr {
    &[title] {
      cursor: help;
      text-decoration: none; // COMBAK{FALLBACK} for `text-decoration-line` // also IE fallback for `initial`
      text-decoration-line: initial; // COMBAK{FALLBACK}
      text-decoration-line: unset; // undo Normalize
    }
  }
  var {
    font-style: italic;
  }
  q {
    .quotes-double(); // COMBAK{FALLBACK} for `initial`
    .delims(initial);
  }
  cite {
    font-style: italic;
  }
  sup, sub {
    font-size: (@g-font-size-mill * 1em);
  }
  sup {
  }
  sub {
  }
  //---- end ## Documentation ----//

  //--------------------------------//
  //    ## Data
  //--------------------------------//
  data {
  }
  time {
  }
  code, kbd, samp {
    font-size: (@g-font-size-mill * 1em);
    white-space: nowrap;
    & & {
      font-size: inherit; // undo compounding font sizes
    }
    pre & {
      white-space: inherit; // COMBAK{FALLBACK}
      white-space: unset; // sometimes people put a `code` in a `pre` // override `nowrap` above
    }
  }
  code {
  }
  kbd {
  }
  samp {
  }
  //---- end ## Data ----//
//++++ end # TEXT ++++//


//++++++++++++++++++++++++++++++++//
//    # FORMS
//++++++++++++++++++++++++++++++++//
  //--------------------------------//
  //    ## Resets
  //--------------------------------//
input,
button,
select,
textarea {
  line-height: inherit; // override opinionated Normalize.css
}
  //---- end ## Resets ----//

fieldset {
  padding: 0 1rem;
  html body & { // HACK NB{LINK} (L61) need a specificity of 3 to override generic `*:not(input):not(button):not(select)`
    // NOTE cannot use box-shadow hack due to shadow covering <legend>
    .border-vert(all; 1px);
    @supports (margin-block-start: 0) {
      .border-vert(all; 0);
      .border-block(all; 1px);
    }
    border-style: solid;
    border-color: @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
    border-color: @p-color-gray;
  }
}

  //--------------------------------//
  //    ## Textual
  //--------------------------------//
textarea,
input {
  padding: 0 0.25rem;
  cursor: text;
}
textarea {
  display: block; // override browser default
  height: (6 * @p-lh);         // COMBAK{FALLBACK}
  height: calc(6 * var(--lh)); // COMBAK{FALLBACK}
  height: 6lh;
  width: 30rem;
  @supports (block-size: var(-v)) and (inline-size: 1rem) {
    height: unset;
    width: unset;
    block-size: calc(6 * var(--lh)); // COMBAK{FALLBACK}
    block-size: 6lh;
    inline-size: 30rem;
  }
  font-size: (@g-font-size-mill * 1rem); // .font-size-mod(@g-font-size-mill); // textarea cannot contain any element children
  box-shadow: 0 0 0 1px @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
  box-shadow: 0 0 0 1px @p-color-gray; // HACK vertical border hack
}
input:not([type="button"]):not([type="reset"]):not([type="submit"]) {  // NOTE be careful here: if overriding, specificity > 31
// input:not([type="button"], [type="reset"], [type="submit"]) { // CHANGED{NEW} selector not supported yet // NB{LINK} <https://caniuse.com/#feat=css-not-sel-list>
  font-size: (@g-font-size-mill * 1em);
}
  //---- end ## Textual ----//

  //--------------------------------//
  //    ## Non-Textual
  //--------------------------------//
input[type="color"],
input[type="file"],
input[type="range"],
input[type="checkbox"],
input[type="radio"],
select {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  &:hover {
		// NOTE: Chrome applies these styles to inputs even when their associated labels
		// (having the correct `[for]` attribute) are hovered.
    box-shadow: inset 0 0 0.25rem 0 @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
    box-shadow: inset 0 0 0.25rem 0 @p-color-gray;
  }
}
input[type="checkbox"] {
  border-radius: 25%;
}
input[type="radio"] {
  border-radius: 100%;
}
select {
  font-size: (@g-font-size-mill * 1em);
}
  //---- end ## Non-Textual ----//

  //--------------------------------//
  //    ## Buttons
  //--------------------------------//
input[type="button"],
input[type="reset"],
input[type="submit"],
button {
  padding: 0.125em 0.25em;
  cursor: default;
  &:hover,
  &:focus {
    box-shadow: inset 0 0 0.25rem 0 @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
    box-shadow: inset 0 0 0.25rem 0 @p-color-gray;
  }
}
  //---- end ## Buttons ----//

label {
  cursor: default;
}

select[multiple] > optgroup > option {
  padding-left: 1rem;
  padding-inline-start: 1rem;
}
//++++ end # FORMS ++++//


//++++++++++++++++++++++++++++++++//
//    # EMBEDDED
//++++++++++++++++++++++++++++++++//
// [1] Correct squishing when one dimension changes (override `[height]`/`[width]` attributes)
// [2] fluid images for responsive purposes
// [3] offset `[alt]` attribute text from surrounding copy
// [4] safer alternative to `display: block;`
img {
	height: auto; width: auto; // COMBAK{FALLBACK}
	block-size: auto; inline-size: auto; // [1]
	max-width: 100%; // COMBAK{FALLBACK}
	@supports (max-inline-size: 1%) {
		max-width: unset;
		max-inline-size: 100%; // [2]
	}
  font-style: italic; // [3]
  vertical-align: middle; // [4]
}
//++++ end # EMBEDDED ++++//


//++++++++++++++++++++++++++++++++//
//    # INTERACTIVE
//++++++++++++++++++++++++++++++++//
summary {
  cursor: default;
}

dialog {
  padding: (0.5 * @p-lh) 1rem;         // COMBAK{FALLBACK}
  padding: calc(0.5 * var(--lh)) 1rem; // COMBAK{FALLBACK}
  padding: 0.5lh 1rem;
  &::backdrop {
    background-color: @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
    background-color: @p-color-gray;
  }
}
//++++ end # INTERACTIVE ++++//