/*
 * 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 > *) {
  .network-request-details-title {
    font-size: 13px;
    padding: 8px;
    display: flex;
    align-items: center;
  }

  .network-request-details-title > div {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid var(--sys-color-divider);
    display: inline-block;
    margin-right: 4px;
  }

  .network-request-details-content {
    border-bottom: 1px solid var(--sys-color-divider);
  }

  .network-request-details-cols {
    display: flex;
    justify-content: space-between;
    width: fit-content;
  }

  :host {
    display: contents; /* needed to avoid a floating border when scrolling */
  }

  .network-request-details-col {
    max-width: 300px;
  }

  .column-divider {
    border-left: 1px solid var(--sys-color-divider);
  }

  .network-request-details-col.server-timings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: fit-content;
    width: 450px;
    gap: 0;
  }

  .network-request-details-item, .network-request-details-col {
    padding: 5px 10px;
  }

  .server-timing-column-header {
    font-weight: var(--ref-typeface-weight-medium);
  }

  .network-request-details-row {
    min-height: min-content;
    display: flex;
    justify-content: space-between;
  }

  .title {
    color: var(--sys-color-token-subtle);
    overflow: hidden;
    padding-right: 10px;
    display: inline-block;
    vertical-align: top;
  }

  .value {
    display: inline-block;
    user-select: text;
    text-overflow: ellipsis;
    overflow: hidden;

    &.synthetic {
      font-style: italic;
    }
  }

  .focusable-outline {
    overflow: visible;
  }

  .devtools-link,
  .timeline-link {
    color: var(--text-link);
    text-decoration: underline;
    outline-offset: 2px;
    padding: 0;
    text-align: left;

    .elements-disclosure & {
      color: var(--text-link);
    }

    devtools-icon {
      vertical-align: baseline;
      color: var(--sys-color-primary);
    }

    :focus .selected & devtools-icon {
      color: var(--sys-color-tonal-container);
    }

    &:focus-visible {
      outline-width: unset;
    }

    &.invalid-link {
      color: var(--text-disabled);
      text-decoration: none;
    }

    &:not(.devtools-link-prevent-click, .invalid-link) {
      cursor: pointer;
    }

    @media (forced-colors: active) {
      &:not(.devtools-link-prevent-click) {
        forced-color-adjust: none;
        color: linktext;
      }

      &:focus-visible {
        background: Highlight;
        color: HighlightText;
      }
    }
  }

  .text-button.link-style,
  .text-button.link-style:hover,
  .text-button.link-style:active {
    background: none;
    border: none;
    font: inherit;
  }
}