import { css } from 'lit'
import prismStyles from '../highlight/Prism.styles.js'

export default [
  prismStyles,
  css`
    pre[class*='language-'].line-numbers {
      position: relative;
      padding-left: 3.8em;
      counter-reset: linenumber;
    }

    pre[class*='language-'].line-numbers > code {
      position: relative;
      white-space: inherit;
    }

    .line-numbers .line-numbers-rows {
      position: absolute;
      pointer-events: none;
      top: 0;
      font-size: 100%;
      left: -3.8em;
      width: 3em; /* works for line-numbers below 1000 lines */
      letter-spacing: -1px;
      border-right: 1px solid #999;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .line-numbers-rows > span {
      display: block;
      counter-increment: linenumber;
    }

    .line-numbers-rows > span:before {
      content: counter(linenumber);
      color: #999;
      display: block;
      padding-right: 0.8em;
      text-align: right;
    }

    :host {
      display: block;
    }

    .raw-panel,
    .error-container,
    .no-info {
      user-select: text;
    }

    .raw-panel > code {
      overflow: auto;
    }

    pre[class*='language-'].raw-panel {
      white-space: pre;
    }

    .padded-panel {
      padding: 0 20px;
    }

    .error,
    .no-info {
      text-align: left;
      margin: 20px;

      font-family: var(--md-sys-typescale-body-large-font);
      font-weight: var(--md-sys-typescale-body-large-weight);
      font-size: var(--md-sys-typescale-body-large-size);
      letter-spacing: var(--md-sys-typescale-body-large-tracking);
      line-height: var(--md-sys-typescale-body-large-height);
    }

    table {
      border-collapse: collapse;
    }

    table td {
      vertical-align: text-bottom;
      padding: 20px;
    }

    table th {
      border-bottom: 1px var(--md-sys-color-outline-variant) solid;
      padding: 20px;
    }

    .url-params .name {
      font-family: var(--md-sys-typescale-label-large-font);
      font-weight: var(--md-sys-typescale-label-large-weight);
      font-size: var(--md-sys-typescale-label-large-size);
      letter-spacing: var(--md-sys-typescale-label-large-tracking);
      line-height: var(--md-sys-typescale-label-large-height);
    }
  `,
]
