////////////////////////////////////////////////////////////////////////////////
/// ------------------------------------------------------------------------ ///
/// betterize.scss -- Modern normalization for better cross-browser design - ///
/// Special version designed for use with the Smoother library ------------- ///
/// @author Stephen M Irving -- <@metric_dev> ------------------------------ ///
/// version 2.0.8 -- 03/30/2024 -------------------------------------------- ///
/// ------------------------------------------------------------------------ ///
////////////////////////////////////////////////////////////////////////////////


@use 'sass:meta';
@use 'sass:map';
@use 'sass:math';
@use '../smthr/smth' as smth;


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #BASE STYLES: Opinionated defaults and base element styles --------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// 1. Set `box-sizing` to `inherit` while setting the inheritance root,
//    which is the html element, to `box-sizing: border-box`. This is
//    a much more intuitive default box-model than `content-box` as it
//    will make `width` and `height` calculations include `padding` and
//    `border` size.
// 2. Setting `min-width: 0` here is a VERY opinionated decision. It can save
//    you a lot of time trying to figure out a ton of odd and unintuitive
//    behavior, especially with flexbox, but it can also cause unexpected
//    issues if you aren't aware it is here.
// 3. Set background images to `no-repeat` which is a much better default

*,
::before,
::after {
  box-sizing: inherit; // 1
  min-width: 0; // 2
  background-repeat: no-repeat; // 3
}

// Improved default settings for the `::before` and `::after` pseudo-elements

::before,
::after {
  vertical-align: inherit;
  text-decoration: inherit;
}

//  1. Prevent horizontal scrolling from being possible and set vertical
//     scrolling. If you want a page with no scrollbar at all change
//     to `overflow: hidden`.
//  2. Set the root element box-sizing, the universal selector will inherit.
//  3. Add backup font stack that works across all browsers and devices.
//  4. Set the default font size in an accessible way (such that a user
//     can change the default size with the browser settings).
//  5. Normalize default `line-height` across browsers.
//  6. Set a new default for `word-wrap` (alias for `overflow-wrap`) on the root
//     element since it is an inherited property.
//  7. Allow the browser to automatically break words at appropriate hyphenation
//     points. Ensure you specificy a language using the `lang` HTML attribute.
//     to guarantee the automatic hyphenation applied is language-specific.
//  8. Use a more readable tab size.
//  9. Resets the cursor to default across all browsers and for any property
//     that does not explicitly define a different cursor.
// 10. Tell the browser which color schemes the page can be rendered in.
//     Change to just `light` or just `dark` if only doing a single scheme,
//     but both are strongly recommended for accessibility purposes.
// 11. This will reserve space for a scrollbar, preventing unwanted layout
//     shifts as content grows or shrinks. If you are making a page that
//     has no scrolling whatsoever, you can remove or overwrite this rule.
// 12. Allows opening and closing punctuation like quotes at the start and end
//     of a line of text to "hang" outside the line's content box, making the
//     formatting look more aesthetically pleasing.
// 13. Remove the blue tap box over buttons and links in some versions of
//     WebKit browsers for touch-enabled devices.
// 14. Prevent adjustments of font size after orientation changes in iOS.
// 15. Setting @viewport causes scrollbars to overlap content in legacy Edge
//     and IE11, so force a non-overlapping, non-auto-hiding scrollbar.

html {
  $_root-font-size: 1em;

  @if meta.global-variable-exists('base-font-size', 'smth') {
    $_root-font-size: if(
      math.is-unitless(smth.$base-font-size),
      math.div(smth.$base-font-size, 16) * 1em,
      smth.$base-font-size
    );
  }

  overflow-x: hidden; // 1
  overflow-y: scroll; // 1
  box-sizing: border-box; // 2
  font-family:
    // Newer browsers
    system-ui,
    // Safari for OS X and iOS (San Francisco)
    -apple-system,
    // Chrome < 56 for OS X (San Francisco)
    BlinkMacSystemFont,
    // Windows
    'Segoe UI',
    // Android
    Roboto,
    // Basic web fallback
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif,
    // Emoji fonts
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'; // 3
  font-size: $_root-font-size; // 4
  line-height: 1.15; // 5
  word-wrap: break-word; // 6
  -webkit-hyphens: auto; // 7
  hyphens: auto; // 7
  -moz-tab-size: 4; // 8
  tab-size: 4; // 8
  cursor: default; // 9
  color-scheme: light dark; // 10
  scrollbar-gutter: stable; // 11
  hanging-punctuation: first last; // 12
  -webkit-tap-highlight-color: transparent; // 13
  -webkit-text-size-adjust: 100%; // 14
  text-size-adjust: 100%; // 14
  -ms-overflow-style: scrollbar; // 15
}

// If user does not have prefers-reduced-motion on in their OS settings,
// this will keep scrolling from looking jumpy when an anchor link or other
// action automatically scrolls the page.

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  // 1. May need to modify this value depending on height
  //    of any masthead/top nav bar or similar content
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem; // 1
  }
}

::-moz-selection {
  background: smth.$color-selection-highlight;
  color: smth.$color-selection-text;
  text-shadow: none;
}

::selection {
  background: smth.$color-selection-highlight;
  color: smth.$color-selection-text;
  text-shadow: none;
}

// 1. Remove the possibility of a horizontal scrollbar. Combined with the
//    `overflow: hidden scroll` on the html element, it prevents this behavior
//    without causing issues when a top level element is set to
//    `position: sticky`.
// 2. Force the body to always take up the whole screen.
// 3. Remove the body margin in all browsers.
// 4. Set a normal font-size default.
// 5. Set an opionated line-height for other elements to inherit.
// 6. Set an explicit `text-align: start` so that we can later use
//    the `inherit` value and to aid internationalization.
// 7. On devices with small screens (likely phone or tablet), set text-rendering
//    to improve speed. On devices with larger screens (likely laptops and PCs),
//    set text-rendering to improve legibility.
// 8. Ensure finer text rendering on Mac OS systems.

body {
  $_body-font-stack:
    // Newer browsers
    system-ui,
    // Safari for OS X and iOS (San Francisco)
    -apple-system,
    // Chrome < 56 for OS X (San Francisco)
    BlinkMacSystemFont,
    // Windows
    'Segoe UI',
    // Android
    Roboto,
    // Basic web fallback
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif,
    // Emoji fonts
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';

  @if meta.function-exists('font-stack', 'smth') and
    meta.global-variable-exists('font-stacks', 'smth') and
    map.has-key(smth.$font-stacks, 'primary')
  {
    $_body-font-stack: smth.font-stack('primary');
  }

  overflow-x: clip; // 1
  min-height: 100vh; // 2
  min-height: 100dvh; // 2
  margin: 0; // 3
  background:
    smth.$color-body-bg-gradient-light
    smth.$color-body-bg-light
    border-box;
  color: smth.$color-body-light;
  font-family: $_body-font-stack;
  font-size: smth.$body-font-size; // 4
  line-height: 1.5; // 5
  text-align: start; // 6
  text-rendering: optimizeSpeed; // 7

  @include smth.smooth-retina-fonts; // 8

  @media screen and (max-width: 27.25em),
         screen and (max-height: 41.25em) {
    line-height: 1.4; // 5
  }

  @include smth.only-over-width(1280px) {
    text-rendering: optimizeLegibility; // 7
  }

  @media (prefers-color-scheme: dark) {
    background-color: smth.$color-body-bg-dark;
    background-image: smth.$color-body-bg-gradient-dark;
    color: smth.$color-body-dark;
  }
}

// Ensure HTML5 structual elements and media elements display correctly

canvas,
details,
dialog,
legend,
main,
summary,
img,
svg,
video {
  display: block;
}

// Better balance blocks of text in headings, blockqutoes, and figure captions.
// See: https://developer.chrome.com/docs/css-ui/css-text-wrap-balance

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figcaption {
  text-wrap: balance;
}

// 1. Remove the top margin for easier control as it avoids margin collapse.
// 2. Overwrite phyical margin properties with logical properties if supported.
// 3. Correct the font size <h1> elements within <section> and
//    <article> contexts in Chrome, Firefox, and Safari.

h1 {
  margin: 0 0 0.67em; // 1
  margin-block: 0 0.67em; // 2
  margin-inline: 0; // 2
  font-size: 2em; // 3
}

// Remove the top margin for easier control as it avoids margin collapse.

h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-block-start: 0;
}

// 1. Limit the inline size of paragraphs to 92 characters.
// 2. Remove the top margin to avoid margin collapse.
// 3. Set text-wrap to pretty if possible.

p {
  max-inline-size: 92ch; // 1
  text-wrap: pretty; // 3
}

// Remove the top margin for easier control as it avoids margin collapse.
// Reset the side margins and change the bottom margin from `1em` to `1rem`.
// Overwrite bottom margin with margin-block-end for browesers that support it.

p,
dl,
ol,
ul,
figure,
blockquote {
  margin: 0 0 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
}

// Normalize bold and strong

b,
strong {
  font-weight: bolder;
  line-height: inherit;
}

// Normalize small

small {
  font-size: 80%;
  line-height: inherit;
}

// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

// Correct the odd font size, inheritance, overflow and size scaling issues seen
// in some browsers when using `code`, `kbd`, `pre`, and `samp`, and add
// a better default font stack.

code,
kbd,
pre,
samp {
  $_code-font-stack:
    // Modern pan-device default
    ui-monospace,
    // macOS 10.10+
    Menlo,
    // macOS fallback
    Monaco,
    // Windows 6+
    Consolas,
    // Android 4+
    'Roboto Mono',
    // Ubuntu 10.10+
    'Ubuntu Monospace',
    // KDE Plasma 5+
    'Noto Mono',
    // KDE Plasma 4+
    'Oxygen Mono',
    // Linux fallback
    'Liberation Mono',
    // Default fallback
    monospace,
    // Emoji fonts - Apple, Windows, Linux
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';

  @if meta.function-exists('font-stack', 'smth') and
    meta.global-variable-exists('font-stacks', 'smth') and
    map.has-key(smth.$font-stacks, 'monospace')
  {
    $_code-font-stack: smth.font-stack('monospace');
  }

  font-family: $_code-font-stack;
  font-size: 1em;
}

code,
kbd {
  font-size: 0.875em;
}

code {
  border-radius: 3px;
  background-color: #eee;
  word-break: break-word;
}

// Opinionated styling for `<kbd>` elements
// to make them look like keyboard buttons

kbd {
  position: relative;
  top: -0.125rem;
  inset-block-start: -0.125rem;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid rgba(180, 180, 180, 0.95);
  border-radius: 3px;
  background-color: #eee;
  color: #333;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

// 1. Dont't allow content to break outside.
// 2. Remove top margin to avoid vertical margin collapse.
// 3. Overwrite physical margin properties with logical margin properties
//    for browsers that support it to improve internationalization.

pre {
  overflow: auto; // 1
  margin: 0 0 1rem; // 2
  margin-block: 0 1rem; // 3
  margin-inline: 0; // 3
}

:where(pre:has(code)) {
  max-width: 110ch;
  max-inline-size: 110ch;
  max-height: 21.25rem;
  max-block-size: 21.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #eee;
}

:where(pre) code {
  border-radius: 0;
  background-color: inherit;
  word-break: inherit;
}

output {
  display: inline-block;
}

address {
  margin: 0 0 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
  font-style: normal;
  line-height: inherit;
}

// 1. Remove the bottom border in Chrome 57-
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate behavior.

dfn[title],
abbr[title],
acronym[title] {
  border-bottom: none; // 1
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
  cursor: help; // 3
}

// Render tables with collapsed borders and other improved defaults.

table {
  border-spacing: 0;
  border-collapse: collapse;
  border-color: currentColor;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
}

// Child-combinator `tr` for tables without table section elements,
// which can happen with XHTML or dynamically created tables.

table,
table > tr {
  vertical-align: middle;
}

// Matches default `<td>` alignment by inheriting from the `<body>`, or the
// closest parent with a set `text-align`.

th {
  text-align: inherit;
}

caption {
  padding: 0.75rem 0;
  padding-block: 0.75rem;
  color: hsl(208.24, 7.3%, 45.69%);
  caption-side: bottom;
  text-align: inherit;
}

// A better looking horizontal rule that looks the same in all browsers
// and inherits the color of the parent element's text so that it looks good
// by default on all background colors.

hr {
  display: block;
  overflow: hidden;
  box-sizing: content-box;
  height: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid currentColor;
  margin: 1rem 0;
  margin-block: 1rem;
  margin-inline: 0;
  color: inherit;
  opacity: 0.6;
}

// If you do not like the look of the modified <hr> above, and you want a more
// basic horizontal rule without having to overwrite styling yourself, use the
// `hr-light` class.

.hr-light {
  border-top-color: #ccc;
  opacity: 1;
}

// Add the correct font style in Android 4.3-

dfn,
cite {
  font-style: italic;
}

// Undo browser default margins

dd {
  margin: 0 0 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
}

// Remove the list-style for <ol> and <ul> elements used in <nav> elements.

menu,
nav ol,
nav ul,
footer ol,
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

// Remove the margin on nested detail lists in Chrome, Edge, IE, and Safari,

menu dl,
ol dl,
ul dl,
dl dl,
dl ol,
dl ul,
dl menu {
  margin: 0;
}

// Prevent VoiceOver from ignoring list semantics in Safari

nav li:before {
  content: '\200B';
  float: left;
}

// Ensure dialog elements always displayed correctly.

dialog {
  position: absolute;
  right: 0;
  left: 0;
  width: -webkit-intrinsic;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-intrinsic;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1em;
  border: solid;
  margin: auto;
  background-color: if(
    meta.variable-exists('white') or
    meta.global-variable-exists('white', 'smth'),
    smth.$white,
    #fff
  );
  color: if(
    meta.global-variable-exists('gray-9', 'smth'),
    smth.$gray-10,
    #111
  );
}

// Ensures dialog elements without the 'open' attribute are not displayed and
// adds the correct display value for template elements in legacy Edge and IE.

dialog:not([open]),
template {
  display: none;
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #FORMS ------------------------------------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// 1. Remove the margins on controls in Firefox and Safari.
// 2. Change the font styles on controls correctly across browsers.

button,
input,
optgroup,
select,
textarea {
  margin: 0; // 1
  font-family: inherit; // 2
  font-size: 100%; // 2
  line-height: 1.15; // 2
}

// Fix the inconsistent default appearance across browsers.

button,
input,
select,
textarea {
  padding: 0.25em 0.375em;
  padding-block: 0.25em;
  padding-inline: 0.375em;
  background-color: transparent;
  color: inherit;
  letter-spacing: inherit;
}

// Ensure the correct touch action for these elements across browsers.

a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea,
[tabindex='0'] {
  touch-action: manipulation;
}

// 1. Remove the gray background on active links in IE10.
// 2. Remove underline from links and add them back as a hover/focus effect.
// 3. Ensure default cursor behavior on links.
// 4. Remove gaps in link underlines in iOS8+ and Safari 8+ (opinionated).
// 5. Add a fake color to `:link` and `:visited` which will cause those
//    link states to fall back to the color set on the `<a>` itself.

a {
  background-color: transparent; // 1
  text-decoration: none; // 2
  cursor: pointer; // 3
  -webkit-text-decoration-skip: objects; // 4

  &,
  &:link,
  &:visited {
    color: smth.$color-link; // 5
  }

  &:hover,
  &:focus,
  &:active {
    text-decoration: underline; // 2
  }
}

// Remove the inheritance of text transform in Edge, Firefox, and IE.

button,
select {
  text-transform: none;
}

// Fix the inconsistent appearance across browsers.

select {
  padding: 0.125em 1em 0.125em 0.25em;
  padding-block: 0.125em;
  padding-inline: 1em 0.25em;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
}

// Don't show the arrow for multiple choice selects

select[multiple] {
  background-image: none;
}

// Ensure the same default "down arrow" to indicate
// available options in a select box

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}

// 1. Remove the default `border-radius` that macOS Chrome adds.
// 2. Correct the inability to style clickable types in iOS and Safari.
// 3. Changes the default cursor on all buttons to the pointer.

button,
[type='button'],
[type='reset'],
[type='submit'] {
  border-radius: 0; // 1
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
}

// Remove the inner border and padding on focused buttons in Firefox.

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

// Remove the border and padding in all browsers (opinionated)

[type='color'],
[type='range'] {
  padding: 0;
  border-width: 0;
}

// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
// See https://bugs.webkit.org/show_bug.cgi?id=139848
// and https://github.com/twbs/bootstrap/issues/11266

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}

// Remove any default vertical scrollbar and restric horizontal resizing.

textarea {
  overflow: auto;
  resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: hsl(0, 0%, 90.2%);
  cursor: not-allowed;
}

// Reset fieldsets to make them behave more like a standard block element and
// not negatively affect page layout.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

// Correct the text wrapping in Edge and IE and the color inheritance from
// <fieldset> elements in IE. Remove the padding so developers are not caught
// out when they zero out <fieldset> elements.

legend {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
  color: inherit;
  font-size: 1.375rem;
  line-height: inherit;
  white-space: normal;
}

// Add the correct display in Edge 18- and IE, and correct the vertical
// alignment in Chrome, Firefox, and Opera.s

progress {
  display: inline-block;
  vertical-align: baseline;
}

// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.

[tabindex='-1']:focus {
  outline: 0 !important;
}

// Correct the text style of placeholders in Chrome, Edge, and Safari.

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::placeholder {
  color: inherit;
  opacity: 0.54;
}

// Remove the additional :invalid styles in Firefox.

:-moz-ui-invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:invalid {
  box-shadow: none;
}

// Correct the inability to style clickable types in iOS and Safari and change
// font properties to inherit in Safari.

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

// Correct the cursor style of increment and decrement buttons in Chrome.

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

// Correct the appearance in Chrome and Safari and the outline style in Safari.

[type='search'] {
  -webkit-appearance: none;
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

// Remove the inner padding on search cancel buttons and search decorations in
// Chrome and Safari on macOS.

::-webkit-search-decoration,
::-webkit-search-cancel-button {
  -webkit-appearance: none;
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #EMBEDDED MEDIA AND OTHER CONTENT ---------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// Make maintaining media aspect-ratios simple

audio,
canvas,
embed,
iframe,
img,
input,
object,
select,
textarea,
video {
  max-width: 100%;
  height: auto;
}

// Remove the gap between audio, canvas, iframes, images, videos and the bottom
// of their containers: https://github.com/h5bp/html5-boilerplate/issues/440

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

// The styles necessary for the most optimized <img> defaults.
// The other styles associated with img are grouped with other selectors.

img {
  border-style: none;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: smooth;
  font-style: italic;
  shape-margin: 1rem;

  // Render .svg, .bmp, .png, and .svg <img> elements
  // optimizing for quality over speed

  &[src$='.bmp'],
  &[src$='.gif'],
  &[src$='.png'],
  &[src$='.svg'] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimizeQuality;
    image-rendering: crisp-edges;
  }

  // If supported, apply smooth rendering to images likely to be photos

  &[src$='.avif'],
  &[src$='.jp2'],
  &[src$='.jpeg'],
  &[src$='.jpg'],
  &[src$='.jxr'],
  &[src$='.webp'] {
    image-rendering: smooth;
  }
}

// Remove the border on iframes in all browsers.

iframe {
  border: 0;
}

summary {
  cursor: pointer;
}

// https://html.spec.whatwg.org/C/#the-details-and-summary-elements
// The specification doesn't have details > summary:first-of-type but
// it is added because modern Chrome, Safari, and Firefox use
// `summary { display: block }` as there are sites using `<summary>`
// without `<details>`, and they expect that `<summary>` will not display
// as a list-item when doing so. This will add the correct display back
// for those browsers when `<summary>` is used with `<details>`.

details > summary:first-of-type {
  display: list-item;
}

details[open] > summary:first-of-type {
  list-style: disclosure-open inside;
}

// Hide the overflow in legacy Edge and IE.

svg:not(:root) {
  overflow: hidden;
}

// Ensure SVGs without fill attributes inherit color correctly.

svg:not([fill]) {
  fill: currentColor;
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #ACCESSIBILITY - ARIA PROPERTIES ----------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// Add cursor defaults for relevant attributes.

[aria-busy='true'] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

// Change the cursor on disabled, not-editable, or otherwise
// inoperable elements in all browsers.

[aria-disabled='true'],
[disabled] {
  cursor: not-allowed;
}

// Change the display on visually hidden accessible elements
// in all browsers (opinionated).

[aria-hidden='false'][hidden] {
  display: initial;

  &:not(:focus) {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }
}

// Respect prefers-reduced-motion being set by the user in their OS or browser.
// 1. Remove fixed background attachments when prefers-reduced-motion is on.
// 2. Remove transitions when prefers-reduced-motion is on.
// 3. Remove animations when prefers-reduced-motion is on.
// 4. Remove timed scrolling behaviors when prefers-reduced-motion is on.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important; // 1
    transition-duration: 0s !important; // 2
    transition-delay: 0s !important; // 2
    animation-duration: 1ms !important; // 3
    animation-delay: -1ms !important; // 3
    animation-iteration-count: 1 !important; // 3
    scroll-behavior: auto !important; // 4
  }
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #UTILITIES --------------------------------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// Hide visually and from screen readers. It is recommended that you use the
// HTML attribute [hidden] rather than a .hidden class for accessibility.

[hidden] {
  display: none !important;
}

// For Screen Readers Only - Hide visually but not from screen readers.
// https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

.sr-only,
.visually-hidden,
.sr-only--focusable,
.visually-hidden--focusable {
  @include smth.hide-visually;
}

// Extends the `.visually-hidden` and `.sr-only` classes to allow
// the element to be focusable when navigated to via the keyboard:
// https://www.drupal.org/node/897638

.sr-only.focusable,
.sr-only--focusable,
.visually-hidden.focusable,
.visually-hidden--focusable {
  @include smth.hide-visually-focusable;
}

// Hide visually and from screen readers, but maintain layout

.invisible {
  visibility: hidden;
}

.clearfix {
  @include smth.clearfix;
}

// Modern float clearing without clearfix hack.
// Chrome 58+, Safari 13+, Firefox 53+

.group {
  display: flow-root;
  overflow: clip;
}

// A quick way to apply flex-based horizontal and vertical centering
// to an element from the HTML.

.flex-center {
  @include smth.flex-center;
}

// Toggle off an active animation by applying this class with JavaScript

.anim-off {
  animation: none !important;
}

/// The last rule is only needed if your project uses a JS framework or library
/// like React. You want the selector of this rule to select the top level
/// element that your application is rendered within. It ensures that
/// high-priority elements will show up above all others and prevents stacking
/// context bugs and common z-index issues.
///
/// @todo If not using React or something similar, delete this rule and comment.
/// If you are going to use the rule, just delete this todo (or entire comment).

#root,
#__next {
  isolation: isolate;
}