@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'],
    section[name="libraries"],
    section[name="labels"],
    form[name='search'] {
      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;
  border-radius: 3px;
  transition: color .1s ease-in-out, outline .1s ease-in-out;
  outline-color: transparent;

  &:hover {
    text-decoration: underline;
  }

  &:focus-visible {
    outline: 2px solid var(--orange-1);
  }
}

.skip-link {
  position: absolute;
  top: 0.8rem;
  left: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--background-1);
  color: var(--foreground-1);
  border-radius: 0.25rem;

  /* hide by default */
  transform: translateY(-200%);
  transition: none;
  z-index: 1000;

  &:focus-visible {
    outline-offset: 0;
    transform: translateY(0);
  }
}

summary {
  cursor: pointer;
}

svg {
  fill: currentColor;
  p > &,
  span > &,
  a > & {
    /* alignment of icons in text is just slightly off */
    vertical-align: -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;

  &:focus-visible {
    outline: 2px solid var(--orange-1);
  }
}

.clipboard-wrapper {
  position: relative;

  pre {
    transition: background .1s ease-out;
    padding-right: 6em;
    word-break: break-word;
  }

  .clipboard-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  &.copied {
    pre {
      background: var(--highlight);
    }
  }
}
.clipboard-button {
  margin: 0;
  padding: 0;
  background: transparent;

  &:hover {
    background: transparent;
    color: var(--foreground-1);
  }

  .check {
    display: none;
    color: var(--green-3);
  }

  &.copied {
    .icon {
      display: none;
    }
    .check {
      display: block;
    }
  }
}

.inline-message {
  box-sizing: border-box;
  background: var(--background-3);
  color: var(--foreground-1);
  padding: 6px 10px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.1rem);
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  max-width: calc(100vw - 1rem);

  &[aria-hidden="true"] {
    visibility: hidden;
  }
  &[aria-hidden="false"] {
    opacity: 1;
  }

  &.placed-north {
    transition: opacity .1s ease-in-out;
    box-shadow: 1px 1px 3px rgb(0 0 0 / .3);
  }
}

section {
  margin-bottom: 1.6rem;

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

  &[name="package"] [id="main-content"]:focus-visible {
    outline: none;
  }
}

.section-heading-link {
  color: inherit;
}