_betterize-slim.sass

@charset "UTF-8"

////////////////////////////////////////////////////////////////////////////////
/// ------------------------------------------------------------------------ ///
/// betterize-slim.sass -- Modern normalization, better cross-browser design ///
/// @author Stephen M Irving -- <@metric_dev> ------------------------------ ///
/// version 2.0.9 -- 03/28/2024 -------------------------------------------- ///
/// ------------------------------------------------------------------------ ///
////////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #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. If an element is unexpectedly
//    shrinking down to nothing, try setting an explicit `min-width` to
//    overwrite this declaration.
// 3. Ensure background images do not repeat by default.

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

// 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-y: hidden`. Setting it here combined with `overflow-x: clip`
//     on the body will prevent the behavior from breaking when an element
//     like a masthead / nav bar is set with `position: sticky`.
//  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
//     iOS browsers for touch-enabled devices.
// 14. Prevent adjustments of font size after orientation changes in iOS.

html
  // 1
  overflow-x: hidden
  overflow-y: scroll
  // 2
  box-sizing: border-box
  // 3
  font-family:
    // Modern pan-device default
    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,
    // Ubuntu
    Ubuntu,
    // GNOME 3+
    Cantarell,
    // KDE Plasma 5+
    'Noto Sans',
    // Basic web fallback
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif,
    // Emoji fonts - Apple, Windows, Linux
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  // 4
  font-size: 1em
  // 5
  line-height: 1.15
  // 6
  word-wrap: break-word
  // 7
  -webkit-hyphens: auto
  hyphens: auto
  // 8
  -moz-tab-size: 4
  tab-size: 4
  // 9
  cursor: default
  // 10
  color-scheme: light dark
  // 11
  scrollbar-gutter: stable
  // 12
  hanging-punctuation: first last
  // 13
  -webkit-tap-highlight-color: transparent
  // 14
  -webkit-text-size-adjust: 100%
  text-size-adjust: 100%

// 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. TODO: May need to modify this value depending on height
  //    of any masthead/top nav bar or similar content
  :has(:target)
    scroll-behavior: smooth
    // 1
    scroll-padding-top: 3rem

/// Normalize the color of the background and text when it is highlighted by
/// selecting it with a mouse.
///
/// @todo - Customize the selection background and color to match your design.

::-moz-selection
  background: #345172
  color: #fff
  text-shadow: none

::selection
  background: #345172
  color: #fff
  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. As a best practice, apply a default `background-color` and `color`.
//    Also set a faint background gradient and apply an inverted scheme
//    for `prefers-color-scheme: dark` To overwrite, use the `background`
//    shorthand property.
// 5. Set a normal font-size default.
// 6. Set an opionated line-height for other elements to inherit.
// 7. Set an explicit `text-align: left` so that we can later use
//    the `inherit` value.
// 8. 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.
// 9. Ensure finer text rendering on Mac OS systems.

body
  // 1
  overflow-x: clip
  // 2
  min-height: 100vh
  min-height: 100dvh
  // 3
  margin: 0
  // 4
  background-color: #fff
  background-image: linear-gradient(135deg, #fff, #f0f2f4)
  color: #212529
  // 5
  font-size: 1rem
  // 6
  line-height: 1.5
  // 7
  text-align: left
  text-align: start
  // 8
  text-rendering: optimizeSpeed
  // 9
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased

  // 6
  @media screen and (max-width: 27.25em), screen and (max-height: 41.25em)
    line-height: 1.4

  // 8
  @media screen and (min-width: 80em)
    text-rendering: optimizeLegibility

  // 4
  @media (prefers-color-scheme: dark)
    background-color: #121212
    background-image: linear-gradient(135deg, #121212, #0c080c)
    color: #fff

// 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 bottom margin with margin-block-end for browesers that support it.
// 3. Correct the font size `<h1>` elements within `<section>` and
//    <article> contexts in Chrome, Firefox, and Safari.

h1
  margin: 0 0 0.67em
  margin-block: 0 0.67em
  margin-inline: 0
  font-size: 2em

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

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

// Limit the inline size of paragraphs to 92 characters.
// Set text-wrap to pretty if possible.

p
  max-inline-size: 92ch
  text-wrap: pretty

// 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,
blockquote,
figure
  margin: 0 0 1rem
  margin-block: 0 1rem
  margin-inline: 0

// Normalize bold and strong across browsers.

b,
strong
  font-weight: bolder
  line-height: inherit

// Normalize small across browsers.

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
  inset-block: auto -0.25em
  inset-inline: auto

sup
  top: -0.5em
  inset-block: -0.5em auto
  inset-inline: auto

// Correct the odd font inheritance and size scaling issues seen
// in some browsers when using `code`, `kbd`, `pre`, and `samp`.

code,
kbd,
pre,
samp
  font-family:
    // 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/OpenOffice fallback
    'Liberation Mono',
    // Default fallback
    monospace,
    // Emoji fonts - Apple, Windows, Linux
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  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: -0.125rem auto
  inset-inline: auto
  display: inline-block
  padding: 0.25rem 0.5rem
  padding-block: 0.25rem
  padding-inline: 0.5rem
  border: 1px solid #b4b4b4
  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
  // 1
  overflow: auto
  // 2
  margin: 0 0 1rem
  // 3
  margin-block: 0 1rem
  margin-inline: 0

: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-bottom: 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 changed behavior.

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

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

table
  vertical-align: middle
  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

caption
  padding: 0.75rem 0
  padding-block: 0.75rem
  padding-inline: 0
  color: #6c757d
  caption-side: bottom
  text-align: inherit

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

th
  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- and Safari 5.1-

dfn
  font-style: italic

// Undo browser default inline start margin

dd
  margin: 0 0 0.5rem
  margin-block: 0 0.5rem
  margin-inline: 0

// Reset all list styles 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

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: 2px solid currentColor
  margin: auto
  background-color: #fff
  color: #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 in Firefox and Safari.
// 2. Change the font styles correctly across browsers.

button,
input,
optgroup,
select,
textarea
  margin: 0
  font-family: inherit
  font-size: 100%
  line-height: 1.15

// 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: rgba(0, 0, 0, 0)
  color: inherit
  letter-spacing: inherit

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

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

// 1. Remove underline from links and add them back as a hover/focus effect.
// 2. Ensure default cursor behavior on links.
// 3. Remove gaps in link underlines in iOS8+ and Safari 8+ (opinionated).
// 4. 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
  // 1
  text-decoration: none
  // 2
  cursor: pointer
  // 3
  -webkit-text-decoration-skip: objects

  // 4
  &:link,
  &:visited
    color: _

  // 1
  &:hover,
  &:focus,
  &:active
    text-decoration: underline

// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).

a:not([href]):not([tabindex])
  color: inherit
  text-decoration: none

  &:hover,
  &:focus
    color: inherit
    text-decoration: none

  &:focus
    outline: 0

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

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']
  // 1
  border-radius: 0
  // 2
  -webkit-appearance: button
  // 3
  cursor: pointer

// 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 the default vertical scrollbar and restric horizontal resizing.

textarea
  overflow: auto
  resize: vertical

input:disabled,
select:disabled,
textarea:disabled
  background-color: #e6e6e6
  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
  border: 0
  margin-bottom: 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 vertical alignment in Chrome, Firefox, and Opera.

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.

::placeholder
  color: inherit
  opacity: 0.54

// Remove the additional :invalid styles in Firefox.

:-moz-ui-invalid
  box-shadow: none

:invalid
  box-shadow: none

// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.

::-webkit-file-upload-button
  font: inherit
  -webkit-appearance: button

// 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: 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

// Change the alignment on media elements in all browsers.

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
  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

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
  list-style: disclosure-closed inside
  counter-increment: list-item 0

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

svg:not([fill])
  fill: currentColor


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #ACCESSIBILITY ----------------------------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// Change the cursor on busy elements in all browsers (opinionated).

[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.

[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
    // 1
    background-attachment: initial !important
    // 2
    transition-duration: 0s !important
    transition-delay: 0s !important
    // 3
    animation-duration: 1ms !important
    animation-delay: -1ms !important
    animation-iteration-count: 1 !important
    // 4
    scroll-behavior: auto !important


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #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
  position: absolute
  overflow: hidden
  clip: rect(0, 0, 0, 0)
  clip-path: inset(50%)
  width: 1px
  height: 1px
  padding: 0
  border: 0
  margin: -1px
  white-space: nowrap

// 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:active,
.sr-only.focusable:focus,
.sr-only--focusable:active,
.sr-only--focusable:focus,
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus,
.visually-hidden--focusable:active,
.visually-hidden--focusable:focus
  position: static
  overflow: visible
  clip: auto
  clip-path: none
  width: auto
  height: auto
  margin: 0
  white-space: inherit

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

.invisible
  visibility: hidden

// Contain floats with classic clearfix.

.clearfix
  &::before,
  &::after
    content: ''
    display: table

  &::after
    clear: both

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

.group
  display: flow-root
  overflow: clip

// Apply flex-based centering to an element directly from markup.

.flex-center
  display: flex
  align-items: center
  justify-content: 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 comment.

#root,
#__next
  isolation: isolate