@use 'mixins';
@use 'variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// text
// lists
// table
// —————————————————————————————————————————————————————————————————

.editor, %editor {
  max-width: variables.$max-width-editor;

  // —————————————————————————————————————————————————————————————————
  // text
  // —————————————————————————————————————————————————————————————————

  h2 { @extend %h3; }
  h3 { @extend %h4; }
  h4 { @extend %h5; }
  h5 { @extend %h6; }
  h6 { @extend %subtitle; }
  blockquote { @extend %subtitle; }

  h2 {
    color: variables.$primary;
  }

  h2, h3, h4, h5, h6 {
    
    &:not(:first-child) { margin-block-start: 1.5em; }
    &:not(:last-child) { margin-block-end: .75em; }
  }

  p,
  ol, ul,
  p + a, a + p {

    &:not(:first-child) { margin-block-start: 0.75em; }
  }

  .highlighter-rouge,
  .alert {
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
    width: fit-content;
    white-space: nowrap;
  }

  a {
    color: variables.$primary;
    text-decoration: underline;
  }

  strong {
    font-weight: variables.$weight-bold;
  }

  em {
    font-style: italic;
  }

  blockquote {
    position: relative;
    background-color: variables.$background-paper;
    padding: 1rem 2rem;
    border-radius: variables.$border-radius-md;

    &:before {
      @include mixins.pseudo-element('”', -1rem, auto, auto, -.5rem, auto, auto);
      font-size: 7rem;
      color: variables.$primary;
      line-height: 1;
    }

    &:not(:first-child) {
      margin-block-start: 1.5rem;
      margin-block-end: 1.5rem;
    }
  }

  // —————————————————————————————————————————————————————————————————
  // lists
  // —————————————————————————————————————————————————————————————————

  ol,
  ul {
    margin-inline-start: 1rem;
  }

  ol { list-style: decimal; }
  ul { list-style: disc; }

  li + li { margin-block-start: .25rem; }

  li {

    > ul {
      margin-block-start: 0.25rem !important;
      margin-inline-start: 0;

      li + li { margin-block-start: 0; }
    }

    &:not(:last-child) {

      > ul {
        margin-block-end: 0.25rem;
      }
    }
  }

  // —————————————————————————————————————————————————————————————————
  // table
  // —————————————————————————————————————————————————————————————————

  .table {
    width: 100%;
    overflow: scroll;
  }

  table {
    border-collapse: separate;
    border: variables.$border;
    border-radius: variables.$border-radius-sm;
    width: 100%;

    &.table-dense {

      th { font-size: 0.65rem; }
      td { font-size: 0.75rem;; }
      td, th { padding: 1px .25rem; }
    }
  }

  thead {
    background-color: variables.$background-paper;

    tr:first-child {

      th {
        border-block-start: none;

        &:first-of-type { border-start-start-radius: variables.$border-radius-sm; }
        &:last-of-type { border-start-end-radius: variables.$border-radius-sm; }
      }
    }
  }

  tbody {

    tr:last-child {

      th, td {

        &:first-of-type { border-end-start-radius: variables.$border-radius-sm; }
        &:last-of-type { border-end-end-radius: variables.$border-radius-sm; }
      }
    }
  }

  td,
  th {
    border-block-start: variables.$border;
    
    &:not(:first-child) {
      border-inline-start: variables.$border;
    }
  }

  th {
    padding: .25rem .5rem;
    font-size: 0.875rem;
    font-weight: bold;
    color: variables.$text-alt;
  }

  td {
    padding: .25rem .5rem .5rem;
  }
}