// expand on normalize css with a few extra defaults
@use "utilities/mixins" as *;
@use "utilities/fonts" as *;


::selection {
  background: var(--primary);
  color: var(--on-primary);
}

html {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-style: var(--font-style);
  @include fontType(text);

  color: var(--on-app);
  background: var(--app);

  // @include scrolls(var(--primary-hover), var(--gray-70), 10);
}

body {
  padding: 0;
  // padding: env(safe-area-inset-top)
  //          env(safe-area-inset-right)
  //          env(safe-area-inset-bottom)
  //          env(safe-area-inset-left);

  // overflow-x: crop;

}

main {
  width: min(var(--content-width), 100vw - (var(--padding) * 4));
  margin-inline: auto;
}

header {}

code {
 font-family: monospace;
 background: var(--surface);
 padding-inline: .25em;
}

cite {
  font: $font-italic;
  @include fontType(text);
}

blockquote {
  margin: 0;
  padding-inline-start: .5em;
  border-inline-start: 2px solid var(--border);
}

ul,
ol {
  padding-left: 1.2em;
}

ul {
  ::marker {
    color: var(--primary)
  }
}

menu {
  list-style: none;
  padding: 0;
  margin: 0;

  a {
    text-decoration-color: transparent;
  }
}

abbr {
  text-decoration-style: dotted;
  text-underline-offset: .25em;
  cursor: help;
}

em {
  font: $font-italic;
}

strong {
  font: $font-body;
  font-weight: bold;
}

mark {
  background-color: var(--highlight-color);
  padding-inline: .25em;
}

p {
  // @include fontType(text);
}

img {
  width: 100%;
}

[type="search"] {
  -webkit-appearance: searchfield; /* 1 */
  outline-offset: -2px; /* 2 */
}


:where(a, a:visited) {
  color: var(--on-app);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: .25em;
  text-decoration-thickness: 2px;
}

:where(a:hover) {
  color: var(--primary-hover);
  text-decoration-color: var(--primary-hover);
}



/* utilities */
.-noScroll {
  height: 100vh;
  width: 100vw;
  overflow: clip;
}
