/**
 * Scrollbars
 */

::-webkit-scrollbar {
  height: var(--spacing-1);
  width: var(--spacing-1);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

/**
 * Sidebars
 */

.sidebar-container {
  --sidebar-width: auto;
}

.es-sidebar,
.on-this-page-wrapper {
  box-sizing: border-box;
  height: calc(100vh);
  overflow: auto;
  position: sticky;
  top: 0;
}

.es-sidebar {
  border-right: 1px solid var(--color-gray-300);
}

.on-this-page-wrapper {
  background-color: var(--color-gray-200);
  border: 1px solid var(--color-gray-300);
  padding: var(--spacing-2);
}

.sub-table-of-contents .toc-item > a {
  border-left: 4px solid transparent;
}

.sub-table-of-contents .toc-item > a:hover {
  border-color: var(--color-gray-400);
}

.sub-table-of-contents .toc-item > a.active,
.sub-table-of-contents .toc-item.selected > a {
  border-color: var(--color-brand-hc-dark);
}

/**
 * Main Content
 */

.chapter {
  max-width: 80ch;
}

.class-field-description {
  border: 1px solid var(--color-gray-300);
  padding: 1rem;
}

.class-field-description--header {
  background-color: var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-300);
  margin: -1rem -1rem var(--spacing-2);
  padding: var(--spacing-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

/**
 * Tables
 */

.attributes,
.parameters {
  border-collapse: collapse;
  display: table;
}

.attribute,
.parameter,
.prop,
.return {
  display: table-row;
}

.attribute-label,
.attribute-value,
.parameter dd,
.parameter dt,
.return dd,
.return dt {
  border: 1px solid var(--color-gray-300);
  display: table-cell;
  padding: var(--spacing-1);
}

.parameter dd div:empty::before,
.return dd div:empty::before {
  color: var(--color-gray-600);
  content: "No description available.";
  font-style: italic;
}

.attributes {
  margin-bottom: var(--spacing-2);
}

.attribute-label {
  font-weight: bold;
}

.field-since::before {
  content: "✅";
}

.github-link::before {
  content: "🐙";
}