@import '~@angular/material/core/theming/theming';

@mixin docs-site-typography-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .docs-component-viewer-tabbed-content,
  .docs-guide-content {
      h1 {
        color: mat-color($primary, 800);
        background: rgba(mat-color($foreground, secondary-text), .03);
      }

      h3, h2, h4, h5, p, ol, li {
        color: mat-color($foreground, secondary-text);
      }

      a {
        color: mat-color($primary);
      }

      .nav-link:visited {
        text-decoration: none;
      }

      table {
        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
      }

      table > tbody > tr > th {
        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
      }

      td {
        color: mat-color($foreground, secondary-text);
        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
      }

      th {
        color: mat-color($foreground, secondary-text);
        background: rgba(mat-color($foreground, secondary-text), .03);
      }
  }
}