@import 'colors.css';
@import 'variables.css';

:root {
  --documentation-h1-size: calc(3.4 * var(--unit));
  --documentation-h2-size: calc(2.4 * var(--unit));
  --documentation-h-offset: calc(4 * var(--unit));
  --documentation-v-offset: calc(var(--documentation-h-offset) / 2);
  --documentation-code-background: rgba(0, 0, 0, 0.05);
  --documentation-playground-button-height: calc(3 * var(--unit));
  --documentation-playground-button-font-size: calc(1.2 * var(--unit));
  --documentation-table-font-size: calc(1.4 * var(--unit));
}

.markdown {
  color: var(--color-text);
  display: block;
  flex-grow: 1;
  font-size: var(--font-size-normal);
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: calc(4 * var(--unit));

  & > *:not(pre) {
    margin: var(--documentation-v-offset) var(--documentation-h-offset);
  }

  & h1 {
    font-size: var(--documentation-h1-size);
  }

  & h2 {
    font-size: var(--documentation-h2-size);
  }

  & h3,
  & h4,
  & h5,
  & h6 {
    font-size: inherit;
    font-weight: var(--font-weight-bold);
  }

  & h1,
  & h2 {
    color: var(--color-primary-dark);
    padding-top: var(--documentation-v-offset);
  }

  & p {
    font-size: inherit;
    line-height: 1.5;

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

  & code {
    background-color: var(--documentation-code-background);
    border-radius: 2px;
    font-family: source-code-pro, Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    padding: calc(0.3 * var(--unit)) calc(0.5 * var(--unit));
  }

  & pre {
    background-color: var(--documentation-code-background);
    font-family: source-code-pro, Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    padding: var(--documentation-v-offset) var(--documentation-h-offset);
  }

  & > :global(.playground-button) {
    display: block;
    text-align: left;

    & > button {
      font-size: var(--documentation-playground-button-font-size);
      height: var(--documentation-playground-button-height);
      line-height: var(--documentation-playground-button-height);

      & > span {
        line-height: var(--documentation-playground-button-height);
      }
    }
  }

  & ul {
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin-left: 7 * var(--unit);

    & > li {
      margin-bottom: var(--unit);
    }
  }

  & table {
    font-size: var(--documentation-table-font-size);
    width: auto;

    & thead th {
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
    }

    & th,
    & td {
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      padding: var(--unit);
    }
  }
}