/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* CSS Variables specific to this panel that aren't defined by the themes */
:root {
  --rule-highlight-background-color: var(--theme-highlight-yellow);
  --rule-header-background-color: var(--theme-toolbar-background);
  --rule-pseudo-class-text-color: var(--yellow-70) ;
  --rule-unused-name-text-color: var(--grey-50);
  --rule-unused-value-text-color: var(--grey-45);
  --rule-overridden-name-text-color: var(--grey-50);
  --rule-overridden-value-text-color: var(--grey-45);
}

:root.theme-dark {
  --rule-highlight-background-color: #521C76;
  --rule-header-background-color: #222225;
  --rule-pseudo-class-text-color: var(--yellow-50);

  --rule-unused-name-text-color: var(--grey-45);
  --rule-unused-value-text-color: #787878;
  --rule-overridden-name-text-color: var(--grey-45);
  --rule-overridden-value-text-color: #787878;
}

/* Rule View Tabpanel */

#sidebar-panel-ruleview {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  /* Override the min-width from .inspector-tabpanel, as the rule panel can support small
     widths */
  min-width: 100px;
}

/* Rule View Toolbar */

#ruleview-toolbar-container {
  line-height: var(--theme-toolbar-height);
}

#ruleview-toolbar {
  flex-wrap: wrap;
  height: auto;
}

#ruleview-toolbar .devtools-searchbox {
  flex-basis: 7em;
  height: var(--theme-toolbar-height);
}

#ruleview-command-toolbar {
  display: flex;
}

.ruleview-reveal-panel {
  border-bottom: 1px solid var(--theme-splitter-color);
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  margin: 2px;
}

.ruleview-reveal-panel[hidden] {
  display: none;
}

.ruleview-reveal-panel .add-class {
  height: var(--theme-toolbar-height);
  line-height: normal;
}

.ruleview-reveal-panel label {
  user-select: none;
  display: flex;
  align-items: center;
}

#pseudo-class-panel,
#ruleview-class-panel .classes {
  padding: 0 3px;
}

/* Pseudo Class toggle panel */

#pseudo-class-panel {
  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
}

#pseudo-class-panel:not([hidden]) {
  display: grid;
}

/* Class toggle panel */

#ruleview-class-panel {
  flex-direction: column;
}

#ruleview-class-panel .classes {
  border-top: 1px solid var(--theme-splitter-color);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 100px;
  overflow-y: auto;
}

#ruleview-class-panel .classes label {
  flex: 0 0;
  max-width: 50%;
  min-width: 100px;
}

#ruleview-class-panel .classes label span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#ruleview-class-panel .no-classes {
  flex: 1;
  color: var(--theme-text-color-inactive);
  margin: 0;
  text-align: center;
}

/* Rule View Container */

#ruleview-container {
  user-select: text;
  overflow: auto;
  flex: auto;
  height: 100%;
}

/* This extra wrapper only serves as a way to get the content of the view focusable.
   So that when the user reaches it either via keyboard or mouse, we know that the view
   is focused and therefore can handle shortcuts.
   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
   through it, and the outline is hidden. */
#ruleview-container-focusable {
  height: 100%;
  outline: none;
}

#ruleview-container.non-interactive {
  pointer-events: none;
  visibility: collapse;
  transition: visibility 0.25s;
}

#ruleview-container .accordion ._content {
  padding: 0;
}

.ruleview-property:not(:hover) > .ruleview-enableproperty {
  pointer-events: none;
}

.ruleview-expandable-container {
  display: block;
}

.ruleview-namecontainer {
  cursor: text;
  margin-left: -35px;
}

.ruleview-computed > .ruleview-namecontainer {
  margin: 0;
}

.ruleview-propertyvaluecontainer {
  cursor: text;
  padding-right: 5px;
}

.ruleview-propertyvaluecontainer a {
  color: var(--theme-highlight-purple);
  cursor: pointer;
}

.ruleview-computedlist,
.ruleview-expandable-container[hidden],
.ruleview-overridden-items[hidden],
.ruleview-overridden-rule-filter[hidden],
.ruleview-warning[hidden],
.ruleview-unused-warning[hidden],
.ruleview-compatibility-warning[hidden],
.ruleview-used[hidden],
.ruleview-overridden .ruleview-grid {
  display: none;
}

.ruleview-computedlist[user-open],
.ruleview-computedlist[filter-open],
.ruleview-overridden-items {
  display: block;
}

.ruleview-rule-source {
  text-align: end;
  float: right;
  max-width: 100%;

  /* Force RTL direction to crop the source link at the beginning. */
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;

  user-select: none;
  margin-bottom: 2px;
  margin-left: 1ch;
}

.ruleview-rule-source-label {
  white-space: nowrap;
  margin: 0;
  cursor: pointer;

  /* Create an LTR embed to avoid special characters being shifted to the start due to the
     parent node direction: rtl; */
  direction: ltr;
  unicode-bidi: embed
}

.ruleview-rule-source.disabled > .ruleview-rule-source-label,
.ruleview-rule-source[unselectable] > .ruleview-rule-source-label {
  cursor: default;
}

.ruleview-rule-source:not([unselectable]) {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.ruleview-header {
  background: var(--rule-header-background-color);
  border-bottom: 1px solid var(--theme-splitter-color);
  color: var(--theme-toolbar-color);
  font-size: 12px;
  line-height: 16px;
  padding: 4px;
  width: 100%;
  align-items: center;
  display: flex;
  user-select: none;
}

.ruleview-expandable-header {
  cursor: pointer;
}

.ruleview-expandable-header:hover {
  background-color: var(--theme-accordion-header-hover);
}

.ruleview-expandable-header .theme-twisty {
  margin-inline-start: 0;
  margin-inline-end: 2px;
}

.ruleview-rule-pseudo-element {
  padding-left: 20px;
  border-left: solid 10px;
}

.ruleview-rule {
  border-bottom: 1px solid var(--theme-splitter-color);
  padding: 2px 4px;
  direction: ltr;
}

#ruleview-container-focusable > .ruleview-rule:last-child {
  border-bottom: none;
}

/**
 * Display rules that don't match the current selected element and uneditable
 * user agent styles differently
 */
.ruleview-rule.unmatched,
.ruleview-rule.uneditable,
.ruleview-rule[unmatched=true],
.ruleview-rule[uneditable=true] {
  background: var(--theme-tab-toolbar-background);
}

.ruleview-rule.unmatched,
.ruleview-rule[unmatched=true] {
  opacity: 0.5;
}

.ruleview-rule.uneditable :focus,
.ruleview-rule[uneditable=true] :focus {
  outline: none;
}

.ruleview-rule.uneditable .theme-link,
.ruleview-rule[uneditable=true] .theme-link {
  color: var(--theme-highlight-bluegrey);
}

.ruleview-rule.uneditable .ruleview-enableproperty,
.ruleview-rule[uneditable=true] .ruleview-enableproperty {
  visibility: hidden;
}

.ruleview-rule.uneditable .ruleview-swatch,
.ruleview-rule[uneditable=true] .ruleview-swatch {
  cursor: default;
}

.ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname,
.ruleview-rule.uneditable .ruleview-propertyvaluecontainer >
.ruleview-propertyvalue,
.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
.ruleview-propertyvalue {
  border-bottom-color: transparent;
}

.ruleview-property.unused .ruleview-propertyname {
  color: var(--rule-unused-name-text-color);
}

.ruleview-property.unused .ruleview-propertyvalue {
  color: var(--rule-unused-value-text-color);
}

.ruleview-overridden-rule-filter {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-start: 3px;
  background-image: url(chrome://devtools/skin/images/filter-small.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  -moz-context-properties: fill;
  fill: var(--theme-icon-dimmed-color);
}

.ruleview-overridden-rule-filter:hover {
  fill: var(--theme-icon-color);
}

.ruleview-ruleopen {
  padding-inline-end: 5px;
}

.ruleview-ruleclose {
  clear: both;
  cursor: text;
  padding-right: 20px;
}

.ruleview-propertylist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ruleview-enableproperty {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}

:root[platform="mac"] .ruleview-enableproperty {
  left: -29px;
  box-sizing: border-box;
  margin-inline-start: 3px;
  margin-inline-end: 9px;
  width: 12px;
  height: 12px;
}

/* The SVG checkbox on Windows and Linux */
:root[platform="win"] .ruleview-enableproperty,
:root[platform="linux"] .ruleview-enableproperty {
  appearance: none;
  float: left;
  left: -27px;
  box-sizing: content-box;
  margin-inline-start: 0;
  margin-inline-end: 10px;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 0;
  padding: 0;
  outline: none;
  background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box;
  /* Using fill to paint the border, and stroke for the tick */
  -moz-context-properties: fill, stroke;
  fill: rgba(0,0,0,.3);
  stroke: transparent;
}

:root[platform="win"].theme-dark .ruleview-enableproperty,
:root[platform="linux"].theme-dark .ruleview-enableproperty {
  fill: rgba(255,255,255,.4);
}

:root[platform="win"] .ruleview-enableproperty:checked,
:root[platform="linux"] .ruleview-enableproperty:checked {
  stroke: rgba(0,0,0,.6);
}

:root[platform="win"].theme-dark .ruleview-enableproperty:checked,
:root[platform="linux"].theme-dark .ruleview-enableproperty:checked {
  stroke: rgba(255,255,255,.8);
}

:root[platform="mac"] .ruleview-enableproperty {
  appearance: auto;
  -moz-default-appearance: checkbox;
}

.ruleview-warning,
.ruleview-unused-warning,
.ruleview-compatibility-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-size: 12px;
  background-repeat: no-repeat;
  -moz-context-properties: fill;
}

.ruleview-warning {
  background-image: url(chrome://devtools/skin/images/alert-small.svg);
  fill: var(--yellow-60);
}

.ruleview-unused-warning {
  background-image: url(chrome://devtools/skin/images/info-small.svg);
  background-color: var(--theme-sidebar-background);
  fill: var(--theme-icon-dimmed-color);
}

.ruleview-compatibility-warning {
  background-image: url(chrome://devtools/skin/images/report.svg);
  background-color: var(--theme-sidebar-background);
  fill: var(--theme-icon-dimmed-color);
}

.ruleview-unused-warning:hover,
.ruleview-compatibility-warning:hover {
  fill: var(--theme-icon-color);
  stroke: var(--theme-icon-color);
}

.ruleview-rule:not(:hover) .ruleview-enableproperty:not(:focus) {
  /* Use opacity to hide the checkbox instead of visibility:hidden,
     so that it's possible to focus it with the keyboard. */
  opacity: 0;
}

.ruleview-expander {
  vertical-align: middle;
}

.ruleview-propertycontainer .ruleview-expander {
  margin-left: -6px;
}

.ruleview-propertycontainer .ruleview-expander:dir(rtl):not([open]) {
  /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
  transform: rotate(-90deg);
}

.ruleview-newproperty {
  margin-inline-start: -10px;
}

.ruleview-namecontainer,
.ruleview-propertyvaluecontainer,
.ruleview-propertyname,
.ruleview-propertyvalue {
  text-decoration: inherit;
}

.ruleview-computedlist {
  list-style: none;
  padding: 0;
}

.ruleview-overridden-items {
  margin-inline-start: -25px;
  list-style: none;
  line-height: 1.5em;
}

.ruleview-overridden-item {
  position: relative;
}

.ruleview-overridden-item::before,
.ruleview-overridden-item::after {
  content: "";
  position: absolute;
  display: block;
  border: 0 solid var(--theme-text-color-alt);
}

.ruleview-overridden-item::before {
  top: 0;
  left: -15px;
  height: 0.8em;
  width: 10px;
  border-left-width: 0.5px;
  border-bottom-width: 0.5px;
}

.ruleview-overridden-item::after {
  left: -15px;
  bottom: -7px;
  height: 100%;
  border-left-width: 0.5px;
}

.ruleview-overridden-item:last-child::after {
  display: none;
}

.ruleview-overridden-item .ruleview-namecontainer {
  margin-left: 0;
}

/* All swatches */

.ruleview-flex,
.ruleview-grid,
.ruleview-shapeswatch,
.ruleview-swatch {
  cursor: pointer;
  width: 1em;
  height: 1em;
  vertical-align: middle;

  /* align the swatch with its value */
  margin-top: -1px;
  margin-inline-end: 5px;
  display: inline-block;
  position: relative;
}

/* Icon swatches not using the .ruleview-swatch class (flex, grid, shape) */

.ruleview-flex,
.ruleview-grid,
.ruleview-shapeswatch {
  -moz-context-properties: stroke;
  stroke: var(--theme-icon-color);
}

.ruleview-flex.active,
.ruleview-grid.active,
.ruleview-shapeswatch.active {
  stroke: var(--theme-icon-checked-color);
}

.ruleview-flex {
  background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg");
  background-size: 13px 11px;
  width: 13px;
  height: 11px;
}

.ruleview-grid {
  background-image: url("chrome://devtools/skin/images/grid.svg");
}

.ruleview-grid[disabled] {
  cursor: default;
  opacity: 0.5;
}

.ruleview-shapeswatch {
  background-image: url("chrome://devtools/skin/images/shape-swatch.svg");
  background-size: 110%;
  width: 1.45em;
  height: 1.45em;
}

.ruleview-shape-point.active,
.ruleview-shapeswatch.active + .ruleview-shape > .ruleview-shape-point:hover {
  background-color: var(--rule-highlight-background-color);
}

/* Round swatches using the .ruleview-swatch class (color, bezier, filter and angle) */

.ruleview-swatch {
  background-size: 1em;
  border-radius: 50%;
}

.ruleview-colorswatch::before {
  content: '';
  background-color: #eee;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.ruleview-swatch.ruleview-colorswatch {
  border: none;
  padding: 0;
}

.ruleview-bezierswatch {
  background-image: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg");
}

.ruleview-filterswatch {
  background-image: url("chrome://devtools/skin/images/filter-swatch.svg");
}

.ruleview-angleswatch {
  background-image: url("chrome://devtools/skin/images/angle-swatch.svg");
}

.ruleview-lineareasingswatch {
  background-image: url("chrome://devtools/skin/images/linear-easing-swatch.svg");
}

.ruleview-overridden {
  text-decoration: line-through solid var(--theme-text-color-alt);
}

.ruleview-property.ruleview-overridden .ruleview-propertyname {
  color: var(--rule-overridden-name-text-color);
}

.ruleview-property.ruleview-overridden .ruleview-propertyvalue {
  color: var(--rule-overridden-value-text-color);
}

/**
 * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
 * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
 * .ruleview-flex and .ruleview-grid are custom
 */
.ruleview-overridden .ruleview-flex,
.ruleview-overridden .ruleview-grid,
.ruleview-overridden .ruleview-shapeswatch,
.ruleview-overridden .ruleview-swatch {
  display: none;
}

.ruleview-font-family.used-font {
  text-decoration: underline;
}

.styleinspector-propertyeditor {
  border: 1px solid #CCC;
  padding: 0;
  margin: -1px -3px -1px -1px;
}

.ruleview-property {
  border-left: 3px solid transparent;
  clear: both;
  padding-left: 28px;
  overflow-wrap: break-word;
}

.ruleview-propertycontainer  > * {
  vertical-align: middle;
}

.ruleview-property.ruleview-changed,
.ruleview-property[dirty] {
  border-left-color: var(--theme-highlight-green);
}

.ruleview-highlight > .ruleview-expander,
.ruleview-highlight > .ruleview-namecontainer,
.ruleview-highlight > .ruleview-propertyvaluecontainer,
.ruleview-highlight > .ruleview-rule-source-label,
.ruleview-highlight > .ruleview-selector,
.ruleview-rule-ancestor-data li.ruleview-highlight {
  background-color: var(--rule-highlight-background-color);
}

.ruleview-namecontainer > .ruleview-propertyname,
.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
  border-bottom: 1px dashed transparent;
}

.ruleview-namecontainer:hover > .ruleview-propertyname,
.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
  border-bottom-color: hsl(0,0%,50%);
}

/* @media and @layer rule info element */
ul.ruleview-rule-ancestor-data {
  max-width: 100%;
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ruleview-rule-ancestor-data li {
  /* When there's a search and this element is highlighted, this prevents the background
     color to be applied to the whole width of the parent ul block */
  max-width: max-content;
}

.ruleview-rule-ancestor-data li.has-tooltip:hover .container-query-declaration {
  text-decoration: underline;
  text-decoration-color: var(--theme-highlight-blue);
  text-decoration-style: dotted;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.ruleview-rule-ancestor-data li button.open-inspector {
  /* There's a space character after the button, so add a 1ch margin-inline-start to be consistent */
  margin-inline: 1ch 0;
}

.ruleview-selectorcontainer {
  word-wrap: break-word;
  cursor: text;
}

.ruleview-selector-separator,
.ruleview-selector-unmatched,
.ruleview-unmatched-variable {
  color: #888;
}

.ruleview-selector-matched > .ruleview-selector-attribute {
  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
}

.ruleview-selector-matched > .ruleview-selector-pseudo-class {
  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
}

.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
  color: var(--rule-pseudo-class-text-color);
}

.ruleview-selectorhighlighter {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat 0 0;
  background-size: contain;
  cursor: pointer;
  -moz-context-properties: fill;
  fill: var(--theme-icon-dimmed-color);
}

.ruleview-selectorhighlighter:hover {
  fill: var(--theme-icon-color);
}

.ruleview-selectorhighlighter:active,
.ruleview-selectorhighlighter.highlighted {
  fill: var(--theme-icon-checked-color);
  /* Since the icon is quite thin, it can be hard to differentiate it
     from its regular state. Adding some background helps make it pop a bit */
  background-color: var(--dimmed-highlighter-box-content-color);
}

#ruleview-add-rule-button::before {
  background-image: url("chrome://devtools/skin/images/add.svg");
  background-size: 14px;
}

#pseudo-class-panel-toggle::before {
  content: ":hov";
}

#class-panel-toggle::before {
  content: ".cls";
}

#pseudo-class-panel-toggle::before,
#class-panel-toggle::before {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  direction: ltr;
}

#print-simulation-toggle::before {
  background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg");
}

#color-scheme-simulation-light-toggle::before {
  background-image: url("chrome://devtools/skin/images/rules-view-light-mode-simulation.svg");
  -moz-context-properties: fill, stroke;
  stroke: currentColor;
}

#color-scheme-simulation-dark-toggle::before {
  background-image: url("chrome://devtools/skin/images/rules-view-dark-mode-simulation.svg");
}

.flash-out {
  transition: background 1s;
}

.ruleview-propertyvalue-draggable {
  cursor: col-resize;
}

.ruleview-propertyvalue-dragging {
  user-select: none;
}

.ruleview-propertyvalue-break-spaces {
  white-space: break-spaces;
}