// This reset combines:
// https://elad2412.github.io/the-new-css-reset/
// https://www.joshwcomeau.com/css/custom-css-reset/
// https://piccalil.li/blog/a-modern-css-reset/

////////////////////////////////////////////////////////////////////////////////////////////////////
// Reset.
////////////////////////////////////////////////////////////////////////////////////////////////////

// Reset all the things (except display).
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset; // Removes user-agent styling.
  display: revert; // Reverts to user-agent style sheet.
}
// Reset default text colors
a,
::placeholder {
  color: unset;
}
// Remove list styles.
ol,
ul {
  list-style: none;
}
// Un-reset a few special cases.
// Reapply the pointer cursor for anchor tags.
a,
button {
  cursor: revert;
}
// Revert the 'white-space' property for textarea elements on Safari.
textarea {
  white-space: revert;
}
// Don't break the <meter> element.
meter {
  -webkit-appearance: revert;
  appearance: revert;
}
// Fix contenteditable in Chromium browsers.
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}
// Fix the 'hidden' attribute.
:where([hidden]) {
  display: none;
}
// Fix the the draggable attribute (only in Chromium and Safari).
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Preferred defaults.
////////////////////////////////////////////////////////////////////////////////////////////////////

// Choose a sensible box sizing model.
// Also, avoid text overflows that could break the layout.
*,
*::before,
*::after {
  box-sizing: border-box;
}

// Smooth scrolling (when the page is in focus, which excludes when searching in-page via Cmd-F).
html:focus-within {
  scroll-behavior: smooth;
}

// Improve rendering of underlines on anchor tags.
a {
  text-decoration-skip-ink: auto;
}

// Sensible defaults for media elements.
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  flex-shrink: 0;
}

// Remove spacing between table cells.
table {
  border-collapse: collapse;
}

// Create a root stacking context.
#root,
#modal {
  isolation: isolate;
}

// Disable animations for users that request it.
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}