.json-formatter-theme (
  @default-color: black,
  @string-color: green,
  @number-color: blue,
  @boolean-color: red,
  @null-color: #855A00,
  @undefined-color: rgb(202, 11, 105),
  @function-color: #FF20ED,
  @rotate-time: 100ms,
  @toggler-opacity: 0.6,
  @toggler-color: #45376F,
  @bracket-color: blue,
  @key-color: #00008B,
  @url-color: blue ) {

  font-family: monospace;
  &, a, a:hover {
    color: @default-color;
    text-decoration: none;
  }

  .json-formatter-row {
    margin-left: 1em;
  }

  .children {
    &.empty {
      opacity: 0.5;
      margin-left: 1em;

      &.object:after { content: "No properties"; }
      &.array:after { content: "[]"; }
    }
  }

  .string {
    color: @string-color;
    white-space: pre;
    word-wrap: break-word;
  }
  .number { color: @number-color; }
  .boolean { color: @boolean-color; }
  .null { color: @null-color; }
  .undefined { color: @undefined-color; }
  .function { color: @function-color; }
  .date { background-color: fade(@default-color, 5%); }
  .url {
    text-decoration: underline;
    color: @url-color;
    cursor: pointer;
  }

  .bracket { color: @bracket-color; }
  .key {
    color: @key-color;
    cursor: pointer;
    &.changed {
      color: white;
    }
    &.new {
      color: @string-color; 
    }
    &.deleted {
      color: @boolean-color;
    }
  }

  .constructor-name {
    cursor: pointer;
  }

  .toggler {
    font-size: 0.8em;
    line-height: 1.2em;
    vertical-align: middle;
    opacity: 0.6;
    cursor: pointer;

    &:after {
      display: inline-block;
      transition: transform @rotate-time ease-in;
      content: "►";
    }

    &.open:after{
      transform: rotate(90deg);
    }
  }

  > a >.thumbnail-text {
    opacity: 0;
    transition: opacity .15s ease-in;
    font-style: italic;
  }

  &:hover > a > .thumbnail-text {
    opacity: 0.6;
  }
}


.json-formatter-row {
  .json-formatter-theme();
}

.json-formatter-dark {
  .json-formatter-row {
    background-color: #333;
    .json-formatter-theme(
      @default-color: white,
      @string-color: #31F031,
      @number-color: #66C2FF,
      @boolean-color: #EC4242,
      @null-color: #EEC97D,
      @undefined-color: rgb(239, 143, 190),
      @function-color: #FD48CB,
      @rotate-time: 100ms,
      @toggler-opacity: 0.6,
      @toggler-color: #45376F,
      @bracket-color: #9494FF,
      @key-color: #23A0DB,
      @url-color: #027BFF,
      );
  }
}