@layer components {
  .legal-toc {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-10);

    .legal-toc__title {
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
      margin-bottom: var(--space-4);
    }

    .legal-toc__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
    }

    a.legal-toc__link {
      font-size: var(--text-base);
      color: var(--color-link);
      text-decoration-style: dashed!important;
      transition: color var(--transition-fast);

      &:hover {
        color: var(--color-link-hover);
        text-decoration: underline;
      }
    }
  }

  [data-theme="dark"] {
    .legal-toc {
      background: var(--color-hover);
    }
  }
}