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

@scope to (devtools-widget > *) {
  .bold {
    font-weight: bold;
  }

  .url {
    margin-left: 15px;
    margin-right: 5px;
  }

  .url--host {
    color: var(--sys-color-token-subtle);
  }

  .priority-row {
    margin-left: 15px;
  }

  .throttled-row {
    margin-left: 15px;
    color: var(--sys-color-yellow);
  }

  .network-category-chip {
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 1px solid var(--sys-color-divider);
    display: inline-block;
    margin-right: 4px;
  }

  devtools-icon.priority {
    height: 13px;
    width: 13px;
    color: var(--sys-color-on-surface-subtle);
  }

  .render-blocking {
    margin-left: 15px;
    color: var(--sys-color-error);
  }

  .divider {
    border-top: 1px solid var(--sys-color-divider);
    margin: 5px 0;
  }

  .timings-row {
    align-self: start;
    display: flex;
    align-items: center;
  }

  .indicator {
    display: inline-block;
    width: 12px;
    height: 6px;
    margin-right: 5px;
    border: 1px solid var(--sys-color-on-surface-subtle);
    box-sizing: border-box;
  }

  devtools-icon.indicator {
    vertical-align: middle;
    height: 12px;
    width: 12px;
    margin-right: 4px;
    color: var(--sys-color-yellow);
    border: none;
  }


  .whisker-left {
    align-self: center;
    display: inline-flex;
    width: 11px;
    height: 6px;
    margin-right: 5px;
    border-left: 1px solid var(--sys-color-on-surface-subtle);
    box-sizing: border-box;
  }

  .whisker-right {
    align-self: center;
    display: inline-flex;
    width: 11px;
    height: 6px;
    margin-right: 5px;
    border-right: 1px solid var(--sys-color-on-surface-subtle);
    box-sizing: border-box;
  }

  .horizontal {
    background-color: var(--sys-color-on-surface-subtle);
    height: 1px;
    width: 10px;
    align-self: center;
  }

  .time {
    /* Push the time to right. */
    margin-left: auto;
    display: inline-block;
    padding-left: 10px;
  }

  .timings-row--duration {
    .indicator {
      border-color: transparent;
    }

    .time {
      font-weight: var(--ref-typeface-weight-medium);
    }

    &.throttled {
      color: var(--sys-color-yellow);
    }
  }

  .redirects-row {
    margin-left: 15px;
  }
}