/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { css } from 'lit';

/**
 * Markdown CSS
 */
export const styles = css`
  :host {
    display: block;
    -webkit-font-smoothing: var(
      --nile-webkit-font-smoothing,
      var(--ng-webkit-font-smoothing)
    );
    -moz-osx-font-smoothing: var(
      --nile-moz-osx-font-smoothing,
      var(--ng-moz-osx-font-smoothing)
    );
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  .markdown {
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    word-wrap: break-word;
  }

  .markdown > :first-child {
    margin-top: 0;
  }

  .markdown > :last-child {
    margin-bottom: 0;
  }

  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6 {
    margin: 1.5em 0 0.5em;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
    line-height: 1.25;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  }

  .markdown h1 {
    font-size: var(--nile-type-scale-7, var(--ng-font-size-display-sm));
  }

  .markdown h2 {
    font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
  }

  .markdown h3 {
    font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
  }

  .markdown h4 {
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
  }

  .markdown h5 {
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
  }

  .markdown h6 {
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
  }

  .markdown p {
    margin: 0 0 1em;
  }

  .markdown a {
    color: var(--nile-colors-link-primary, var(--ng-colors-text-brand-secondary-700)
    );
    text-decoration: underline;
  }

  .markdown a:hover {
    color: var(--nile-colors-link-hover, var(--ng-colors-text-brand-secondary-hover));
  }

  .markdown ul,
  .markdown ol {
    margin: 0 0 1em;
    padding-inline-start: 2em;
  }

  .markdown li > ul,
  .markdown li > ol {
    margin-bottom: 0;
  }

  .markdown blockquote {
    margin: 0 0 1em;
    padding: 0 1em;
    border-inline-start: 4px solid var(--nile-colors-neutral-400, var(--ng-colors-fg-quaternary-400));
    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
  }

  .markdown code {
    font-family: var(--nile-font-family-mono, monospace);
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
    background: var(--nile-colors-dark-100, var(--ng-colors-bg-secondary));
    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
    padding: 0.125em 0.375em;
  }

  .markdown pre {
    margin: 0 0 1em;
    padding: var(--nile-spacing-md, var(--ng-spacing-md));
    background: var(--nile-colors-dark-100, var(--ng-colors-bg-secondary));
    border-radius: var(--nile-radius-md, var(--ng-radius-md));
    overflow-x: auto;
  }

  .markdown pre code {
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .markdown table {
    margin: 0 0 1em;
    border-collapse: collapse;
    width: max-content;
    max-width: 100%;
  }

  .markdown th,
  .markdown td {
    border: 1px solid var(--nile-colors-gray-300, var(--ng-colors-gray-300));
    padding: var(--nile-spacing-xs, var(--ng-spacing-xs))
      var(--nile-spacing-md, var(--ng-spacing-md));
  }

  .markdown th {
    background: var(--nile-colors-dark-100, var(--ng-colors-bg-secondary));
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
    text-align: left;
  }

  .markdown img {
    max-width: 100%;
  }

  .markdown hr {
    height: 1px;
    margin: 1.5em 0;
    border: none;
    background: var(--nile-colors-dark-200, var(--ng-colors-border-secondary));
  }
`;