@define-mixin docs-main-ui-light {
  .docs-main {
    hr {
      background-color: var(--ld-col-neutral-100);
    }

    main {
      > header {
        ld-breadcrumbs {
          filter: none;
        }
      }

      > p,
      > ol,
      > ul,
      > ld-notice,
      > [id^='css-variables'] + table,
      > [id^='properties'] + table,
      > [id^='events'] + table,
      > [id^='slots'] + table,
      > [id^='methods'] ~ h3 {
        code {
          box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-neutral-100);
          background-color: var(--ld-col-neutral-010);
        }
      }

      [id^='css-variables'] + table td,
      [id^='properties'] + table td {
        &:first-of-type,
        &:nth-of-type(2),
        &:nth-of-type(4) {
          code {
            &:not(:last-child) {
              color: var(--ld-col-rb-010);
              background-color: var(--ld-thm-ocean-primary);
              box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-rb-800);
            }
          }
        }
      }

      > p > a,
      > ul a,
      > ol a,
      > table a {
        color: var(--ld-col-vc-600);

        @media (hover: hover) {
          &:hover {
            color: var(--ld-thm-secondary);
          }
        }

        &:active,
        &:active:focus-visible {
          color: var(--ld-col-vc-700);
        }
      }

      > blockquote {
        color: var(--ld-col-neutral-900);
        background-color: var(--ld-thm-warning-focus);
        border-left: solid var(--ld-sp-6) var(--ld-thm-warning);
        font: var(--ld-typo-body-m);

        code {
          background-color: var(--ld-thm-warning);
        }
      }

      > pre {
        border-color: var(--ld-col-neutral-100);

        > docs-copy-to-cb {
          filter: none;
        }
      }

      > table {
        thead tr {
          border-bottom: solid var(--ld-sp-1) var(--ld-col-neutral-300);
        }
        tbody tr {
          border-bottom: solid var(--ld-sp-1) var(--ld-col-neutral-100);
        }
      }
    }
  }
}
@define-mixin docs-main-ui-dark {
  .docs-main {
    hr {
      background-color: var(--ld-col-neutral-600);
    }

    main {
      > header {
        ld-breadcrumbs {
          filter: invert(1) hue-rotate(180deg);
        }
      }

      > p,
      > ol,
      > ul,
      > [id^='css-variables'] + table,
      > [id^='properties'] + table,
      > [id^='events'] + table,
      > [id^='slots'] + table,
      > [id^='methods'] ~ h3 {
        code {
          box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-neutral-400);
          background-color: var(--ld-col-neutral-600);
        }
      }

      [id^='properties'] + table td {
        &:first-of-type,
        &:nth-of-type(2),
        &:nth-of-type(4) {
          code {
            &:not(:last-child) {
              color: var(--ld-col-rb-010);
              background-color: var(--ld-thm-ocean-primary);
              box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-rb-400);
            }
          }
        }
      }

      [id^='css-variables'] + table td {
        &:first-of-type,
        &:nth-of-type(3) {
          code {
            &:not(:last-child) {
              color: var(--ld-col-rb-010);
              background-color: var(--ld-thm-ocean-primary);
              box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-rb-400);
            }
          }
        }
      }

      > p > a,
      > ol a,
      > ul a,
      > table a {
        color: var(--ld-col-vc-200);

        @media (hover: hover) {
          &:hover {
            color: var(--ld-col-vc);
          }
        }

        &:active,
        &:active:focus-visible {
          color: var(--ld-col-vc-600);
        }
      }

      > blockquote {
        color: var(--ld-col-neutral-900);
        background-color: var(--ld-thm-warning);
        border-left: solid var(--ld-sp-6) var(--ld-thm-warning-hover);

        code {
          background-color: var(--ld-thm-warning);
        }
      }

      > pre {
        border-color: var(--ld-col-neutral-900);

        > docs-copy-to-cb {
          filter: invert(1) hue-rotate(180deg);
        }
      }

      > table {
        thead tr {
          border-bottom: solid var(--ld-sp-1) var(--ld-col-wht);
        }
        tbody tr {
          border-bottom: solid var(--ld-sp-1) var(--ld-col-neutral-700);
        }
      }
    }
  }
}

@mixin docs-main-ui-light;

@media (prefers-color-scheme: dark) {
  @mixin docs-main-ui-dark;
}
.docs-ui-dark {
  @mixin docs-main-ui-dark;
}
.docs-ui-light {
  @mixin docs-main-ui-light;
}

.docs-main {
  --ld-typo-code-s: 0.875rem / 176% 'Source Code Pro', Consolas, Monaco,
    'Ubuntu Mono', monospace;
  --ld-typo-code-m: 1rem / 160% 'Source Code Pro', Consolas, Monaco,
    'Ubuntu Mono', monospace;
  --docs-main-padding-x: var(--ld-sp-40);
  padding: var(--ld-sp-24) var(--docs-main-padding-x) var(--ld-sp-40);
  max-width: 54rem;
  min-width: 20rem;

  @media (width <= 75rem) {
    --docs-main-padding-x: var(--ld-sp-24);
  }

  main {
    > header,
    > footer {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: center;
    }

    > header {
      ld-breadcrumbs {
        flex-grow: 1;
        margin-inline: 0 var(--ld-sp-24);
        margin-block: var(--ld-sp-16);
      }
    }

    > p,
    > ol,
    > ul {
      font: var(--ld-typo-body-m);
    }

    > p,
    > ol,
    > ul,
    > ld-notice {
      code {
        display: inline-flex;
        padding: 0 var(--ld-sp-4);
        border-radius: var(--ld-br-s);
      }
    }

    > p > a,
    > table a,
    > ol a,
    > ul a,
    > blockquote a {
      text-decoration: underline;

      code {
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0;
        font-size: inherit;
      }
    }

    > hr {
      border: 0;
      height: var(--ld-sp-1);

      &:last-of-type:not(:first-of-type) {
        display: none;

        & + p {
          display: none;
        }
      }
    }

    > * + * {
      margin-top: var(--ld-sp-32);
    }

    > * + h1 {
      margin-top: var(--ld-sp-16);
    }

    > * + h2,
    > * + h3,
    > * + footer {
      margin-top: var(--ld-sp-40);
    }

    #overview,
    #overview + p,
    [id^='graph'],
    [id^='graph'] + pre,
    [id^='shadow-parts'],
    [id^='shadow-parts'] + table {
      display: none;
    }

    > h1 {
      font: var(--ld-typo-xh5);
    }
    > h2 {
      font: var(--ld-typo-h2);
    }
    > h3 {
      font: var(--ld-typo-h3);
    }
    > h4 {
      font: var(--ld-typo-h4);
    }
    > h5 {
      font: var(--ld-typo-h5);
    }
    > h6 {
      font: var(--ld-typo-h6);
    }

    > h1,
    > h2,
    > h3,
    > h4,
    > h5,
    > h6 {
      position: relative;
      font-weight: 700;
      outline: none;

      > code {
        font-size: inherit;
        font-weight: inherit;
      }
    }

    > ul,
    > ol {
      padding-left: var(--ld-sp-16);

      > li {
        > p {
          display: inline;
        }
      }
    }

    > ul {
      list-style: disc;
    }

    > ol {
      list-style: decimal;
    }

    > table {
      overflow: scroll hidden;
      min-width: 100%;
      text-align: left;
      border-collapse: collapse;
      display: block;
      padding-bottom: var(--ld-sp-24);

      tr {
        margin-top: var(--ld-sp-16);
      }
      tbody tr:nth-child(odd) {
        background-color: var(--sensitive-grey-dark);
      }

      thead {
        tr {
          margin-top: 0;
        }
        th {
          padding-top: 0;
        }
      }

      th {
        padding-bottom: var(--ld-sp-16);
      }

      td,
      th {
        padding: var(--ld-sp-12) var(--ld-sp-16);
        vertical-align: top;

        &:first-of-type {
          padding-left: 0;
        }
        &:last-of-type {
          padding-right: 0;
        }
      }

      b,
      strong {
        font-weight: 700;
      }
    }

    > [id^='properties'] + table {
      td,
      th {
        code {
          display: inline-grid;
          grid-auto-flow: column;
          gap: var(--ld-sp-4);

          + em {
            display: none;
          }

          &:not(:last-child) {
            font-weight: 700;

            &::after {
              content: '*';
              transform: translateY(-0.125rem);
            }
          }
        }

        /* attributes */
        &:nth-of-type(2) {
          display: none;
        }
      }
    }

    > [id^='css-variables'] + table {
      td,
      th {
        &:first-of-type {
          flex-shrink: 0;

          code {
            display: inline-grid;
            grid-auto-flow: column;
            gap: var(--ld-sp-4);

            + em {
              display: none;
            }

            &:not(:last-child) {
              font-weight: 700;

              &::after {
                content: '*';
                transform: translateY(-0.125rem);
              }
            }
          }
        }
      }
    }

    > [id^='methods'] {
      ~ h3 code {
        font: var(--ld-typo-body-s);
        line-height: 1;
        font-weight: 400;
        font-family: 'Source Code Pro', Consolas, Monaco, 'Ubuntu Mono',
          monospace;
        padding: var(--ld-sp-4) var(--ld-sp-6);
        border-radius: var(--ld-br-s);
        display: inline-flex;
      }
    }

    > [id^='css-variables'] + table,
    > [id^='properties'] + table,
    > [id^='events'] + table,
    > [id^='slots'] + table {
      font: var(--ld-typo-body-m);

      code {
        display: inline-flex;
        padding: 0 var(--ld-sp-6);
        border-radius: var(--ld-br-s);
      }
    }

    > blockquote {
      padding: var(--ld-sp-8) var(--ld-sp-24) var(--ld-sp-12) var(--ld-sp-24);

      a {
        text-decoration: underline;
      }

      code {
        padding: 0 var(--ld-sp-4);
        border-radius: var(--ld-br-s);
      }
    }

    > pre {
      border-radius: var(--ld-br-l);
      border-style: solid;
      border-width: var(--ld-sp-1);
      position: relative;
      display: flex;
      justify-content: space-between;

      > docs-copy-to-cb {
        position: sticky;
        right: var(--ld-sp-4);
        bottom: 100%;
        height: 0;

        ld-button {
          transform: translateX(var(--ld-sp-12))
            translateY(calc(-1 * var(--ld-sp-6)));
        }
      }
    }
  }

  code {
    font: var(--ld-typo-code-s);
  }

  @media (width <= 52rem) {
    padding: var(--ld-sp-24) var(--ld-sp-24);

    main {
      padding-bottom: var(--ld-sp-40);
    }
  }
}

[id^='properties'] + table::after {
  content: '* required';
}
[id^='css-variables'] + table::after {
  content: '* readonly';
}

[id^='slots'],
[id^='events'],
[id^='properties'],
[id^='shadow-parts'] {
  + table + hr {
    display: none;
  }
}

.language-mermaid {
  & + hr {
    display: none;
  }

  code > :nth-last-child(-n + 3) {
    display: none;
  }
}

[id^='returns'] + p + hr {
  display: none;
}

.header-anchor {
  left: 0;
  transform: translateX(-100%);
  position: absolute;
  text-align: right;

  @media screen and (width <= 52rem) {
    left: unset;
    position: relative;
    width: auto;
  }
}

.header-anchor__symbol {
  visibility: hidden;
  padding-right: var(--ld-sp-8);
  opacity: 0.25;

  &:hover {
    opacity: 1;
  }

  h1:hover &,
  h2:hover &,
  h3:hover &,
  h4:hover &,
  h5:hover &,
  h6:hover &,
  .header-anchor:focus & {
    visibility: inherit;
  }

  .header-anchor:focus & {
    opacity: 1;
  }

  @media screen and (hover: none) {
    visibility: inherit;
  }

  @media screen and (width <= 52rem) {
    visibility: inherit;
    padding-right: 0;
    opacity: 0.25;

    h1:hover &,
    h2:hover &,
    h3:hover &,
    h4:hover &,
    h5:hover &,
    h6:hover &,
    .header-anchor:focus & {
      visibility: inherit;
    }

    .header-anchor:focus & {
      opacity: 1;
    }
  }
}

.docs-main__header-image {
  max-width: 32rem;
}
