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

cr-tab-box {
  /* selected treeItem is 2 */
  --cr-tab-box-tabs-z-index: 3;
}

/* Devices Tab */
table.styled-table {
  border-collapse: collapse;
}

table.styled-table,
.styled-table th,
.styled-table td {
  border: 1px solid #777;
  padding-inline-end: 4px;
  padding-inline-start: 4px;
}

.styled-table th {
  text-align: start;
}

.page-section {
  border: 1px solid #777;
  padding: 4px;
}

.action-success {
  color: green;
}

.action-failure {
  color: red;
}

/* device page */
.descriptor-button button {
  width: 100%;
}

.descriptor-button {
  position: sticky;
  /* height of <tabs> */
  top: 20px;
  /* selected treeItem is 2 */
  z-index: 3;
}

/* descriptor panel */
descriptorpanel {
  display: flex;
  overflow: visible;
}

descriptorpaneltitle {
  font-size: 16px;
  margin-block-start: 16px;
}

.string-descriptor-panel input {
  margin-inline-end: 16px;
  margin-inline-start: 8px;
}

.raw-data-byte-view,
.raw-data-tree-view {
  flex: 1 0;
}

.raw-data-byte-view {
  font-size: 14px;
  line-height: 250%;
  white-space: pre;
}

.raw-data-byte-view div {
  position: sticky;
  /* height of <tabs> and button */
  top: 41px;
}

@media screen and (min-width: 1200px) {
  .raw-data-byte-view div span:nth-child(16n)::after {
    content: '\A';
  }
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
  .raw-data-byte-view div span:nth-child(8n)::after {
    content: '\A';
  }
}

@media screen and (min-width: 300px) and (max-width: 599px) {
  .raw-data-byte-view div span:nth-child(4n)::after {
    content: '\A';
  }
}

@media screen and (min-width: 150px) and (max-width: 299px) {
  .raw-data-byte-view div span:nth-child(2n)::after {
    content: '\A';
  }
}

.raw-data-byte-view div span {
  font-family: monospace;
  padding-inline-end: .5em;
  padding-inline-start: .5em;
}

.raw-data-byte-view .selected-field {
  background: red;
}

.raw-data-byte-view .hovered-field {
  background: yellow;
}

#input-type {
  display: block;
}

#testing-tool tr td select {
  display: block;
  width: 100%;
}

textarea {
  display: block;
  font-family: monospace;
}

error {
  color: red;
  display: block;
  font-size: 16px;
  padding-inline-start: 20px;
}

warn {
  color: red;
  display: block;
  font-size: 24px;
}