/*
 * Many CSS class names in this file use the verbose "vimium-" as the class name. This is so we
 * don't use the same CSS class names that the page is using, so the page's CSS doesn't mess with
 * the style of our Vimium dialogs.
 *
 * We use the maximum z-index value for all Vimium elements to guarantee that they always appear on
 * top. Chrome supports z-index values up to 2,147,483,647 (= 2^31 - 1). We utilize the maximum
 * z-index value allowable to ensure Vimium elements have precedence over all other page elements.
 */

/*
 * This vimium-reset class can be added to any of our UI elements to give it a clean slate. This is
 * useful in case the page has declared a broad rule like "a { padding: 50px; }" which will mess up
 * our UI. These declarations contain more specifiers than necessary to increase their specificity
 * (precedence).
 */

:root {
  --vimium-background-color: white;
  --vimium-background-text-color: black;
  --vimium-foreground-color: white;
  --vimium-foreground-text-color: black;
  --vimium-link-color: blue;
}

.vimium-reset,
div.vimium-reset,
span.vimium-reset,
table.vimium-reset,
a.vimium-reset,
a:visited.vimium-reset,
a:link.vimium-reset,
a:hover.vimium-reset,
td.vimium-reset,
tr.vimium-reset {
  background: none;
  border: none;
  bottom: auto;
  box-shadow: none;
  color: black;
  cursor: auto;
  display: inline;
  float: none;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: inherit;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: auto;
  left: auto;
  letter-spacing: 0;
  line-height: 100%;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  padding: 0;
  position: static;
  right: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  top: auto;
  vertical-align: baseline;
  white-space: normal;
  width: auto;
  z-index: 2147483647;
}

thead.vimium-reset, tbody.vimium-reset {
  display: table-header-group;
}

tbody.vimium-reset {
  display: table-row-group;
}

/*
 * Linkhints CSS
 */

/* Prior to 2025, we used camel case for all CSS selectors. We're preserving some camel case class
 * names here in link hints for backwards compatibility, because they're user-customizable via the
 * userDefinedLinkHintCss setting.
 *
 * Our default example value for userDefinedLinkHintCss refers to the "vimiumHintMarker" and
 * "matchingCharacter" classes. We'll assume these are user-facing and should not be changed:
 *   - vimiumHintMarker
 *   - matchingCharacter
 *   - vimiumActiveHintMarker
 *
 * Note that link hint elements have both internal-vimium-hint-marker and vimiumHintMarker classes.
 * Presumably the "internal-" classes were meant to contain non-user-facing styles, and
 * vimiumHintMarker was meant to be an empty vessel for users to attach their own styles to.
 */

div#vimium-hint-marker-container {
  pointer-events: none;
}

div.internal-vimium-hint-marker {
  position: absolute;
  display: block;
  top: -1px;
  left: -1px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 11px;
  padding: 1px 3px 0px 3px;
  background: linear-gradient(to bottom, #fff785 0%, #ffc542 100%);
  border: solid 1px #c38a22;
  border-radius: 3px;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.3);
  z-index: 2147483647;
}

div.internal-vimium-hint-marker span {
  color: #302505;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

div.internal-vimium-hint-marker > .matchingCharacter {
  color: #d4ac3a;
}

div > .vimiumActiveHintMarker span {
  color: #a07555 !important;
}

/* Input hints CSS */

div.internal-vimium-input-hint {
  position: absolute;
  display: block;
  background-color: rgba(255, 247, 133, 0.3);
  border: solid 1px #c38a22;
  pointer-events: none;
}

div.internal-vimium-selected-input-hint {
  background-color: rgba(255, 102, 102, 0.3);
  border: solid 1px #993333 !important;
}

div.internal-vimium-selected-input-hint span {
  color: white !important;
}

div.vimium-highlighted-frame {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  border: 5px solid yellow;
  box-sizing: border-box;
  pointer-events: none;
}

iframe.vimium-help-dialog-frame {
  background-color: rgba(10, 10, 10, 0.6);
  padding: 0px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  border: none;
  z-index: 2147483647;
}

iframe.vimium-hud-frame {
  background-color: transparent;
  padding: 0px;
  overflow: hidden;
  display: block;
  position: fixed;
  width: 20%;
  min-width: 350px;
  height: 58px;
  bottom: -14px;
  right: 20px;
  margin: 0 0 0 -40%;
  border: none;
  z-index: 2147483647;
  opacity: 0;
}

body.vimium-find-mode ::selection {
  background: #ff9632;
}

iframe.vomnibar-frame {
  background-color: transparent;
  padding: 0px;
  overflow: hidden;

  display: block;
  position: fixed;
  width: calc(80% + 20px); /* same adjustment as in pages/vomnibar_page.js */
  min-width: 400px;
  height: calc(100% - 70px);
  top: 70px;
  left: 50%;
  /* TODO(philc): Why are we doing this negative margin, rather than just using right: 20% ? */
  margin: 0 0 0 -40%;
  border: none;
  font-family: sans-serif;
  z-index: 2147483647;
}

div.vimium-flash {
  box-shadow: 0px 0px 4px 2px #4183c4;
  padding: 1px;
  background-color: transparent;
  position: absolute;
  z-index: 2147483647;
}

/* UIComponent CSS */
iframe.vimium-ui-component-hidden {
  display: none;
}

iframe.vimium-ui-component-visible {
  display: block;
  color-scheme: light dark;
}

iframe.vimium-non-clickable {
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vimium-background-color: #1d1d1f;
    --vimium-background-text-color: #e3e3e3;
    --vimium-foreground-color: #292a2d;
    --vimium-foreground-text-color: #e8eaed;
    --vimium-link-color: #8ab4f8;
  }

  /* DarkReader is a popular dark mode browser extension. It can apply an invert filter to the whole
   * page to make the page dark, when used in Filter and Filter+ modes. We want to reverse/invert
   * that filter again for Vimium's UI elements, because Vimium is already dark mode aware. */
  iframe.vimium-reverse-dark-reader-filter {
    -webkit-filter: invert(100%) hue-rotate(180deg) !important;
    filter: invert(100%) hue-rotate(180deg) !important;
  }

  /* Dark mode CSS for options page and exclusions */

  body.vimium-body {
    background-color: var(--vimium-background-color);
    color: var(--vimium-background-text-color);
  }

  body.vimium-body a,
  body.vimium-body a:visited {
    color: var(--vimium-link-color);
  }

  body.vimium-body textarea,
  body.vimium-body input {
    background-color: var(--vimium-foreground-color);
    border-color: var(--vimium-foreground-color);
    color: var(--vimium-foreground-text-color);
  }

  body.vimium-body div.example {
    color: #8a9096;
  }
}