.jinja-example-block {
  .sd-tab-set {
    --sd-color-tabs-underline-active: #6ab0de;
    --sd-color-tabs-underline-hover: #6ab0de55;
    --sd-color-tabs-label-active: #555555;
    --sd-color-tabs-label-hover: #555555;
    --sd-color-tabs-overline: #e1e4e5;
    --sd-color-tabs-underline: #e1e4e5;
    --sd-fontsize-tabs-label: 0.9rem;

    margin: 0 0 12px;
    label { padding: 0.5em 0.75em; }
  }

  margin: 24px 0 36px;
  border: 1px solid #e1e4e5;
  padding: 16px;

  hr { margin: 0.75rem 0; }

  .caption-text { font-weight: bold; }

  .jinja-render-block {
    box-sizing: border-box;
    display: block;
    margin: 0;
    border: 1px solid #e1e4e5;
    padding: 12px;
    width: fit-content;
    max-width: 100%;
    overflow: auto;

    /* Making navigation section examples stretch the whole width */
    #navigation & { min-width: 100%; }
  }

  /* Margin following code examples */
  .rst-content & .highlight-html\+jinja {  /* stylelint-disable-line selector-class-pattern */
    margin-block-end: 12px;
  }
}

.rst-content {
  /* CSS variables */
  code.css-variable-name, code.css-variable-value {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: 0;
    padding: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  code.css-variable-name {
    color: #062873;
    font-weight: bold;
    border: 1px solid #e1e4e5;
    padding: 2px 5px;
  }

  .css-variable-separator, code.css-variable-value { color: #777777; }

  /* Dropdowns */
  blockquote:has(ul) + .sd-dropdown { margin-top: 16px; }
  .container:has(> .sd-dropdown):not(:has(+ .container > .sd-dropdown)) { margin-bottom: 40px; }

  .sd-dropdown {
    ul, blockquote { margin-bottom: 0; }
    blockquote { margin-left: 0; }
    hr { margin: 12px 0; }
  }
}