@import url('style/typography.css');
@import url('style/colors.css');
@import url('style/buttons.css');
@import url('style/header.css');
@import url('style/footer.css');
@import url('style/grid.css');
@import url('style/package.css');
@import url('style/pagination.css');
@import url('style/search.css');
@import url('style/chart.css');
@import url('style/theme-toggle.css');

html {
  height: 100%;

  --max-content: 78rem;
  --max-line: 52rem; /* limit paragraph line length for readability at 2/3 of 78 */
  --side-padding: 1rem;
  @media (min-width: var(--max-content)) {
    --side-padding: 1.6rem;
  }

  /* while initializing search, hide package listings */
  &.initializing {
    [data-list-target='hideme'],
    [data-list-target='section'] {
      visibility: hidden;
    }
  }
}

body {
  background: var(--background-2);
  color: var(--foreground-1);
  margin: 0;
  padding: 0;
}

main {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--side-padding) 3.2rem var(--side-padding);

  html.about-faq & {
    max-width: var(--max-line);
  }

}

a {
  color: var(--orange-2);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

summary {
  cursor: pointer;
}

svg {
  fill: currentColor;
  p > &,
  span > &,
  a > & {
    /* alignment of icons in text is just slighty off */
    position: relative;
    bottom: -1px;
  }
}

code {
  background: var(--highlight);
  padding: 1px 6px;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

pre {
  white-space: break-spaces;
  overflow-x: auto;
  background: var(--background-3);
  &:not(.fallback) {
    padding: 1rem;
  }
  code {
    background: revert;
    border: revert;
    padding: revert;
    border-radius: revert;
    overflow-wrap: revert;
  }
}

h2 {
  color: var(--foreground-2);
}

.screenreader-only {
    width: 1px;
    height: 1px;
    position: absolute;
    top: -999px;
    left: -999px;
    overflow:hidden
}

.hot {
  color: var(--orange-1);
  font-style: italic;
}

.warning {
  color: var(--red-1);
}

human-date[clickable] {
  border-bottom: 1px dotted var(--foreground-4);
  cursor: pointer;
}

.clipboard-wrapper {
  position: relative;
  &.copied pre {
    background: var(--background-4);
  }
  pre {
    transition: background .1s ease-out;
    padding-right: 6em;
    word-break: break-word;
  }
  button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
    padding: 0;
    background: transparent;
    &:hover {
      background: transparent;
      color: var(--orange-1);
    }
  }
}

section {
  margin-bottom: 1.6rem;

  &[data-list-target] {
    padding-top: 16px;
    > h2:first-child,
    .pager-header > h2 {
      padding-top: 0;
    }
  }
}