a {
  color: var(--link-color);
}
mark {
  background-color: inherit;
  color: inherit;
  font-weight: var(--font-weight-medium);
}
mark[family] {
  background-color: var(--color-neutral-lighter);
  cursor: pointer;
  font-weight: var(--font-weight-body);
  padding: 0 var(--rhythm-0_5);
}
mark.ner[family] {
  cursor: auto;
  padding: 0;
  background-color: transparent;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.highlight {
  background-color: var(--selected-background-color);
  color: var(--selected-text-color);
  border-radius: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 
Suppress the focus outline on elements that cannot be accessed via keyboard. 
This prevents an unwanted focus outline from appearing around elements that
might still respond to pointer events.
Credit: https://github.com/suitcss/base
*/
[tabindex='-1']:focus {
  outline: 0 !important;
}
/* remove the focus style when clicking on element */
:focus:not(:focus-visible) {
  outline: none;
}

.sw-dropdown ul {
  list-style: none;
  margin: 0;
  max-height: var(--rhythm-32);
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 0;
}

.sw-text-rendering {
  background: var(--container-background-color);
  margin: 0 auto;
  max-width: 800px;
  padding: var(--rhythm-1) var(--rhythm-2);

  p {
    padding: var(--rhythm-1) var(--rhythm-2);
  }
}

.external-html-content {
  p {
    margin-top: 0;

    &:last-child {
      margin-bottom: 0;
    }
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 100%;
    &:first-child {
      margin-top: 0;
    }
  }
}

.sw-paragraphs-container {
  display: flex;
  flex-direction: column;
  gap: var(--paragraph-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.title-m {
  font-size: var(--font-size-title-m);
  font-weight: var(--font-weight-title-m);
  line-height: var(--line-height-title-m);
}

.title-xs {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-title-xs);
}

.title-xxs {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-title-xxs);
}

.title-s {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-title-s);
}

.body-m {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.body-s {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.body-xs {
  font-size: var(--font-size-xsmall);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body-xs);
}

pre > code {
  white-space: pre-wrap;
}
