@import "./_resets.css";
@import "./_properties.css";

/* Utilities */
@import "./utilities/_typography.css";
@import "./utilities/_wrapper.css";
@import "./utilities/_auto-grid.css";
@import "./utilities/_flow.css";
@import "./utilities/_full-width.css";
@import "./utilities/_skip-link.css";
@import "./utilities/_fluid-grid.css";
@import "./utilities/_fluid-flex.css";
@import "./utilities/_boxed.css";
/* @import "./utilities/_subtag.css"; */
@import "./utilities/_button.css";
@import "./utilities/_pill.css";
@import "./utilities/_links.css";
@import "./utilities/_inputs.css";
@import "./utilities/_marker-highlight.css";
@import "./utilities/_cover-img.css";
@import "./utilities/_prism.css";
@import "./utilities/_hr.css";

/* Blocks */
@import "./blocks/_header.css";
@import "./blocks/_nav.css";
@import "./blocks/_toc.css";
@import "./blocks/_tags.css";
@import "./blocks/_staggered-list.css";
@import "./blocks/_snapped-scroll.css";
@import "./blocks/_intro.css";
@import "./blocks/_request.css";
@import "./blocks/_footer.css";
@import "./blocks/_imgTextOverlap.css";
@import "./blocks/_post.css";
@import "./blocks/_blockquote.css";
@import "./blocks/_code.css";
@import "./blocks/_card.css";
@import "./blocks/_callout.css";
@import "./blocks/_invoice.css";
@import "./blocks/_progress-bar.css";
@import "./blocks/_social-svg.css";
@import "./blocks/_writing-nav.css";
@import "./blocks/_event.css";

@import "./utilities/_tokens.css";

#progressBar {
  -webkit-appearance: none;
  appearance: none;
  position: fixed;
  width: 100%;
  height: calc(var(--size-300) * 0.75);
  z-index: 99;
  background: var(--color-primary);
  transition: width 0.2s ease-out;
}

#share-text > button {
  text-shadow: -1px -1px 0 var(--background-color),
    1px -1px 0 var(--background-color), -1px 1px 0 var(--background-color),
    1px 1px 0 var(--background-color);
  color: currentColor;
  background: none;
  border: none;
  background-image: linear-gradient(
      90deg,
      var(--background-color),
      var(--background-color)
    ),
    linear-gradient(90deg, var(--color-accent-dark), var(--color-accent-dark));
  background-repeat: no-repeat;
  background-position: -100% 95%, 0% 95%;
  background-size: 0px 0.35ex, 100% 0.35ex;
  text-decoration: none;
  transition: background-size 0.4s ease-in;
  font-weight: bold;
  cursor: pointer;
  font-size: clamp(var(--size-400), var(--size-450), var(--size-500));
  font-family: var(--base-font);
  padding: 0;
}

#share-text > button:hover,
#share-text > button:focus {
  /* color: var(--green); */
  background-repeat: no-repeat;
  background-position: 0% 95%, 0% 95%;
  background-size: 100% 0.35ex, 100% 0.35ex;
  text-decoration: none;
}

body[grid-aware-site="true"] img {
  cursor: pointer;
}

body[grid-aware-site="true"] {
  --heading-font: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --base-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
}