src/third_party/devtools/front_end/ui/segmentedButton.css

/*
 * Copyright 2018 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.
 */

.segmented-button {
  align-items: center;
  align-content: center;
  display: flex;
}

.segmented-button-segment {
  background-color: white;
  border: var(--divider-border);
  border-right-style: none;
  color: #5a5a5a;
  flex: 1 1 0;
  font-weight: 700;
  margin-left: -1px;
  padding: 4px 16px;
}

.segmented-button-segment:hover {
  background-color: #F4F4F4;
  color: #333;
}

.segmented-button-segment:first-child {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.segmented-button-segment:last-child {
  border-bottom-right-radius: 4px;
  border-right-style: solid;
  border-top-right-radius: 4px;
}

.segmented-button-segment.segmented-button-segment-selected {
  background-color: hsl(218, 81%, 59%);
  border-color: transparent;
  color: #FAFAFA;
}

.segmented-button-segment.segmented-button-segment-selected:hover {
  background-color: hsl(218, 81%, 62%);
  color: #FFF;
}

/* Remove a border between the selected button and its siblin */
.segmented-button-segment-selected + .segmented-button-segment {
  border-left-color: transparent;
}