@tailwind base;
@tailwind components;
@tailwind utilities;

/* Toolbox */
#navigator-toolbox-background {
  background-color: var(--frame, --frame-inactive);
}

#navigator-toolbox {
  background-image: var(--theme-frame, var(--additional-backgrounds));
  background-position: var(--additional-backgrounds-alignment, right top);
  background-repeat: var(--additional-backgrounds-tiling, no-repeat);
  background-size: auto;
  border-bottom: 1px solid var(--toolbar-bottom-separator, rgba(0, 0, 0, 0.3));
}

#browser-toolbar {
  border-top: 1px solid var(--toolbar-top-separator, rgba(0, 0, 0, 0.3));
}

#tabs {
  -webkit-app-region: drag;
  app-region: drag;
}

/* Tabs */
#tab-background,
#opentab {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

#tab-background:not([data-active="true"]) {
  color: var(--tab-background-text);
}

#tab-background:not([data-active="true"]):hover {
  background-color: color-mix(in srgb, currentColor 11%, transparent);
}

#tab-background[data-active="true"] {
  color: var(
    --tab-text,
    var(--bookmark-text, var(--tab-background-text, var(--toolbar-text)))
  );
  outline-style: solid;
  outline-width: 1px;
  outline-color: var(--tab-line, currentColor);
  background-image: linear-gradient(
      var(--tab-selected, transparent),
      var(--tab-selected, transparent)
    ),
    linear-gradient(
      var(--toolbar, rgba(255, 255, 255, 0.4)),
      var(--toolbar, rgba(255, 255, 255, 0.4))
    );
}

.close-icon:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

#tab-throbber {
  background-color: var(
    --tab-loading,
    var(--tab-text, var(--bookmark-text, var(--tab-background-text)))
  );
  -webkit-mask-image: url("/icons/loading.svg");
  mask-image: url("/icons/loading.svg");
  animation: tab-throbber-animation 2s steps(60) infinite;
}

@keyframes tab-throbber-animation {
  100% {
    transform: translateX(-960px);
  }
}

/* Toolbar */
#browser-toolbar,
#PersonalToolbar {
  background-color: var(--toolbar, rgba(255, 255, 255, 0.4));
}

#urlbar {
  color: var(--toolbar-field-text);
  background-color: var(--toolbar-field, rgba(255, 255, 255, 0.8));
  border: 1px solid var(--toolbar-field-border, transparent);
}

/* FIXME: Likely needs JS */
#urlbarL:has(input:active) {
  border: 1px solid var(--toolbar-field-border-focus, transparent);
}

/* FIXME: Likely needs JS */
#urlbarL:has(input:active) {
  background-color: 1px solid var(--toolbar-field-focus, transparent);
}

/* FIXME: Likely needs JS */
#urlbarL:has(input:active) {
  color: 1px solid var(--toolbar-field-focus-text, transparent);
}

#urlbar input::placeholder {
  color: currentColor;
  opacity: 0.69;
}

#urlbar input::selection {
  color: var(--toolbar-field-highlight-text, currentColor);
  background-color: var(--toolbar-field-highlight, rgba(0, 128, 255, 0.5));
}

.toolbarbutton-1 {
  color: var(
    --icons,
    var(--bookmark-text, var(--toolbar-text, var(--tab-background-text)))
  );
}

.toolbarbutton-1:hover {
  background-color: var(
    --button-background-hover,
    color-mix(in srgb, currentColor 17%, transparent)
  );
}

.toolbarbutton-1:active {
  background-color: var(
    --button-background-active,
    color-mix(in srgb, currentColor 17%, transparent)
  );
}

/* Popups */
.popup {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 14px 0px;
  background-color: var(--popup, #2b2a33);
  border-color: var(--popup-border, #b5b5b5);
  color: var(--popup-text, #fbfbfe);
}

.popup hr {
  border-color: var(--popup-border, #b5b5b5);
}

.popup .popup-button:hover {
  background-color: var(
    --button-background-hover,
    color-mix(in srgb, currentColor 17%, transparent)
  );
}

.popup .popup-button[data-disabled="true"] {
  color: color-mix(in srgb, var(--popup-text, white) 40%, transparent);
}

.popup .popup-button[data-disabled="true"]:hover {
  background-color: transparent;
}

/* New tab page */
#ntp {
  color: var(--ntp-text, white);
  background-color: var(--ntp-background, #2b2a33);
}

#ntp input {
  background-color: rgba(255, 255, 255, 0.2);
}

#ntp #logo {
  background-color: currentColor;
  -webkit-mask: url(/icons/velocity.svg) no-repeat center;
  mask: url(/icons/velocity.svg) no-repeat center;
}
