.sbdocs-content {
  code {
    display: inline;
    border: none;
    border-radius: var(--ds-border-radius-sm);
    background: var(--ds-color-neutral-surface-tinted);
  }

  code,
  kbd {
    color: var(--ds-color-neutral-text-default);
    font-size: round(down, 0.8em, 1px);

    // If the kbd element is used for an icon, add data-icon attribute
    &[data-icon] {
      font-size: 1.2em;
      padding: 0 0.3em 2px 0.3em;
      bottom: 0px;
    }
  }

  :where(h1, h2, h3, h4, h5, h6) code {
    font-weight: var(--ds-font-weight-semibold);
  }

  kbd {
    font-family:
      ui-monospace, Menlo, Monaco, 'Roboto Mono', 'Oxygen Mono',
      'Ubuntu Monospace', 'Source Code Pro', 'Droid Sans Mono', 'Courier New',
      monospace;
    background: var(--ds-color-neutral-surface-tinted);
    padding: var(--ds-size-1);
    border-radius: var(--ds-border-radius-md);
    border: solid 1px var(--ds-color-neutral-border-subtle);
    position: relative;
    bottom: 2px;
    box-shadow: 0.5px 1px 0 0 var(--ds-color-neutral-border-strong);
  }

  a {

    // Hack to properly render the link underline across regular text and code
    &:not([data-single-child])>code {
      position: relative;
      margin: 0;
      padding-left: 0;
      padding-right: 0;
      margin-top: 4px;

      &::before,
      &::after {
        font-size: 8px;
        display: inline;
        content: "\00a0";
        position: relative;
      }
    }

    /* Only use hover for non-touch devices to prevent sticky-hovering */
    @media (hover: hover) and (pointer: fine) {
      &:hover>code {
        color: var(--ds-color-text-default);
        text-decoration-thickness: 0.125em;
      }
    }

    &:active>code {
      background-color: var(--ds-color-surface-tinted);
      color: var(--ds-color-text-default);
    }
  }
}

/*Dark mode overrides (storybook/theming create() does not support cssvars for most properties)*/

.custom-docs-wrapper {
  background-color: var(--ds-color-neutral-background-default);
}

.docblock-argstable {
  color: var(--ds-color-neutral-text-default) !important;

  * {
    color: inherit !important;
  }

  tbody {
    background-color: var(--ds-color-neutral-surface-default);
  }
}

[data-color-scheme="dark"] {
  .docblock-argstable {
    accent-color: var(--ds-color-accent-base-default);

    * {
      border-color: var(--ds-color-neutral-border-subtle) !important;
    }

    /*things that should render as "code" in argstable*/
    td div>span[class],
    td:nth-child(3)>span[class],
    .sbdocs-expandable,
    code {
      background-color: var(--ds-color-neutral-background-tinted);
    }

    button {
      color: var(--ds-color-neutral-text-default);
      background-color: var(--ds-color-neutral-surface-default);
    }

    textarea,
    input:not([role="switch"]),
    select {
      background-color: var(--ds-color-neutral-background-default);
    }

    label:has(input[role="switch"]) {
      background-color: var(--ds-color-neutral-background-default);

      span {
        color: var(--ds-color-neutral-text-default);
      }

      input:checked~span:last-of-type,
      input:not(:checked)~span:first-of-type {
        background-color: var(--ds-color-neutral-surface-active);
      }


    }
  }

  .sbdocs-preview {
    border-color: var(--ds-color-neutral-border-subtle) !important;
  }

  .docblock-code-toggle {
    color: var(--ds-color-neutral-text-default) !important;
    border-color: var(--ds-color-neutral-border-subtle) !important;
  }

  .markdown-css-overrides {
    :is(h1, h2, h3, h4, h5, h6, p, ul, li) {
      color: var(--ds-color-neutral-text-default);
      border-color: var(--ds-color-neutral-border-subtle);
    }

    :is(a) {
      color: var(--ds-color-accent-base-default);

      &:hover {
        color: var(--ds-color-accent-base-hover);
      }
    }

    :is(code) {
      color: var(--ds-color-neutral-text-default);
      background-color: var(--ds-color-neutral-background-tinted);
      border-color: var(--ds-color-neutral-border-subtle);
    }

    pre code {
      border-color: transparent !important;
    }
  }
}

/*need to repeat everything above for the auto + prefers-dark scenario*/
@media (prefers-color-scheme: dark) {
  [data-color-scheme="auto"] {
    .docblock-argstable {
      accent-color: var(--ds-color-accent-base-default);

      * {
        border-color: var(--ds-color-neutral-border-subtle) !important;
      }

      /*things that should render as "code" in argstable*/
      td div>span[class],
      td:nth-child(3)>span[class],
      .sbdocs-expandable,
      code {
        background-color: var(--ds-color-neutral-background-tinted);
      }

      button {
        color: var(--ds-color-neutral-text-default);
        background-color: var(--ds-color-neutral-surface-default);
      }

      textarea,
      input:not([role="switch"]),
      select {
        background-color: var(--ds-color-neutral-background-default);
      }

      label:has(input[role="switch"]) {
        background-color: var(--ds-color-neutral-background-default);

        span {
          color: var(--ds-color-neutral-text-default);
        }

        input:checked~span:last-of-type,
        input:not(:checked)~span:first-of-type {
          background-color: var(--ds-color-neutral-surface-active);
        }


      }
    }

    .sbdocs-preview {
      border-color: var(--ds-color-neutral-border-subtle) !important;
    }

    .docblock-code-toggle {
      color: var(--ds-color-neutral-text-default) !important;
      border-color: var(--ds-color-neutral-border-subtle) !important;
    }

    .markdown-css-overrides {
      :is(h1, h2, h3, h4, h5, h6, p, ul, li) {
        color: var(--ds-color-neutral-text-default);
        border-color: var(--ds-color-neutral-border-subtle);
      }

      :is(a) {
        color: var(--ds-color-accent-base-default);

        &:hover {
          color: var(--ds-color-accent-base-hover);
        }
      }

      :is(code) {
        color: var(--ds-color-neutral-text-default);
        background-color: var(--ds-color-neutral-background-tinted);
        border-color: var(--ds-color-neutral-border-subtle);
      }

      pre code {
        border-color: transparent !important;
      }
    }
  }
}
