/*
 * Copyright 2016 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

:host {
  background-color: var(--sys-color-cdt-base-container);
}

.report-content-box {
  background-color: var(--sys-color-cdt-base-container);
  overflow: auto;
}

.report-content-box.no-scroll {
  overflow: visible;
}

.report-header {
  border-bottom: 1px solid var(--sys-color-divider);
  padding: 12px 24px;
}

.report-header devtools-toolbar {
  margin-bottom: -8px;
  margin-top: 5px;
  margin-left: -8px;
}

.report-title {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.report-url,
.report-subtitle {
  font-size: 12px;
  margin-top: 10px;
}

.report-section {
  display: flex;
  padding: 12px;
  border-bottom: 1px solid var(--sys-color-divider);
  flex-direction: column;
}

.report-section-header {
  margin-left: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;

  devtools-button {
    flex: 0 0 auto;
  }
}

.report-section-title {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 16px;
  font-weight: bold;
  color: var(--sys-color-on-surface);
  min-width: var(--sys-size-21);
  white-space: nowrap;
}

.report-field {
  margin-top: 8px;
  display: flex;
  line-height: 28px;
}

.report-row {
  margin: 10px 0 2px 18px;

  &:has(dt-checkbox) {
    margin-top: 7px;
  }
}

.report-field-name {
  color: var(--sys-color-on-surface-subtle);
  flex: 0 0 128px;
  text-align: right;
  padding: 0 6px;
  white-space: pre-wrap;
}

.report-field-value {
  flex: auto;
  padding: 0 6px;
  white-space: pre;
  user-select: text;
}

.report-field-value-is-flexed {
  display: flex;
  white-space: pre-wrap;
}

.report-field-value-subtitle {
  color: var(--sys-color-state-disabled);
  line-height: 14px;
}

.report-row-selectable {
  user-select: text;
}

.image-wrapper,
.image-wrapper img {
  max-width: 200px;
  max-height: 200px;
  display: block;
  object-fit: contain;
}

.image-wrapper {
  height: fit-content;
  margin-right: 8px;
}

.show-mask img {
  /* The safe zone is a centrally positioned circle, with radius 2/5
  * (40%) of the minimum of the icon's width and height.
  * https://w3c.github.io/manifest/#icon-masks */
  clip-path: circle(40% at 50% 50%);
}

.show-mask .image-wrapper {
  background: var(--image-file-checker);
}

@media (forced-colors: active) {
  .report-field-value .inline-icon {
    color: ButtonText;
  }

  .report-field-value .multiline-value {
    color: ButtonText;
  }
}