/*
 * Catppuccin Mocha theme for Vimium UI
 * Palette: base #1e1e2e, mantle #181825, surface0 #313244, surface1 #45475a, overlay0 #6c7086, text #cdd6f4, mauve #cba6f7, pink #f5c2e7, teal #94e2d5, sapphire #74c7ec, yellow #f9e2af
 * Usage: Vimium Options -> "Custom CSS for Vimium UI" -> paste this file.
 * Covers: link hints, Vomnibar, HUD, find-mode selection.
 */

:root {
  --vm-bg: #1e1e2e;
  --vm-surface: #313244;
  --vm-border: #45475a;
  --vm-text: #cdd6f4;
  --vm-text-muted: #6c7086;
  --vm-accent: #cba6f7;
  --vm-url: #74c7ec;
  --vm-hint-bg: #f5c2e7;
  --vm-hint-border: #cba6f7;
  --vm-hint-text: #1e1e2e;
  --vm-hint-match: #f9e2af;
  --vm-selection-bg: rgba(88, 91, 112, 0.42);
}

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

div.internal-vimium-hint-marker,
div.internal-vimium-hint-marker.vimiumHintMarker,
div > .vimiumHintMarker {
  position: absolute;
  display: block;
  top: -1px;
  left: -1px;
  white-space: nowrap;
  overflow: hidden;
  padding: 2px 6px 1px;
  font-size: 11px;
  line-height: 1.25;
  border: 1px solid var(--vm-hint-border) !important;
  border-radius: 6px;
  background: var(--vm-hint-bg) !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  z-index: 2147483647;
}

div.internal-vimium-hint-marker span,
div.internal-vimium-hint-marker.vimiumHintMarker span,
div > .vimiumHintMarker span {
  color: var(--vm-hint-text) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-shadow: none !important;
}

div.internal-vimium-hint-marker > .matchingCharacter,
div.internal-vimium-hint-marker.vimiumHintMarker > .matchingCharacter,
div > .vimiumHintMarker > .matchingCharacter {
  color: var(--vm-hint-match) !important;
}

div > .vimiumActiveHintMarker,
div.internal-vimium-hint-marker.vimiumActiveHintMarker,
div.internal-vimium-hint-marker.vimiumHintMarker.vimiumActiveHintMarker {
  border-color: var(--vm-accent) !important;
  box-shadow: 0 0 0 1px var(--vm-accent) !important;
}

div > .vimiumActiveHintMarker span,
div.internal-vimium-hint-marker.vimiumActiveHintMarker span,
div.internal-vimium-hint-marker.vimiumHintMarker.vimiumActiveHintMarker span {
  color: var(--vm-hint-text) !important;
}

div.internal-vimium-input-hint {
  position: absolute;
  display: block;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--vm-hint-border);
  border-radius: 6px;
  pointer-events: none;
}

div.internal-vimium-selected-input-hint {
  box-shadow: inset 0 0 0 2px var(--vm-accent), 0 0 0 1px var(--vm-accent);
}

div.internal-vimium-selected-input-hint span {
  color: var(--vm-text) !important;
}

div.vimium-highlighted-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 4px solid var(--vm-accent);
  box-sizing: border-box;
  pointer-events: none;
}

iframe.vomnibar-frame,
iframe.vimium-hud-frame {
  color-scheme: dark;
}

#vomnibar {
  position: fixed;
  width: calc(100% - 20px);
  top: 8px;
  left: 8px;
  background: var(--vm-bg);
  color: var(--vm-text);
  border: 1px solid var(--vm-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-align: left;
}

#vomnibar-search-area {
  display: block;
  padding: 10px;
  background: var(--vm-surface);
  border-bottom: 1px solid var(--vm-border);
  border-radius: 12px 12px 0 0;
}

#vomnibar input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--vm-border);
  border-radius: 8px;
  background: var(--vm-bg);
  color: var(--vm-text);
  box-shadow: none;
  outline: none;
}

#vomnibar input::selection,
body.vimium-find-mode ::selection {
  background: var(--vm-selection-bg);
  color: var(--vm-text);
}

#vomnibar ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--vm-bg);
  border-radius: 0 0 12px 12px;
}

#vomnibar li {
  position: relative;
  display: list-item;
  margin: 0;
  padding: 9px 10px;
  color: var(--vm-text);
  background: var(--vm-bg);
  border-bottom: 1px solid var(--vm-border);
}

#vomnibar li:last-of-type {
  border-bottom: none;
}

#vomnibar li.selected {
  background: var(--vm-selection-bg);
}

#vomnibar li .top-half,
#vomnibar li .bottom-half {
  display: block;
  overflow: hidden;
}

#vomnibar li .bottom-half {
  margin-top: 4px;
  color: var(--vm-text-muted);
}

#vomnibar li .source,
#vomnibar li .relevancy {
  color: var(--vm-text-muted);
}

#vomnibar li .relevancy {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  font-family: monospace;
}

#vomnibar li .url {
  color: var(--vm-url);
}

#vomnibar li .match,
#vomnibar li em .match,
#vomnibar li .title .match {
  color: var(--vm-accent);
  font-weight: 700;
}

#vomnibar li em,
#vomnibar li .title {
  color: var(--vm-text);
}

#hud-container {
  display: block;
  position: fixed;
  width: calc(100% - 20px);
  bottom: 8px;
  left: 8px;
  background: var(--vm-surface);
  color: var(--vm-text);
  border: 1px solid var(--vm-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-align: left;
}

#search-area {
  display: block;
  padding: 4px;
  color: var(--vm-text);
  border-radius: 10px 10px 0 0;
}

#hud {
  width: 100%;
  box-sizing: border-box;
  min-height: 30px;
  padding: 4px 6px;
  line-height: 20px;
  color: var(--vm-text);
}

#hud.hud-find {
  background: var(--vm-bg);
  border: 1px solid var(--vm-border);
  border-radius: 8px;
}

span#hud-find-input,
span#hud-match-count {
  display: inline;
  white-space: nowrap;
  overflow-y: hidden;
  outline: none;
}

span#hud-find-input:before {
  content: "/";
  color: var(--vm-accent);
}

span#hud-match-count {
  color: var(--vm-text-muted);
}

span#hud-find-input br {
  display: none;
}

span#hud-find-input * {
  display: inline;
  white-space: nowrap;
}

div.vimium-flash {
  box-shadow: 0 0 0 1px var(--vm-accent);
  padding: 1px;
  background-color: transparent;
  position: absolute;
  z-index: 2147483647;
}

.no-insert-text {
  visibility: hidden;
}