/* STANDARD REBUILD ----------------------------------------------------------

   Rebuild useful styles typically provided by browsers. This stylesheet should
   be loaded after 'reset.css'.

   Now we can do it consistently.

*/



/* -- DEFINE BLOCK ELEMENTS --------------------------------------------------
      Ensure block elements are rendered as such.

      The third set are not normally block elements, but are more convenient
      when rendered as such.

   ------------------------------------------------------------------------- */

article, aside, blockquote, body, dd, details, dialog, div, dl, dt, fieldset,
figure, figcaption, footer, form, header, hgroup, hr, main, menu, nav, ol, p,
pre, section, ul {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
}

audio, canvas, img, svg, video {
  display: inline-block;
}



/* -- RENDER TABLE ELEMENTS --------------------------------------------------
      Ensure table elements are rendered as such.

      Stretch tables to fill the width of their containing element.

   ------------------------------------------------------------------------- */

table {
  display: table;
  table-layout: auto;
  width: 100%;
}

tbody {
  display: table-row-group;
}

thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

tr {
  display: table-row;
}

td, th {
  display: table-cell;
}

colgroup {
  display: table-column-group;
}

col {
  display: table-column;
}



/* -- MAKE SELECTIONS VISIBLE ------------------------------------------------
      This does not cause selections to be possible, only visible if enabled.

   ------------------------------------------------------------------------- */

::-moz-selection, ::selection {
  background-color: var(--env--reset--background-color);
}



/* -- CHANGE FONT SIZE WITH ELEMENTS -----------------------------------------
      Cause the <small>, <sub>, and <sup> elements to change font size by
      default, consistently. Cause <sub> and <sup> elements to change vertical
      placement (now relative to baseline).

      A size of 75% transforms the standard 16pt browser default to 12pt.

   ------------------------------------------------------------------------- */

small, sub, sup {
  font-size: 75%;
}

sub {
  bottom: -0.4em;
}

sup {
  top: -0.3em;
}



/* -- HR ---------------------------------------------------------------------
      Set optimal defaults in all browsers (expected box sizing in Firefox,
      and overflow behaviour in Edge and IE.
   ------------------------------------------------------------------------- */

hr {
  box-sizing: content-box;
  overflow: visible;
  height: 1px;
  width: 100%;
  background-color: var(--env--reset--background-color);
}



/* -- LINKS ------------------------------------------------------------------
      Change the cursor for links.
   ------------------------------------------------------------------------- */

a {
  cursor: pointer;
}



/* -- FORMS: BUTTONS ---------------------------------------------------------
      Make buttons visible, and interaction with mouse apparent.
   ------------------------------------------------------------------------- */

button, [type="button" i], [type="reset" i], [type="submit" i] {
  display: inline-block;
  cursor: pointer;
  /* background-color: var(--env--reset--background-color); */
}



/* -- FORMS: SELECT ----------------------------------------------------------
      Make select boxes visible, and interaction with mouse apparent.
   ------------------------------------------------------------------------- */

select {
  display: inline-block;
  cursor: pointer;
  width: var(--env--reset--input-width);
  /* background-color: var(--env--reset--background-color); */
}



/* -- FORMS: INPUTS ----------------------------------------------------------
      Make inputs input-able.

      Attribute selectors are used to minimize specificity without generically
      targeting all <input> elements. This makes it possible to use a bare
      class name to override these defaults.
   ------------------------------------------------------------------------- */

[type="email" i],
[type="number" i],
[type="password" i],
[type="search" i],
[type="tel" i],
[type="text" i],
[type="url" i] {
  display: inline-block;
  cursor: text;
  width: var(--env--reset--input-width);
  /* background-color: var(--env--reset--background-color); */
}

[type="file" i] {
  display: inline-block;
  cursor: pointer;
  width: var(--env--reset--input-width);
  /* background-color: var(--env--reset--background-color); */
}



/* -- FORMS: CHECKBOX AND RADIO CONTROLS -------------------------------------
      This will make these controls visible, but CSS must be used
      to set `:checked` else it won't be indicated.

      Attribute selectors are used to minimize specificity without generically
      targeting all <input> elements. This makes it possible to use a bare
      class name to override these defaults.
   ------------------------------------------------------------------------- */

[type="checkbox" i], [type="radio" i] {
  display: inline-block;
  cursor: pointer;
  height: 0.75em;
  width: 0.75em;
  /* background-color: var(--env--reset--background-color); */
}



/* -- FORMS: TEXTAREA --------------------------------------------------------
      Disable scrollbar, but show resize handle. Vertical resize only.
      Break words with too many characters to avoid horizontal scroll.
      Allow character returns in Firefox with `white-space: pre-wrap`.
   ------------------------------------------------------------------------- */

textarea {
  display: block;
  height: calc(var(--env--reset--line-height) * 1em);
  min-height: calc(var(--env--reset--line-height) * 1em);
  width: var(--env--reset--input-width);
  resize: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  cursor: text;
  /* background-color: var(--env--reset--background-color); */
}



/* -- FORMS: FIELDSETS -------------------------------------------------------
      This should make the element usable.
   ------------------------------------------------------------------------- */

fieldset {
  position: relative;
  display: block;
  padding-top: calc(var(--env--reset--line-height) * 1em);
}

fieldset > legend {
  position: absolute;
  display: block;
  top: 0;
}



/* -- SCROLLBARS AND RESIZE HANDLES ------------------------------------------
      Make scrollbars available without causing page reflow. Enabling
      `webkit-scrollbar` will always also enable `webkit-resizer`.

      https://webkit.org/blog/363/styling-scrollbars/
      https://www.filamentgroup.com/lab/scrollbars/
   ------------------------------------------------------------------------- */
/*
html {
  scrollbar-width: thin;
  scrollbar-color: var(--env--reset--foreground-color) transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--env--reset--foreground-color) transparent;
}

::-webkit-scrollbar {
  display: initial;
  width: var(--env--reset--scroll-width);
  height: var(--env--reset--scroll-width);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  box-sizing: content-box;
}

::-webkit-resizer {}
*/