import { css } from 'styled-components';

export const toc = css`
  /**
    * @tokens TOC
    * */

  --toc-width: 240px;
  --toc-bg-color: transparent;
  --toc-border-color: var(--border-color-secondary);

  --toc-spacing-unit: var(--spacing-xs);
  --toc-offset-top: var(--toc-spacing-unit);

  /**
     * @tokens TOC item typography
     */
  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily
  --toc-item-font-size: var(--font-size-base); // @presenter FontSize
  --toc-item-line-height: var(--line-height-base);
  /**
    * @tokens TOC item
    */

  --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --toc-item-text-color: var(--text-color-description); // @presenter Color
  --toc-item-text-color-active: var(--text-color-primary); // @presenter Color
  --toc-item-bg-color: transparent; // @presenter Color
  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
  --toc-item-padding-vertical: calc(var(--toc-spacing-unit) / 2); // @presenter Spacing
  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
  --toc-item-border-color-active: var(--border-color-invers);

  /**
    * @tokens TOC header
    */

  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize
  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily
  --toc-heading-font-weight: var(--font-weight-medium); // @presenter FontWeight
  --toc-heading-text-color: var(--text-color-primary); // @presenter Color
  --toc-heading-text-transform: none; // @presenter TextTransform
  --toc-heading-line-height: var(--line-height-base);

  // @tokens End
`;