uxdot-toc > ol {
  columns: 16rem auto;
  list-style: none;
  padding: 0;
  margin-block: var(--rh-space-lg) 0;
}

uxdot-toc > ol > li {
  display: list-item;
  margin-inline-start: var(--rh-space-lg);
  margin-block-end: var(--rh-space-lg);
  padding-inline-start: var(--rh-space-lg);
}

uxdot-toc > ol > li:first-of-type {
  margin-block-start: 0;
}

uxdot-toc > ol > li::marker {
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.56 31.56' fill='%230066CC' focusable='false' width='1em' aria-hidden='true'><path d='M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z'></path></svg>");
}

uxdot-toc > ol > li > a {
  text-decoration: none;
}

/* TODO: This style is specific to the implementation on ux.redhat.com,
 * not ideal for the component lightdom files, maybe this is a
 * pattern level style that should be in the pattern layer. */
@container main (min-width: 1440px) {
  uxdot-toc > ol {
    columns: unset;
  }

  uxdot-toc > ol > li:first-of-type {
    margin-block-start: var(--rh-space-md);
  }
}