@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;

@layer cinder.components {
  .cinder-table-of-contents {
    display: block;
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-relaxed);
    color: var(--cinder-text-muted);
  }

  .cinder-table-of-contents__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
  }

  .cinder-table-of-contents__list--nested {
    margin-top: var(--cinder-space-1);
    margin-inline-start: var(--cinder-table-of-contents-link-indent-step);
  }

  .cinder-table-of-contents__item {
    margin: 0;
    padding: 0;
  }

  .cinder-table-of-contents__link {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--cinder-table-of-contents-link-color);
    padding: 0.125rem 0.75rem;
    transition:
      color var(--cinder-duration-fast) var(--cinder-ease-standard),
      border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-table-of-contents__link:hover {
    color: var(--cinder-table-of-contents-link-active-color);
  }

  .cinder-table-of-contents__link--active {
    color: var(--cinder-table-of-contents-link-active-color);
    background: var(--cinder-surface-hover);
    font-weight: var(--cinder-font-medium);
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-table-of-contents__link {
      transition: none;
    }
  }
}