@use '@angular/material' as mat;

@mixin covalent-markdown-theme($theme) {
  $accent: map-get($theme, accent);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  td-markdown {
    a {
      color: mat.m2-get-color-from-palette($accent);
    }

    h1,
    h2 {
      border-bottom-color: mat.m2-get-color-from-palette($foreground, divider);
    }

    h3,
    h4,
    h5,
    h6 {
      color: mat.m2-get-color-from-palette($foreground, secondary-text);
    }

    hr {
      border-color: mat.m2-get-color-from-palette($foreground, divider);
    }

    blockquote {
      color: mat.m2-get-color-from-palette($foreground, secondary-text);
      border-left-color: mat.m2-get-color-from-palette($foreground, divider);
    }

    table {
      th,
      td {
        border-color: mat.m2-get-color-from-palette($foreground, dividers);
      }

      tr {
        border-top-color: mat.m2-get-color-from-palette($foreground, dividers);

        &:nth-child(2n) {
          background-color: mat.m2-get-color-from-palette(
            $foreground,
            dividers
          );
        }
      }
    }

    code {
      background-color: mat.m2-get-color-from-palette($background, hover);
    }

    .highlight pre,
    pre {
      background-color: mat.m2-get-color-from-palette($background, app-bar);
    }

    kbd {
      color: mat.m2-get-color-from-palette($foreground, secondary-text);
      background-color: mat.m2-get-color-from-palette($background, app-bar);
      border-color: mat.m2-get-color-from-palette($foreground, divider);
      border-bottom-color: mat.m2-get-color-from-palette($foreground, disabled);
    }
  }
}