@font-face {
  font-family: 'Figtree';
  font-style: normal;
  src: url(Figtree-NonSlashZero.woff2) format('woff2');
  font-weight: 300 900;
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  src: url(Figtree-Italic-NonSlashZero.woff2) format('woff2');
  font-weight: 300 900;
}

@font-face {
  font-family: 'Maple Mono';
  font-style: normal;
  src: url(maplemono-variable.woff2) format('woff2');
  font-weight: 300 900;
}

@font-face {
  font-family: 'Maple Mono';
  font-style: italic;
  src: url(maplemono-italic-variable.woff2) format('woff2');
  font-weight: 300 900;
}

html {
  font-style: normal;
  font-family: 'Figtree', system-ui, sans-serif;
  line-height: 1.5;
  font-feature-settings: "ss02" on;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

ul,
ol {
  line-height: 1.7;
}

svg {
  vertical-align: middle;
}

.inline {
  vertical-align: middle;
  height: 1em;
}

pre,
code {
  font-family: "Maple Mono", ui-monospace, monospace;
}

code,
kbd {
  font-size-adjust: 0.52;
}

kbd {
  font-size: 1em;
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 1px 3px;
  border-bottom-width: 3px;
  border-radius: 2px 2px 3px 3px;
  font-weight: bold;
  font-family: "Maple Mono", ui-monospace, monospace;
}

:is(.pass, .fail, .na) {
  font-weight: 650;
  text-transform: uppercase;
  padding: 1px 2px;
  border-radius: 3px;
  border: 1px solid hsl(var(--hue), 40%, 50%);
  background-color: hsl(var(--hue), 80%, 90%);
  color: hsl(var(--hue), 6%, 25%);
  font-size: .9em;
  font-feature-settings: "ss02" off;

  &.fail {
    --hue: 0;
  }

  &.pass {
    --hue: 180;
  }

  &.na {
    --hue: 60;
  }

}

.polypane::before {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  content: "";
  background-image: url(polypane-logo.svg);
  background-size: contain;
  margin-right: .25em;
}

.select {
  border: 1px solid currentcolor;
  padding: 1px 2px;
}

strong.button {
  padding: 1px 2px;
  background-color: #eee;
  display: inline-flex;
  font-weight: normal;
  vertical-align: middle;

  &.icon-only {
    border-radius: 4px;
  }

  & svg {
    width: .95em;
    margin-right: .05em;
  }

  &.tab {
    border-bottom: 2px solid #ccc;
  }
}