@use "../../styles/utils";

@include utils.layer {
  .Block {
    > :where(:first-child) {
      margin-top: 0 !important;
    }

    > :where(:last-child) {
      margin-bottom: 0 !important;
    }

    :where(h1, h2, h3, h4):not(:where([class~="no-markup"] *)) {
      margin-top: 2.25rem;
      margin-bottom: 1.2rem;
      line-height: 1.3;
      color: var(--cmm-color-font-base);
    }

    :where(table, img, blockquote):not(:where([class~="no-markup"] *)) {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }

    :where(p):not(:where([class~="no-markup"] *)) {
      margin-top: 1rem;
      color: var(--cmm-color-font-muted);
    }

    :where(ul, ol):not(:first-child):not(:where([class~="no-markup"] *)) {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }

    :where(ul, ol):not(:where([class~="no-markup"] *)) :where(ul, ol) {
      // margin-top should be the same as the gap of list items.
      margin: 0.5rem 0 0 0;
    }

    > *:first-child {
      margin-top: 0;
    }

    :where(h1, h2):not(:where([class~="no-markup"] *)) {
      font-weight: var(--cmm-font-weight-bold);
      font-size: var(--cmm-font-size-2xl);
      border-bottom: 1px solid var(--cmm-color-border-base);
      padding-bottom: 0.3rem;
    }

    :where(h3):not(:where([class~="no-markup"] *)) {
      font-weight: var(--cmm-font-weight-semibold);
      font-size: var(--cmm-font-size-xl);
    }

    :where(h4):not(:where([class~="no-markup"] *)) {
      font-weight: var(--cmm-font-weight-bold);
      font-size: var(--cmm-font-size-lg);
    }

    :where(code):not(:where([class~="no-markup"] *)) {
      color: var(--cmm-color-font-base);
      background: var(--cmm-color-code-inline);
      border: 1px solid var(--cmm-color-border-base);
      padding: 0.2em 0.4em;
      border-radius: var(--cmm-radius-sm);
      font-family: var(--cmm-font-family-code);
      font-weight: var(--cmm-font-weight-normal);
      font-size: 0.85em;
      overflow: auto;
    }

    :where(a):not(:where([class~="no-markup"] *)) {
      color: var(--cmm-color-link);
      text-decoration: underline;
      text-underline-position: from-font;
      text-decoration-thickness: from-font;

      code {
        color: var(--cmm-color-link);
      }
    }

    :where(pre) {
      // Firefox doesn't support :has() yet, but OK as not so important.
      &:has(code) {
        margin-top: 2rem;
        margin-bottom: 2rem;
      }
    }

    :where(blockquote):not(:where([class~="no-markup"] *)) {
      border-left: 0.2rem solid var(--cmm-color-neutral-muted);
      padding-left: 1em;
    }

    :where(ul, ol):not(:where([class~="no-markup"] *)) {
      padding-left: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      color: var(--cmm-color-font-muted);
    }

    :where(ul):not(:where([class~="no-markup"] *)) {
      list-style: disc;
    }

    :where(ul[class~="contains-task-list"]):not(
        :where([class~="no-markup"] *)
      ) {
      list-style: none;
    }

    :where(ol):not(:where([class~="no-markup"] *)) {
      list-style: decimal;
    }

    :where(p):not(:where([class~="no-markup"] *)) {
      line-height: 1.75;
      font-weight: var(--cmm-font-weight-normal);
    }

    :where(table):not(:where([class~="no-markup"] *)) {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;

      th {
        text-align: start;
        border-top: 1px solid var(--cmm-color-border-base);
        border-bottom: 1px solid var(--cmm-color-border-base);
        background: var(--cmm-color-surface-1);
      }

      th:first-child {
        border-left: 1px solid var(--cmm-color-border-base);
        border-radius: var(--cmm-radius-lg) 0 0 var(--cmm-radius-lg);
      }

      th:last-child {
        border-right: 1px solid var(--cmm-color-border-base);
        border-radius: 0 var(--cmm-radius-lg) var(--cmm-radius-lg) 0;
      }

      td,
      th {
        padding: 0.75rem;
      }

      tr:not(:last-of-type) td {
        border-bottom: 1px solid var(--cmm-color-border-base);
      }
    }

    :where(b, strong) {
      font-weight: var(--cmm-font-weight-bold);

      a {
        font-weight: inherit;
      }
    }

    :global(.Message):not(:where([class~="no-markup"] *)) {
      margin-top: 2rem;
      margin-bottom: 2rem;
      font-size: 0.94em;

      p {
        &:first-child {
          margin-top: 0;
        }
      }

      ul {
        gap: 0.25rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
    }

    $statuses: info, success, warn, danger;

    @each $color in $statuses {
      :global(.Message--#{$color}) {
        :is(p, li) {
          color: var(--cmm-#{$color}-font);
        }

        :is(code) {
          color: var(--cmm-color-#{$color}-font);
          --cmm-color-code-inline: var(--cmm-Message-#{$color}-bg);
          border: 1px solid var(--cmm-color-#{$color}-border);
        }
      }
    }
  }
}
