/*
 * Copyright (c) 2024 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.
 */

.bold {
  font-weight: bold;
}

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

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

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

.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;
  width: 100%;
}

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

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

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

.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);
  }
}