:root {
  --swatch-size: 350px;
  font-family: var(--rh-font-family-body-text);
  font-size: var(--rh-font-size-body-text-lg);
  line-height: 1.6;
}

html,
body {
  margin: 0;
  padding: 0;
}

:is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--rh-font-family-heading);
}

#main-header {
  background: var(--rh-color-gray-90);
  color: var(--rh-color-text-primary-on-dark);
  padding: var(--rh-space-xs) var(--rh-space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: sticky;
  top: 0;
  gap: var(--rh-space-lg);
  z-index: 1000;
  --rh-icon-size: var(--rh-size-icon-04);
  & [icon="github"] {
    color: white;
  }
  & svg {
    height: var(--rh-size-icon-04);
    color: white;
  }
  & form {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--rh-space-lg);
  }
}

#main-surface {
  padding-inline: var(--rh-length-2xl);
  & aside {
    float: right;
    padding-inline: 2em;
    & :is(ol, ul) {
      list-style-type: none;
      padding-inline-start: 0;
    }
  }
  &[color-palette="lightest"] {
    --_code-background: var(--rh-color-surface-lighter);
  }
  &[color-palette="darkest"] {
    --_code-background: var(--rh-color-surface-dark);
  }
}

#theme-tokens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rh-space-xl);
}

a {
  color: var(--rh-color-interactive-primary-default);
  &:hover { color: var(--rh-color-interactive-primary-hover); }
  &:focus-within { color: var(--rh-color-interactive-primary-focus); }
  &:active { color: var(--rh-color-interactive-primary-active); }
  &:visited {
    color: var(--rh-color-interactive-primary-visited);
    &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
    &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
    &:active { color: var(--rh-color-interactive-primary-visited-active); }
  }
}

h1 {
  display: contents;
}

:is(h1,h2,h3,h4,h5,h6) a {
  padding-inline-start: 0.5em;
  opacity: 0;
  color: var(--rh-color-border-strong-on-light);
}

:is(h1,h2,h3,h4,h5,h6):is(:hover, :focus-within) a {
  opacity: 1;
}

rh-tooltip:not(:defined) {
  display: none;
}

table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
  text-align: start;
}

#media table :is(td,th):first-child {
  display: none;
}

th {
  text-align: start;
}

tr {
  border-bottom: 1px solid var(--rh-color-border-subtle-on-light);
}

th, td {
  padding-block: var(--rh-space-sm);
  padding-inline: var(--rh-space-md);
}

td:first-child {
  padding-inline-start: var(--rh-space-lg, 16px);
}

&.variants {
  & > td {
    vertical-align: top;
  }

  & details {
    position: relative;
    & table {
      padding-inline: var(--rh-space-lg);
    }
  }

  & summary {
    height: 2.5em;
    width: 2.5em;
    position: absolute;
    translate: 0px -2.25em;
    & rh-tooltip {
      display: block;
      position: absolute;
      inset: 0;
    }
  }

  & > td:first-child {
    padding: 0;
  }
}

td.token > div {
  display: flex;
  flex-flow: row wrap;
  max-width: 350px;
  gap: var(--rh-space-xs);
}

.hex {
  text-transform: uppercase;
}

section {
  /* display: grid; */
  gap: var(--rh-space-md);
  grid-template-columns: repeat(auto-fill, var(--swatch-size));
  padding: var(--rh-space-sm);
  align-items: start;
}

section section {
  padding: 0;
}

article {
  display: grid;
  position: relative;
}

section :is(h2, h3, h4, h5, h6) {
  grid-column: -1/1;
  /* text-transform: capitalize; */
}

code {
  font-size: var(--rh-font-size-body-text-sm);
  font-weight: var(--rh-font-weight-body-text);
}

.comment:empty {
  display: none;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  color: inherit;
  border-radius: var(--rh-border-radius-default);
  border-width: 0;
  padding: var(--rh-space-xs);
  background-color: var(--_code-background);
  cursor: pointer;
  & svg {
    width: 24px;
    fill: currentcolor;
  }
}

.token:is(.value, .name) .copy-button {
  overflow-x: hidden;
  max-width: 400px;
  white-space: pre;
  text-overflow: ellipsis;
}

.token.value .copy-button.color {
  border-radius: var(--rh-border-radius-pill);
  padding-block: 0;
}

.token.value .copy-button.color::after {
  content: '';
  display: inline-block;
  border-radius: 100%;
  background-color: var(--color);
  height: .5rem;
  aspect-ratio: 1;
  margin-inline-start: .5rem;
}

.copy-button:is(:focus, :active, :hover) {
  opacity: 1;
}

.copy-cell {
  text-align: end;
  vertical-align: middle;
}

.copy-button {
  color: var(--rh-color-text-secondary);
}

.on-dark  {
  background-color: var(--rh-color-surface-dark);
  color: var(--rh-color-text-primary-on-dark);
  & .copy-button {
    --_code-background: var(--rh-color-surface-dark);
    color: var(--rh-color-text-secondary-on-dark);
    &:is(:focus, :active, :hover) {
      background: var(--rh-color-interactive-blue-darker);
    }
  }
}

.on-light {
  background-color: var(--rh-color-surface-light);
  color: var(--rh-color-text-primary-on-light);
  & .copy-button {
    --_code-background: var(--rh-color-surface-lighter);
    color: var(--rh-color-text-secondary-on-light);
    &:is(:focus, :active, :hover) {
      background: var(--rh-color-interactive-blue-lighter);
    }
  }
}

.font samp {
  font-size: var(--font-size, var(--rh-font-size-heading-md));
  font-family: var(--font-family, var(--rh-font-family-body-text));
  font-weight: var(--font-weight, var(--rh-font-weight-body-text-regular));
}

.font.family {
  align-content: center;
}

.font :is(samp, .common) {
  text-transform: capitalize;
}

.color {
  & samp {
    color: var(--color);
  }

  &:not(.border, .text) samp {
    aspect-ratio: 1;
    height: var(--rh-length-xl);
    display: block;
    border-radius: 100%;
    border: 1px solid transparent;
    background: var(--color);
  }

  &:not(.border, .text).light samp {
    border-color: var(--rh-color-gray-90);
  }

  &.theme .sample .values {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr;
    place-content: center;
    gap: var(--rh-space-md);
    & samp {
      border-width: 8px;
      border-style: solid;
      &:first-child { border-color: var(--rh-color-surface-light) }
      &:last-child { border-color: var(--rh-color-surface-dark) }
    }
  }
}

.line-height samp {
  line-height: var(--line-height);
}

.box-shadow samp {
  height: var(--rh-length-2xl);
  aspect-ratio: 1;
  border-radius: var(--rh-border-radius-default);
  box-shadow: var(--box-shadow);
  display: block;
}

.border samp {
  width: var(--rh-length-2xl);
  aspect-ratio: 2;
  display: block;
  border-style: solid;
  border-width: var(--width, var(--rh-border-width-md));
  border-color: var(--color, var(--rh-color-border-strong-on-light));
  border-radius: var(--radius, var(--rh-border-radius-default));
}

.opacity samp {
  opacity: var(--opacity);
  background-color: black;
  display: block;
  width: var(--rh-length-xl);
  aspect-ratio: 1;
}

.space samp {
  width: var(--space);
  background-color: black;
  opacity: var(--rh-opacity-60);
  display: block;
  aspect-ratio: 1;
}

.length samp {
  width: var(--length);
  background-color: black;
  opacity: var(--rh-opacity-60);
  display: block;
  border-bottom: 2px solid var(--rh-color-border-strong-on-light);
  position: relative;
}

.length samp::before,
.length samp::after {
  content: '';
  position: absolute;
  display: block;
  height: 4px;
  width: 0;
  inset-block: -4px;
  border-style: solid;
  border-inline-width: 2px 0;
  border-color: var(--rh-color-border-interactive-on-light);
}

.length samp::before {
  inset-inline: -2px 100%;
}

.length samp::after {
  inset-inline: 100% 2px;
}

.icon:not(.color) samp {
  aspect-ratio: 1;
  display: block;
  width: var(--icon-size);
  border: var(--rh-border-width-md) dotted var(--rh-color-border-strong-on-light);
}

#typography {
  --swatch-size: 100%;
}

:is(#typography, .box-shadow) .comment {
  display: none;
}

.btt {
  text-align: right;
  display: block;
}

.language-html .hljs-tag { color: var(--rh-color-blue-500, #004080); }
.language-html .hljs-name { color: var(--rh-color-brand-red-dark, #be0000); }
.language-html .hljs-attr { color: var(--rh-color-orange-300, #ec7a08); }
.language-html .hljs-string { color: var(--rh-color-green-500, #3e8635); }

code[class^="language-"] {
  max-width: 100%;
  display: block;
  overflow-x: scroll;
}

.breakpoint img {
  max-height: var(--rh-length-3xl);
}

dl.grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 8px;
  align-items: center;
}

dl.grid dt {
  font-style: italic;
}

dl.grid dt:after {
  content: ': ';
}

dl.grid dt,
dl.grid dd {
  margin: 0;
  padding: 0;
}

dl.grid dd {
  display: flex;
  align-items: center;
}

#theme-link-demo div {
  display: grid;
  gap: var(--rh-space-2xl);
  grid-template-columns: 1fr 1fr;
  padding: var(--rh-space-2xl);
  border-radius: var(--rh-border-radius-default);
  border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
  & form {
    grid-column: 1/-1;
  }
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px, auto));
  gap: var(--rh-space-md);
  & figure {
    margin: 0;
    & samp {
      transition: all var(--rh-animation-speed, 0.3s) var(--rh-animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
      display: block;
      &.swatch {
        padding: var(--rh-space-2xl) var(--rh-space-xl);
        border-radius: var(--rh-border-radius-pill);
        outline: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
      }
      &.font {
        font-size: var(--rh-font-size-heading-lg);
        font-weight: var(--rh-font-weight-heading-bold);
      }
      &:hover,
      &:focus-within {
        outline-width: var(--rh-border-width-lg);
        outline-color: var(--rh-border-color-strong);
      }
    }
  }
}