path: root/devtools/client/themes/tooltips.css

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

/* Import stylesheets for specific tooltip widgets */
@import url(chrome://devtools/skin/accessibility-color-contrast.css);
@import url(chrome://devtools/skin/badge.css);
@import url(chrome://devtools/content/shared/widgets/cubic-bezier.css);
@import url(chrome://devtools/content/shared/widgets/filter-widget.css);
@import url(chrome://devtools/content/shared/widgets/linear-widget.css);
@import url(chrome://devtools/content/shared/widgets/spectrum.css);
@import url(chrome://devtools/skin/variables.css);
/*
 * compatibility.css is primarily used by the Compatibility panel, so import it in a layer
 * to give it a lower importance than the rule here and mitigate styling mismatch.
 */
@import url(chrome://devtools/skin/compatibility.css) layer(shared);

/* Tooltip specific theme variables */

.theme-dark {
  --bezier-diagonal-color: #eee;
  --bezier-grid-color: rgba(255, 255, 255, 0.1);

  /* Tooltips */
  --theme-tooltip-color: var(--theme-text-color-strong);
  --theme-tooltip-background: var(--theme-popup-background);
  --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);

  /* Doorhangers */
  /* These colors are based on the colors used for doorhangers elsewhere in
   * Firefox. */
  --theme-arrowpanel-background: var(--theme-popup-background);
  --theme-arrowpanel-color: var(--theme-popup-color);
  --theme-arrowpanel-border-color: var(--theme-popup-border-color);
  --theme-arrowpanel-separator: rgba(249,249,250,.1);
  --theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
  --theme-arrowpanel-dimmed-further: rgba(249,249,250,.15);
  --theme-arrowpanel-disabled-color: rgba(249,249,250,.5);
}

.theme-light {
  --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
  --bezier-grid-color: rgba(0, 0, 0, 0.05);

  /* Tooltips */
  --theme-tooltip-color: var(--theme-body-color);
  --theme-tooltip-background: rgb(255, 255, 255);
  --theme-tooltip-shadow: var(--grey-90-a10);

  /* Doorhangers */
  /* These colors are based on the colors used for doorhangers elsewhere in
   * Firefox. */
  --theme-arrowpanel-background: var(--theme-popup-background);
  --theme-arrowpanel-color: var(--theme-popup-color);
  --theme-arrowpanel-border-color: var(--theme-popup-border-color);
  --theme-arrowpanel-separator: ThreeDShadow;
  --theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
  --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
  --theme-arrowpanel-disabled-color: GrayText;
}

:root {
  --theme-arrowpanel-border-radius: 0px;
}
:root[platform="mac"] {
  --theme-arrowpanel-border-radius: 3.5px;
}

:root[platform="mac"].theme-light {
  --theme-arrowpanel-separator: hsla(210,4%,10%,.14);
}

strong {
  font-weight: bold;
}

/* Tooltip: CSS variables tooltip */

.devtools-tooltip-css-variable,
.devtools-tooltip-css-compatibility {
  color: var(--theme-body-color);
  padding: 2px;
  direction: ltr;
}

/* Tooltip: JS Evaluation Context */

#webconsole-input-evaluationsButton > .tooltip-panel {
  /* helps the JS Context selector to have scrollbars when content exceed the vertical size of the popup */
  overflow-y: auto;
}


/* Tooltip: Inactive CSS tooltip */

.devtools-tooltip-inactive-css,
.devtools-tooltip-css-compatibility {
  color: var(--theme-arrowpanel-color);
  margin: 0;
  padding: 10px 14px 12px 14px;
  font-size: 12px;
}

.devtools-tooltip-inactive-css,
.devtools-tooltip-css-compatibility,
.devtools-tooltip-inactive-css strong,
.devtools-tooltip-css-compatibility strong {
  user-select: text;
  -moz-user-focus: normal;
}

.devtools-tooltip-inactive-css p,
.devtools-tooltip-css-compatibility p {
  margin-block-start: 0;
  margin-block-end: calc(1em - 4px);
}

.devtools-tooltip-inactive-css p:last-child,
.devtools-tooltip-css-compatibility p:last-child {
  margin-block-end: 0;
}

.devtools-tooltip-inactive-css .link,
.devtools-tooltip-css-compatibility .link {
  color: var(--theme-highlight-blue);
  cursor: pointer;
}

/* Tooltip: Compatibility tooltip */

.tooltip-container[type="doorhanger"] .tooltip-panel ul.compatibility-unsupported-browser-list {
  width: 100%;
  list-style: none;
  padding: 0;
  column-gap: var(--compatibility-tooltip-base-unit);
  display: flex;
}

/* Tooltip: query container info */
.devtools-tooltip-query-container {
  color: var(--theme-arrowpanel-color);
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 12px;
  user-select: text;
  -moz-user-focus: normal;
}

.devtools-tooltip-query-container header {
  --block-end-space: 5px;
  border-block-end: 1px solid var(--theme-arrowpanel-dimmed);
  padding-block-end: var(--block-end-space);
  margin-block-end: var(--block-end-space);
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--theme-body-color);
}

.devtools-tooltip-query-container ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.devtools-tooltip-query-container .objectBox-node .tag-name {
  color: var(--theme-highlight-blue);
}

.devtools-tooltip-query-container .objectBox-node .attribute-name {
  color: var(--theme-highlight-red);
}

.devtools-tooltip-query-container .property-name {
  color: var(--theme-highlight-blue);
}

.devtools-tooltip-query-container .property-value {
  color: var(--theme-highlight-red);
}


/* Tooltip: Tiles */

.devtools-tooltip-tiles {
  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: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.tooltip-container {
  display: none;
  position: fixed;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  filter: drop-shadow(0 2px 8px var(--theme-tooltip-shadow));
}

.tooltip-xul-wrapper {
  appearance: none;
  background: transparent;
  overflow: visible;
  border-style: none;
}

.tooltip-xul-wrapper .tooltip-container {
  /**
   * As the width/height of xul:panel (.tooltip-xul-wrapper) is dependent on the
   * width/height of the inner content. Thus, if "absolute" position here, as the
   * width/height that are conveyed to the panel will be zero, the tooltip will be
   * invisible.
   */
  position: static;
}

.tooltip-top {
  flex-direction: column;
}

.tooltip-bottom {
  flex-direction: column-reverse;
}

.tooltip-panel{
  background-color: var(--theme-tooltip-background);
  pointer-events: all;
  flex-grow: 1;
}

.tooltip-visible {
  display: flex;
}

.tooltip-hidden {
  display: flex;
  visibility: hidden;
}

/* Tooltip : flexible height styles */

.tooltip-flexible-height .tooltip-panel {
  /* In flexible mode the tooltip panel should only grow according to its content. */
  flex-grow: 0;
}

.tooltip-flexible-height .tooltip-filler {
  /* In flexible mode the filler should grow as much as possible. */
  flex-grow: 1;
}

/* type="arrow" overrides: remove arrow decorations for the xul <panel> wrapper */

.tooltip-xul-wrapper[type="arrow"][side] {
  margin: 0;
}

/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */

/* The arrow content is styled on the HTML, so we don't need the styling on the XUL element */
.tooltip-xul-wrapper[type="arrow"]::part(content) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Tooltip : arrow style */

.tooltip-xul-wrapper .tooltip-container {
  /* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */
  filter: none;
}

.tooltip-container[type="arrow"] > .tooltip-panel {
  position: relative;
  min-height: 10px;
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--theme-arrowpanel-border-radius);
}

.tooltip-top[type="arrow"] .tooltip-panel {
  top: 0;
}

.tooltip-bottom[type="arrow"] .tooltip-panel {
  bottom: 0;
}

.tooltip-arrow {
  position: relative;
  height: 16px;
  width: 32px;
  overflow: hidden;
  flex-shrink: 0;
}

/* In RTL locales and context, only use RTL on the tooltip content, keep LTR for positioning */
.tooltip-container:-moz-locale-dir(rtl),
.tooltip-container:dir(rtl) {
  direction: ltr;
}

.tooltip-panel:-moz-locale-dir(rtl),
.tooltip-panel:dir(rtl) {
  direction: rtl;
}

.tooltip-top .tooltip-arrow {
  /**
   * The -1px margin is there to make sure the middle of the arrow overlaps with
   * the border of the tooltip container.
   * The -2px is there because the rotated arrow is not visually as tall as its
   * container. Since the positioning logic relies on measuring the size of the
   * tooltip, this -2px ensures the measured size matches the visuals (and not
   * simply the box model).
   */
  margin-bottom: -2px;
  margin-top: -1px;
}

.tooltip-bottom .tooltip-arrow {
  /* See comment in .tooltip-top .tooltip-arrow (inverted here) */
  margin-bottom: -1px;
  margin-top: -2px;
}

.tooltip-arrow:before {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  margin-left: 4px;
  background: linear-gradient(-45deg,
    var(--theme-tooltip-background) 50%, transparent 50%);
  border: 0 none;
  pointer-events: all;
}

.tooltip-bottom .tooltip-arrow:before {
  margin-top: 5px;
  transform: rotate(225deg);
}

.tooltip-top .tooltip-arrow:before {
  margin-top: -12px;
  transform: rotate(45deg);
}

/* XUL panels have a default border, but pure HTML tooltips don't have one. */
.tooltip-container[type="arrow"]:not(.tooltip-container-xul) > .tooltip-panel,
.tooltip-container[type="arrow"]:not(.tooltip-container-xul) > .tooltip-arrow::before {
  border: 1px solid var(--theme-arrowpanel-border-color);
}

/* Tooltip : doorhanger style */

.tooltip-container[type="doorhanger"] > .tooltip-panel {
  color: var(--theme-arrowpanel-color);
  margin: 0;
  padding: 0;
  max-width: 320px;
}

.tooltip-container[type="doorhanger"] > .tooltip-panel,
.tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
  background: var(--theme-arrowpanel-background);
  border: 1px solid var(--theme-arrowpanel-border-color);
  border-radius: var(--theme-arrowpanel-border-radius);
  box-shadow: 0 0 4px hsla(210,4%,10%,.2);
}

:root[platform="mac"] .tooltip-container[type="doorhanger"] > .tooltip-panel,
:root[platform="mac"] .tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
  box-shadow: none;
  /*
   * The above should be:
   *
   *   box-shadow: 0 0 0 1px var(--theme-arrowpanel-border-color);
   *
   * but although that gives the right emphasis to the border it makes the
   * platform shadow much too dark.
   */
}

:root[platform="mac"].theme-light .tooltip-container[type="doorhanger"] > .tooltip-panel,
:root[platform="mac"].theme-light .tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
  border: none;
}

.tooltip-container[type="doorhanger"] > .tooltip-arrow {
  /* Desired width of the arrow */
  --arrow-width: 20px;

  /* Amount of room to allow for the shadow. Should be about half the radius. */
  --shadow-radius: 4px;
  --shadow-margin: calc(var(--shadow-radius) / 2);

  /*
   * Crop the arrow region to show half the arrow plus allow room for margins.
   *
   * The ARROW_WIDTH in HTMLTooltip.js needs to match the following value.
   */
  width: calc(var(--arrow-width) + 2 * var(--shadow-margin));
  height: calc(var(--arrow-width) / 2 + var(--shadow-margin));

  /**
   * The rotated box slightly overlaps the left edge of the arrow container.
   * This means the arrow is not centered in its own box by default.
   */
  padding-left: 1px;
}

.tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
  /* Make sure the border is included in the size */
  box-sizing: border-box;

  /* Don't inherit any rounded corners. */
  border-radius: 0;

  /*
   * When the box is rotated, it should have width <arrow-width>.
   * That makes the length of one side of the box equal to:
   *
   *    (<arrow-width> / 2) / sin 45
   */
  --sin-45: 0.707106781;
  --square-side: calc(var(--arrow-width) / 2 / var(--sin-45));
  width: var(--square-side);
  height: var(--square-side);

  /*
   * The rotated square will overshoot the left side
   * and need to be shifted in by:
   *
   *   (<arrow-width> - square side) / 2
   *
   * But we also want to shift it in so that the box-shadow
   * is not clipped when we clip the parent so we add
   * a suitable margin for that.
   */
  --overhang: calc((var(--arrow-width) - var(--square-side)) / 2);
  margin-left: calc(var(--overhang) + var(--shadow-margin));
}

.tooltip-container[type="doorhanger"] .menu-standard-padding {
  margin: 0;
  padding: 6px 0;
}

.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-arrow {
  /* Overlap the arrow with the 1px border of the doorhanger */
  margin-top: -1px;
}

.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-arrow {
  /* Overlap the arrow with the 1px border of the doorhanger */
  margin-bottom: -1px;
}

.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-arrow::before {
  /* Show only the bottom half of the box */
  margin-top: calc(var(--square-side) / -2);
}

.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-arrow::before {
  /* Shift the rotated box in so that it is not clipped */
  margin-top: calc(var(--overhang) + var(--shadow-margin));
}

.tooltip-container[type="doorhanger"] .tooltip-panel ul {
  /* Override the display: flex declaration in xul.css
   * or else menu items won't stack. */
  display: block;
}

.tooltip-container[type="doorhanger"] .menuitem > .command {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 4px 12px;
  outline: none;
  /*
   * It doesn't really make sense, since if this is just about making the items
   * easier to click we should be using min-width instead.
   */
  margin-inline-end: 15px;
}

.tooltip-container[type="doorhanger"] .menuitem > button.command:is([role="menuitem"],[role="menuitemcheckbox"],[role="link"]) {
  appearance: none;
  border: none;
  color: var(--theme-arrowpanel-color);
  background-color: transparent;
  text-align: start;
  width: 100%;
}

.tooltip-container[type="doorhanger"] .menuitem > .command:not([disabled],[open],:active):is(:hover,:focus) {
  background-color: var(--theme-arrowpanel-dimmed);
}

.tooltip-container[type="doorhanger"] .menuitem > .command:-moz-focusring::-moz-focus-inner {
  border-color: transparent;
}

.tooltip-container[type="doorhanger"] .menuitem > .command:not([disabled]):is([open],:hover:active) {
  background-color: var(--theme-arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}

.tooltip-container[type="doorhanger"] .menuitem > .command[disabled] {
  opacity: 0.5;
}

.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"] {
  list-style-image: none;
  -moz-context-properties: fill;
  fill: currentColor;
  background: url(chrome://devtools/skin/images/check.svg) no-repeat transparent;
  background-position: 7px center;
}

.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"]:-moz-locale-dir(rtl),
.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"]:dir(rtl) {
  background-position-x: right 7px;
}

.tooltip-container[type="doorhanger"] .menuitem > .command > .label {
  flex: 1;
  font: menu;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tooltip-container[type="doorhanger"] .checkbox-container .menuitem > .command > .label {
  padding-inline-start: 16px;
}

.menu-button--iconic::before,
.tooltip-container[type="doorhanger"] .menuitem > .command.iconic > .label::before {
  content: " ";
  display: inline-block;
  margin-inline-end: 8px;
  width: 16px;
  height: 16px;
  /* Better optical alignment than with 'vertical-align: middle'.
     Works well with font sizes between 12px and 16px. */
  vertical-align: -3px;
  -moz-context-properties: fill;
  fill: currentColor;
  background-image: var(--menuitem-icon-image);
  background-size: contain;
  background-repeat: no-repeat;
  /*
   * The icons in the sidebar menu have opacity: 0.8 here, but those in the
   * hamburger menu don't. For now we match the hamburger menu styling,
   * especially because the 80% opacity makes the icons look dull in dark mode.
   */
}

.tooltip-container[type="doorhanger"] .menuitem > .command > .accelerator {
  margin-inline-start: 10px;
  color: var(--theme-arrowpanel-disabled-color);
  font: message-box;
}

.tooltip-container[type="doorhanger"] hr {
  display: block;
  border: none;
  border-top: 1px solid var(--theme-arrowpanel-separator);
  margin: 6px 0;
  padding: 0;
}

.tooltip-container[type="doorhanger"] [role="menuseparator"] {
  border: none;
  border-bottom: 1px solid #cacdd3;
  width: 100%;
  height: 2px;
  display: block;
  background: none;
  pointer-events: none;
}

/* Tooltip: Events */

.devtools-tooltip-events-container {
  border-radius: var(--theme-arrowpanel-border-radius);
  height: 100%;
  overflow-y: auto;
}

@media (-moz-overlay-scrollbars) {
  .devtools-tooltip-events-container {
    padding-inline: calc(env(scrollbar-inline-size) / 2);
  }
}

.devtools-tooltip-events-container .event-header {
  display: flex;
  align-items: center;
  box-sizing: content-box;
  height: 24px;
  padding: 0 4px;
  border-top: 1px solid var(--theme-splitter-color);
  cursor: pointer;
  overflow: hidden;
  color: var(--theme-tooltip-color);
  background-color: var(--theme-tooltip-background);
}

.devtools-tooltip-events-container .event-header:first-child {
  border-top-width: 0;
}

.event-header .theme-twisty {
  flex: none;
  width: 12px;
  height: 12px;
  margin-inline-end: 4px;
  fill: currentColor;
}

.event-header.content-expanded .theme-twisty {
  transform: none;
}

.event-tooltip-listener-toggle-checkbox {
  flex-shrink: 0;
}

.event-tooltip-debugger-icon {
  -moz-context-properties: stroke;
  stroke: var(--theme-icon-color);
  background-image: url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  margin-inline-end: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.event-tooltip-debugger-icon:hover {
  background-color: var(--toolbarbutton-hover-background);
}

.event-tooltip-event-type,
.event-tooltip-filename,
.event-tooltip-attributes {
  margin-inline-start: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.event-tooltip-event-type {
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
}

.event-tooltip-filename {
  margin: 0 5px;
  font-size: 100%;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Force ellipsis to be displayed on the left */
  direction: rtl;
}

.event-tooltip-content-box {
  display: none;
  height: 100px;
  overflow: hidden;
  margin-inline-end: 0;
  border: 1px solid var(--theme-splitter-color);
  border-width: 1px 0 0 0;
}

.event-toolbox-content-box iframe {
  height: 100%;
  border-style: none;
}

.event-tooltip-content-box[open] {
  display: block;
}

.event-tooltip-source-container {
  margin-top: 5px;
  margin-bottom: 10px;
  margin-inline-start: 5px;
  margin-inline-end: 0;
}

.event-tooltip-source {
  margin-bottom: 0;
}

.event-tooltip-attributes-container {
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  justify-content: flex-end;
}

.event-tooltip-attributes-box {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 14px;
  border-radius: 3px;
  padding: 1px 3px;
  margin-inline-start: 4px;
  background-color: var(--theme-text-color-alt);
  color: var(--theme-body-background);
}

.event-tooltip-attributes {
  margin: 0;
  font-size: 9px;
  line-height: 14px;
}

.event-tooltip-editor-frame {
  border-style: none;
  height: 100%;
  width: 100%;
}

/* Tooltip: HTML Search */

#searchbox-panel-listbox {
  width: 250px;
  max-width: 250px;
  overflow-x: hidden;
}

#searchbox-panel-listbox .autocomplete-item,
#searchbox-panel-listbox .autocomplete-item[selected] {
  overflow-x: hidden;
}

/* Tooltip: Image tooltip */

/*
 * Overview of the Image Tooltip layout.
 *
 * ┌─────────────────────────────────────────┐
 * │ .devtools-tooltip-image-container       │
 * │ ┌─────────────────────────────────────┐ │
 * │ │ .devtools-tooltip-image-wrapper     │ │
 * │ │ ┌─────────────────────────────────┐ │ │
 * │ │ │ .devtools-tooltip-image         │ │ │
 * │ │ │ (the actual image tag)          │ │ │
 * │ │ └─────────────────────────────────┘ │ │
 * │ └─────────────────────────────────────┘ │
 * │ ┌─────────────────────────────────────┐ │
 * │ │ .devtools-tooltip-image-dimensions  │ │
 * │ └─────────────────────────────────────┘ │
 * └─────────────────────────────────────────┘
 *
 */

.devtools-tooltip-image-container {
  /* Saved as variables to be synchronized easily with ImageTooltipHelper.js */
  --image-tooltip-image-padding: 4px;
  --image-tooltip-label-height: 20px;

  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 100px;
  text-align: center;
}

.devtools-tooltip-image-wrapper {
  align-items: center;
  display: flex;
  flex: 1;
  padding: var(--image-tooltip-image-padding);
  justify-content: center;
  min-height: 1px
}

.devtools-tooltip-image {
  max-height: 100%;
}

.devtools-tooltip-image-dimensions {
  height: var(--image-tooltip-label-height);
  text-align: center;
}

.devtools-tooltip-image-broken {
  box-sizing: border-box;
  height: 100%;
  padding: 7px;
}

/* Tooltip: Invoke getter confirm Tooltip */

.invoke-confirm {
  color: var(--theme-popup-color);
  border: 1px solid rgba(0,0,0, 0.1);
  max-width: 212px;
}

.invoke-confirm .close-confirm-dialog-button::before {
  background-image: url("chrome://devtools/skin/images/close.svg");
}

.invoke-confirm .confirm-label {
  margin: 0;
  padding: 4px;
  background-color: var(--theme-toolbar-background-alt);
  display: flex;
  align-items: start;
}

.invoke-confirm .confirm-label p {
  margin: 0;
  padding: 0;
  flex-grow: 1;
  hyphens: auto;
}

.invoke-confirm .emphasized {
  font-family: var(--monospace-font-family);
  font-weight: bold;
  overflow-wrap: break-word;
}

.invoke-confirm .close-confirm-dialog-button {
  padding: 0;
  margin: 0;
  flex-grow: 0;
}

.invoke-confirm .confirm-button {
  background-color: var(--theme-selection-background);
  color: white;
  border: none;
  padding: 6px;
  display: block;
  width: 100%;
  text-align: left;
}

/* The button already has a "selected" style, we can remove the focus rings. */
.confirm-button:-moz-focusring,
.confirm-button::-moz-focus-inner {
  outline: none;
  border: none;
}

.invoke-confirm .learn-more-link {
  color: var(--theme-highlight-blue);
  padding-inline-end: 4px;
  display: flex;
  align-items: center;
  justify-content: end;
  min-height: 20px;
  cursor: pointer;
}

.invoke-confirm .learn-more-link::after {
  content: "";
  width: 14px;
  height: 14px;
  fill: currentColor;
  -moz-context-properties: fill;
  background-image: url(chrome://devtools/skin/images/help.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-inline-start: 4px;
}

/* Tooltip: Rule Preview */

.rule-preview-tooltip-container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  color: var(--theme-body-color);
  padding: 5px;
}

.rule-preview-tooltip-message {
  white-space: pre-wrap;
}

.rule-preview-tooltip-source-rule-footer {
  align-self: center;
  border-top: 1px solid var(--theme-body-color);
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  padding: 3px;
}