/* 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 url("chrome://global/skin/design-system/toolbar.css");

:root {
  &:where([customtitlebar]) {
    --toolbox-bgcolor: ActiveCaption;
    --toolbox-textcolor: CaptionText;
    --toolbox-bgcolor-inactive: InactiveCaption;
    --toolbox-textcolor-inactive: InactiveCaptionText;
  }

  --sidebar-background-color: -moz-sidebar;
  --sidebar-text-color: -moz-sidebartext;
  --sidebar-border-color: -moz-sidebarborder;

  --tabs-navbar-separator-color: ThreeDShadow;
  --tabs-navbar-separator-style: solid;

  --short-notification-background: #0250bb;
  --short-notification-gradient: #9059ff;
  --warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f);

  --urlbar-box-bgcolor: var(--button-background-color-hover);
  --urlbar-box-focus-bgcolor: var(--button-background-color);
  --urlbar-box-hover-bgcolor: var(--button-background-color-hover);
  --urlbar-box-active-bgcolor: var(--button-background-color-active);
  --urlbar-box-text-color: inherit;
  --urlbar-box-hover-text-color: var(--urlbar-box-text-color);
  --urlbar-icon-fill-opacity: 0.9;
  @media (prefers-contrast) {
    --urlbar-icon-fill-opacity: 1;
    --sidebar-border-color: var(--card-border-color);
  }

  --content-area-shadow: var(--card-box-shadow);
  --chrome-content-separator-color: var(--card-border-color);

  /* stylelint-disable-next-line media-query-no-invalid */
  @media not -moz-pref("sidebar.revamp") {
    &:not([lwtheme]) {
      --chrome-content-separator-color: ThreeDShadow;
    }
  }

  &[lwtheme] {
    --link-color: light-dark(var(--color-blue-60), var(--color-cyan-30));
    --link-color-hover: light-dark(var(--color-blue-70), var(--color-cyan-20));
    --link-color-active: light-dark(var(--color-blue-80), var(--color-cyan-10));
    --tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
    --color-accent-attention: light-dark(#2ac3a2, #54ffbd);

    @media not (prefers-contrast) {
      --focus-outline-color: light-dark(#0061e0, #00ddff);
    }
  }

  @media (prefers-color-scheme: dark) {
    /* Increase the contrast of urlbar boxes in dark mode.
       In practice these are bumped-up --button(-hover)-bgcolor rules */
    --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
    --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
    --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent);
  }
}

/**
 * We intentionally do not use the custom colors on linux or macOS with system
 * theme enabled, instead choosing to fall back to system colors and
 * transparencies in order to look more native.
 */
@media not ((forced-colors) or (-moz-native-theme)) {
  :root:not([lwtheme]) {
    --color-accent-primary: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
    --button-text-color-primary: light-dark(rgb(251, 251, 254), rgb(43, 42, 51));
    --button-background-color: light-dark(rgba(207, 207, 216, 0.33), rgba(0, 0, 0, 0.33));
    --button-background-color-hover: light-dark(rgba(207, 207, 216, 0.66), rgba(207, 207, 216, 0.2));
    --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, 0.4));
    --button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));

    --arrowpanel-background: light-dark(white, rgb(66, 65, 77));
    --arrowpanel-color: light-dark(black, rgb(251, 251, 254));
    --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));

    --arrowpanel-dimmed: light-dark(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 17%, transparent));
    --arrowpanel-dimmed-further: light-dark(color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, currentColor 14%, transparent));

    --input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
    --input-bgcolor: light-dark(rgb(255, 255, 255), #42414d);

    --tab-selected-bgcolor: light-dark(rgb(255, 255, 255), rgba(106, 106, 120, 0.7));
    --tab-selected-textcolor: light-dark(rgb(21, 20, 26), rgb(255, 255, 255));
    --tabs-navbar-separator-style: none;

    &:where([customtitlebar]) {
      --toolbox-bgcolor-inactive: light-dark(rgb(235, 235, 239), rgb(31, 30, 37));
    }

    --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
    --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
    --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43, 42, 51));
    --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
    --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));

    --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77));
    --urlbar-icon-fill-opacity: 0.72;
    @media (prefers-color-scheme: dark) {
      --urlbar-icon-fill-opacity: 1;
    }

    /* stylelint-disable-next-line media-query-no-invalid */
    @media not -moz-pref("sidebar.revamp") {
      --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%));
    }

    --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
    --color-accent-attention: light-dark(#2ac3a2, #54ffbd);

    --sidebar-background-color: light-dark(white, rgb(28, 27, 34));
    --sidebar-text-color: light-dark(rgb(21, 20, 26), rgb(249, 249, 250));
    --sidebar-border-color: var(--card-border-color);
  }
}