@use 'utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.docs-collapse-toggle {
  .hds-button {
    color: var(--token-side-nav-color-foreground-primary);
    background: var(--token-side-nav-color-surface-primary);
    border-color: transparent;
    border-radius: var(--token-side-nav-body-list-item-border-radius);
    &:hover {
      background: var(--token-side-nav-color-surface-interactive-hover);
      border-color: transparent;
    }
  }
}

#docfy-content {
  font-size: 16px;
  font-family: var(--token-typography-display-300-font-family);
  margin-left: 1.5rem;
  margin-right: 2rem;
  margin-top: 1.5rem;
  max-width: 90%;

  h1,
  h2,
  h3 {
    border-bottom: 1px solid var(--token-color-palette-neutral-300);
    padding-bottom: 0.5rem;
  }

  h1 {
    margin-bottom: 1.15rem;
    font-size: var(--token-typography-display-500-font-size);
    line-height: var(--token-typography-display-500-line-height);
  }

  h2 {
    padding-top: 1rem;
    font-size: var(--token-typography-display-400-font-size);
    line-height: var(--token-typography-display-400-line-height);
  }

  ul {
    list-style: disc;
    li {
      margin-top: 1rem;
    }
  }

  ul,
  ol {
    padding-left: size_variables.$spacing-16;
    padding-bottom: size_variables.$spacing-16;
  }

  pre,
  code {
    background-color: var(--token-color-palette-neutral-100);
  }

  blockquote {
    margin-left: 1rem;
    padding: 0.5rem;
    background: var(--token-color-palette-neutral-50);
    border-radius: 6px;
  }

  code {
    font-size: var(--token-typography-body-300-font-size);
    font-family: var(--token-typography-font-stack-code);
  }

  pre code {
    overflow-x: scroll;
    max-width: 700px;
    white-space: pre-line;
  }

  pre,
  table {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    text-align: left;
    border-radius: 6px;
  }

  table {
    border: none;
    border-collapse: collapse;
    td {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      code {
        background: none;
      }
    }
    tr {
      border-bottom: 1px solid var(--token-color-palette-neutral-300);
    }
  }

  .docfy-demo {
    border: 1px solid var(--token-color-palette-neutral-50);
    border-radius: 6px;
    padding: 1rem;
    overflow: scroll;

    .docfy-demo__example {
      & pre,
      code {
        background: none;
        margin: 0;
        padding: 0;
      }
    }
  }
}