front_end/panels/css_overview/cssOverviewSidebarPanel.css

/**
 * Copyright 2019 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 > *) {
  .overview-sidebar-panel {
    display: flex;
    background: var(--sys-color-cdt-base-container);
    min-width: fit-content;
    flex-direction: column;
  }

  .overview-sidebar-panel-item {
    height: 30px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    color: var(--sys-color-on-surface);
    white-space: nowrap;

    &:hover {
      background: var(--sys-color-state-hover-on-subtle);
    }

    &:focus {
      background: var(--sys-color-state-focus-highlight);
    }

    &.selected {
      background: var(--sys-color-tonal-container);
      color: var(--sys-color-on-tonal-container);
    }
  }

  .overview-toolbar {
    border-bottom: 1px solid var(--sys-color-divider);
    flex: 0 0 auto;
  }

  .overview-sidebar-panel-item:focus-visible {
    outline-width: unset;
  }

  @media (forced-colors: active) {
    .overview-sidebar-panel-item.selected {
      forced-color-adjust: none; /* crbug.com/1166705 workaround */
      background: Highlight;
      color: HighlightText;
    }

    .overview-sidebar-panel-item:hover {
      forced-color-adjust: none; /* crbug.com/1166705 workaround */
      background: Highlight;
      color: HighlightText;
    }
  }
}