@import '../common/styles/theme-functions';
@import '../common/styles/typography-functions';

@mixin td-json-formatter-typography($config) {
  .td-key {
    font: {
      family: td-font-family($config);
      size: td-font-size($config, body-1);
    }
  }
}

@mixin td-json-formatter-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  .td-json-formatter-wrapper {
    .function::after,
    .date::after,
    .td-object-name::after,
    .td-array-length::after {
      content: '\200E';
    }
    .td-key {
      &.td-key-node {
        &:focus,
        &:hover {
          background-color: mat-color($background, hover);
        }
        .td-node-icon {
          color:  mat-color($foreground, secondary-text);
        }
      }
    }
    .key {
      color: mat-color($primary);
    }
    .value {
      .string {
        color: mat-color($warn);
      }
      .number {
        color: mat-color($accent);
      }
      .boolean {
        color: mat-color($accent);
      }
      .null,
      .undefined {
        color: mat-color($foreground, disabled-text);
      }
      .function {
        color: mat-color($primary);
      }
      .date {
        color: mat-color($foreground, text);
      }
    }
  }
}