/* stylelint-disable no-descending-specificity, selector-class-pattern */

html {
  scroll-padding-top: var(--spacing-3);
}

.article-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.module-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  margin-bottom: 0;
}

.access {
  color: #fff;
  background-color: var(--color-gray-600);
  padding: 0.25rem var(--spacing-1);
  font-size: var(--font-size-md);
  border-radius: var(--radius);
  vertical-align: middle;
}

main a.edit-icon {
  height: 1rem;
  width: 16px;
  display: inline-block;
  background: none;
}

.sidebar-container {
  --sidebar-width: min-content;

  padding: 0;
}

.es-sidebar-content .table-of-contents:first-child {
  margin-block-start: 0;
}

.table-of-contents {
  list-style-type: none;
  padding-left: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-3);
}

.sub-table-of-contents {
  padding-left: var(--spacing-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-2);
}

.sub-table-of-contents .sub-table-of-contents {
  padding-left: var(--spacing-3);
  margin-bottom: 0;
}

.table-of-contents a:link {
  background: none;
}

.sub-table-of-contents .toc-item a {
  display: block;
  padding: var(--spacing-1);
  border-radius: var(--radius);
  line-height: var(--line-height-xs);
  color: var(--color-gray-700);
  border-left: 0 solid transparent;
  transition: border-width 0.3s;
}

.sub-table-of-contents .toc-item a:hover {
  border-left: 4px solid var(--color-gray-400);
  border-radius: 0;
}

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

.table-of-contents li {
  margin: 3px 0;
  list-style-type: none;
  color: var(--color-gray-600);
}

li.toc-heading {
  margin-top: var(--spacing-4);
  color: var(--color-gray-600);
}

li.toc-heading:first-child {
  margin-top: 0;
}

.toc-private-toggle {
  display: block;
  margin-top: var(--spacing-2);
}

.class-field-description--header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--spacing-1);
}

a.class-field-description--link {
  margin-left: 0;
  vertical-align: middle;
  background: none;
  cursor: pointer;
}

a.class-field-description--link svg {
  height: 18px;
  fill: var(--color-gray-600);
  transform: rotate(45deg);
  vertical-align: middle;
}

a.class-field-description--link:hover svg {
  fill: var(--color-brand);
}

.parameter,
.return {
  display: flex;
  gap: var(--spacing-1);
}

.parameter dt,
.return dt {
  font-weight: bold;
}

dd {
  margin: 0;
}

.class-field-description .args {
  font-weight: var(--font-weight-2);
}

.parameter-type,
.class-field-description .return-type,
.return .return-type {
  font-style: italic;
  color: var(--color-gray-600);
}

.on-this-page-wrapper .access-checkbox-list {
  display: flex;
  flex-direction: column;
}

.on-this-page-wrapper .api-index-filter {
  margin-top: var(--spacing-2);
}

.on-this-page-wrapper ul {
  margin-top: 0;
}

section.method,
section.property,
section.event {
  margin-bottom: var(--spacing-3);
}

.whoops {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-6);
}

.whoops img {
  width: 240px;
  margin: var(--spacing-2);
}

.search-wrapper {
  position: relative;
}

.search-results {
  position: absolute;
  width: 100%;
  min-width: auto;
  max-height: initial;
  top: 100%;
  background-color: white;
  color: black;
  border-radius: 8px;
  margin-top: 10px;
  border: 2px solid var(--color-card-border);
  overflow-x: auto;
  z-index: 1;
}

@media (width > 500px) {
  .search-results {
    width: 25vw;
    min-width: 500px;
    right: 0;
    max-height: 70dvh;
  }
}

.search-results--instructions,
.search-results--no-results,
.search-results--searching,
.search-results--group-header,
.search-results--result {
  padding: 8px 16px;
}

.search-results--result {
  display: flex;
  border-bottom: 1px solid var(--color-card-border);
  gap: 10px;
  font-size: 14px;
}

.search-results--subcategory-column {
  font-weight: bold;
  max-width: 33%;
  flex-basis: 33%;
  overflow-wrap: break-word;
}

.search-results--content {
  flex: 1 0 0;
}

.search-results--no-results {
  color: var(--color-gray-600);
}

.search-results--group-header {
  background-color: var(--color-info);
}

.visually-hidden,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ember data uses styled elements in markdown blocks that conflict with the
   default styles for blockquotes (because of ::before block that has an
   absolutely positioned quote mark).
 */
blockquote[style]::before {
  all: initial;
}

/* Styles for tables (from markdown)
   Should probably be upstreamed to ember-styleguide
 */
table {
  text-align: left;
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid var(--color-gray-300);
}

table th,
table td {
  padding: var(--spacing-1);
}

/* Taken from guidemaker for search
   Should probably move to ember-styleguide
 */

.es-navbar {
  max-width: 100%;
}

.search-input {
  border-radius: 18px;
  border: 2px solid var(--color-card-border);
  line-height: 30px;
  padding-left: 8px;
  width: 100%;
}

.powered-by-algolia {
  display: flex;
  justify-content: end;
  margin: 8px;
}

.powered-by-algolia a {
  display: flex;
}

@media (width >= 1008px) {
  .navbar-list {
    flex-grow: 1;
  }
}

/* End taken from guidemaker for search */

.scroll-to-top {
  display: none; /* hidden on mobile */
}

@media (width < 845px) {
  .es-sidebar[aria-expanded="true"] {
    padding: var(--spacing-2);
    margin: var(--spacing-2) 0 0 0;
  }

  .es-sidebar-content {
    margin-top: 0;
  }
}

@media (width >= 845px) {
  .es-header {
    padding: 0 var(--spacing-4);
    justify-content: start;
  }

  .es-sidebar {
    padding: var(--spacing-4);
    background-color: var(--color-gray-200);
  }

  .content {
    margin-top: var(--spacing-4);
  }

  .scroll-to-top {
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 10;
    display: block;
    background: var(--color-gray-500);
    border-width: 0;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    transition:
      all 0.2s linear,
      opacity 0.3s;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
  }

  .scroll-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .scroll-to-top:hover {
    transform: scale(1.1);
  }

  .scroll-to-top::after {
    content: "";
    position: absolute;
    left: 16px;
    z-index: 11;
    display: block;
    width: 15px;
    height: 15px;
    border-top: 4px solid var(--color-gray-100);
    border-left: 4px solid var(--color-gray-100);
    transform: rotate(45deg);
    top: 20px;
  }
}

@media (width <= 450px) {
  .whoops {
    flex-direction: column;
    padding: var(--spacing-3);
  }

  .whoops img {
    width: 80%;
    margin: var(--spacing-4);
  }

  .whoops__message {
    margin: var(--spacing-2);
    text-align: center;
  }
}

/* Overriding ember-styleguide because the on-this-page 
   is used for index lists of methods and properties and
   is vital information for the api guides.
   Ideally we'd also switch to the mobile left nav at
   around < 1000px but that requires upstream changes.
*/
@media (width <= 80em) {
  .content-wrapper {
    gap: 2em;
    grid-template-columns: minmax(20ch, 80ch) 10em;
  }

  .on-this-page-wrapper {
    display: block;
  }
}

@media (width <= 500px) {
  .content-wrapper {
    grid-template-columns: minmax(20ch, 80ch);
  }

  .on-this-page-wrapper {
    display: block;
  }
}
