@import 'Variables';
$color_indexDuration: #b33;
$color_proxyDuration: #b3b;
$color_clientDuration: #3b3;
$color_duration: #33b;
.coveo-debug.coveo-modal-container {
  .coveo-modal-content {
    @include transition(opacity 0.3s);
    &.coveo-debug-loading {
      opacity: 0.5;
    }
  }
  .coveo-checkbox-label,
  .coveo-input {
    margin: 8px;
  }
  .coveo-checkbox-label {
    margin-left: 18px;
  }
  .coveo-checkbox-span-label {
    margin-left: 6px;
  }
  .coveo-modal-header {
    a {
      @include clickable();
    }
    height: auto;
    min-height: 80px;
    padding: 20px;
    @include flex-wrap(wrap);
  }
  .coveo-modal-body {
    .coveo-searching {
      .coveo-property {
        display: none;
      }
      .coveo-property.coveo-search-match {
        display: block;
        .coveo-property {
          display: block;
        }
        > .coveo-property-label,
        > .coveo-property-value {
          > .coveo-debug-highlight {
            background: yellow;
          }
        }
      }
      .coveo-property.coveo-search-submatch {
        display: block;
      }
      .coveo-section-container > .coveo-property {
        display: block;
        .coveo-property-value {
          display: none;
        }
        &:after {
          content: 'No match';
        }
        &.coveo-search-submatch,
        &.coveo-search-match {
          .coveo-property-value {
            display: block;
          }
          &:after {
            content: '';
          }
        }
      }
    }
    .coveo-searching-loading {
      display: none;
    }
    .coveo-debug {
      min-width: 800px;
    }
  }
  .coveo-debug-durations {
    display: table;
    width: 100%;
    height: 32px;
    margin-bottom: 16px;
    .coveo-debug-duration {
      display: table-cell;
      height: 32px;
      &[data-id='indexDuration'] {
        background: $color_indexDuration;
      }
      &[data-id='proxyDuration'] {
        background: $color_proxyDuration;
      }
      &[data-id='clientDuration'] {
        background: $color_clientDuration;
      }
      &[data-id='duration'] {
        background: $color_duration;
      }
    }
  }
  .coveo-debug-duration-legend {
    display: inline-block;
    margin-right: 16px;
    &[data-id='indexDuration']:before {
      background: $color_indexDuration;
    }
    &[data-id='proxyDuration']:before {
      background: $color_proxyDuration;
    }
    &[data-id='clientDuration']:before {
      background: $color_clientDuration;
    }
    &[data-id='duration']:before {
      background: $color_duration;
    }
    &:before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 16px;
      vertical-align: middle;
      margin-right: 2px;
    }
    .coveo-debug-duration-label {
      vertical-align: middle;
      &:after {
        content: ': ';
      }
    }
    .coveo-debug-duration-value {
      vertical-align: middle;
    }
  }
  .coveo-section {
    &.coveo-debug-collapsed {
      .coveo-section-header:before {
        content: '\25b6';
      }
      .coveo-section-container {
        display: none;
      }
    }
    .coveo-section-header {
      &:before {
        content: '\25bc';
        vertical-align: middle;
        margin-right: 8px;
      }
      font-size: 16px;
      font-weight: bold;
      background: #eee;
      border-top: #ccc solid 1px;
      border-bottom: #ccc solid 1px;
      padding: 8px 16px;
      cursor: pointer;
    }
    .coveo-section-container {
      padding: 16px 8px;
      overflow: auto;
      .coveo-property {
        line-height: 18px;
        font-family: Consolas, Menlo, Monaco, monospace;
        padding-left: 16px;
        clear: both;
        .coveo-property-label {
          float: left;
          color: #263238;
          &:after {
            content: ':';
            color: #212121;
            padding-right: 8px;
          }
        }
        &.coveo-property-object {
          &.coveo-collapsible {
            > .coveo-property-label {
              position: relative;
              float: none;
              cursor: pointer;
              &:before {
                content: '\25b6';
                position: absolute;
                right: 100%;
                top: 0;
                line-height: 18px;
                font-size: 12px;
                padding-right: 2px;
                color: #263238;
              }
            }
            > .coveo-property-value {
              display: none;
            }
            &.coveo-expanded,
            &.coveo-search-submatch {
              > .coveo-property-value {
                display: block;
              }
              > .coveo-property-label:before {
                content: '\25bc';
              }
            }
          }
        }
        &.coveo-property-basic {
          .coveo-property-value {
            color: #212121;
            &.coveo-property-value-string {
              color: #d50000;
              white-space: pre-wrap;
              word-wrap: break-word;
              &:before {
                content: '"';
              }
              &:after {
                content: '"';
              }
            }
            &.coveo-property-value-null,
            &.coveo-property-value-object,
            &.coveo-property-value-array {
              color: #9e9e9e;
            }
            &.coveo-property-value-number,
            &.coveo-property-value-boolean,
            &.coveo-property-value-date {
              color: #2196f3;
            }
          }
        }
      }
      > .coveo-property {
        padding-left: 0;
      }
    }
  }
}
