%if 0
/* 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/. */
%endif

%filter substitution

#identity-box {
  padding-inline: @identityBoxPaddingInline@;
  margin-inline-end: @identityBoxMarginInlineEnd@;
}

#identity-box,
#tracking-protection-icon-container {
  /* Set default fill for icons in the identity block.
     Individual icons can override this. */
  fill: currentColor;
  fill-opacity: .6;
}

/* The tracking protection icon will be hidden if it is a chrome page. There
   will be only the brand icon in the url bar. So, we need to change the padding
   start for proper positing the icon. */
#identity-box[pageproxystate="valid"].chromeUI {
  padding-inline-start: 8px;
}

#urlbar.searchButton > #urlbar-input-container > #identity-box[pageproxystate="invalid"],
#identity-box[pageproxystate="invalid"] > #permissions-granted-icon,
#identity-box[pageproxystate="invalid"] > #blocked-permissions-container,
#identity-box[pageproxystate="invalid"] > #notification-popup-box,
#identity-box[pageproxystate="invalid"] > #identity-icon-label,
#identity-box[pageproxystate="invalid"] > #remote-control-icon {
  display: none;
}

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] {
  pointer-events: none;
  -moz-user-focus: ignore;
}

#identity-box:hover:not(.no-hover, [open=true]),
#tracking-protection-icon-container:hover:not([open=true]) {
  background-color: hsla(0,0%,70%,.2);
  fill-opacity: .8;
}

#identity-box:hover:active:not(.no-hover),
#identity-box[open=true],
#tracking-protection-icon-container:hover:active,
#tracking-protection-icon-container[open=true] {
  background-color: hsla(0,0%,70%,.3);
  fill-opacity: .8;
}

#identity-box:not(:active):-moz-focusring,
#tracking-protection-icon-container:not(:active):-moz-focusring {
  outline: var(--toolbarbutton-focus-outline);
  outline-offset: -2px;
  -moz-outline-radius: var(--toolbarbutton-border-radius);
}

#identity-box[pageproxystate="valid"].chromeUI > #identity-icon-label,
.urlbar-label {
  opacity: .6;
}

#identity-icon-label {
  padding-inline-start: 4px;
}
#identity-box:not(.chromeUI, .extensionPage, .notSecureText) {
  --urlbar-separator-color: transparent;
}

#identity-box[pageproxystate="valid"].notSecureText,
#identity-box[pageproxystate="valid"].chromeUI,
#identity-box[pageproxystate="valid"].extensionPage,
#urlbar-label-box {
  margin-inline-end: 8px;
  border-inline-end: 1px solid var(--urlbar-separator-color);
  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
  border-image-slice: 1;
}

#identity-box[pageproxystate="valid"].notSecureText,
#identity-box[pageproxystate="valid"].chromeUI,
#identity-box[pageproxystate="valid"].extensionPage {
  padding-inline-end: 8px;
}

#urlbar-label-box {
  padding-inline: 4px;
  border-inline-start: 1px solid var(--urlbar-separator-color);
}

#urlbar[searchmode]:not([breakout-extend]) > #urlbar-input-container > #urlbar-label-box {
  border-inline-start-color: transparent;
  border-image-width: 0 1px 0 0;
  pointer-events: none;
}

#urlbar[searchmode]:not([breakout-extend]) > #urlbar-input-container > #urlbar-label-box:-moz-locale-dir(rtl) {
  border-image-width: 0 0 0 1px;
}

.urlbar-label {
  margin: 0;
}

.sharing-icon,
#identity-icon,
#permissions-granted-icon,
#tracking-protection-icon,
.notification-anchor-icon,
#blocked-permissions-container > .blocked-permission-icon {
  width: 16px;
  height: 16px;
  margin-inline-start: 4px;
  -moz-context-properties: fill, fill-opacity;
}

#tracking-protection-icon {
  margin-inline-start: 0;
}

/* MAIN IDENTITY ICON */
#identity-icon {
  margin-inline-start: 0;
  list-style-image: url(chrome://global/skin/icons/identity-icon.svg);
}

#identity-box[pageproxystate="valid"].chromeUI > #identity-icon {
  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
}

#identity-box[pageproxystate="valid"].localResource > #identity-icon {
  list-style-image: url(chrome://global/skin/icons/document.svg);
}

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] > #identity-icon {
  list-style-image: url(chrome://browser/skin/search-glass.svg);
  fill-opacity: .4;
}

#urlbar[actiontype="extension"] > #urlbar-input-container > #identity-box > #identity-icon {
  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
}

#identity-box[pageproxystate="valid"].extensionPage > #identity-icon {
  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
}

#identity-box[pageproxystate="valid"].verifiedDomain > #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveBlocked > #identity-icon {
  list-style-image: url(chrome://browser/skin/connection-secure.svg);
}

#identity-box[pageproxystate="valid"].verifiedDomain > #identity-icon:not([lock-icon-gray]),
#identity-box[pageproxystate="valid"].mixedActiveBlocked > #identity-icon:not([lock-icon-gray]) {
  fill-opacity: 1;
  fill: #12BC00;
}

#identity-box[pageproxystate="valid"].weakCipher > #identity-icon,
#identity-box[pageproxystate="valid"].mixedDisplayContent > #identity-icon,
#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked > #identity-icon,
#identity-box[pageproxystate="valid"].certUserOverridden > #identity-icon,
#identity-box[pageproxystate="valid"].certErrorPage > #identity-icon {
  list-style-image: url(chrome://global/skin/icons/connection-mixed-passive-loaded.svg);
  fill: unset;
}

#identity-box[pageproxystate="valid"].notSecure > #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveContent > #identity-icon,
#identity-box[pageproxystate="valid"].httpsOnlyErrorPage > #identity-icon {
  list-style-image: url(chrome://global/skin/icons/connection-mixed-active-loaded.svg);
}

#permissions-granted-icon {
  list-style-image: url(chrome://browser/skin/permissions.svg);
}

#identity-box:not(.grantedPermissions) > #permissions-granted-icon {
  display: none;
}

/* SHARING ICON */

#webrtc-sharing-icon[sharing="camera"] {
  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
}

#webrtc-sharing-icon[sharing="microphone"] {
  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
}

#webrtc-sharing-icon[sharing="screen"] {
  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
}

#geo-sharing-icon[sharing] {
  list-style-image: url("chrome://browser/skin/notification-icons/geo.svg");
}

.sharing-icon:not([sharing]) {
  display: none;
}

#webrtc-sharing-icon[sharing]:not([paused]) {
  animation: 1.5s ease webrtc-sharing-icon-in-use-blink infinite;
  -moz-context-properties: fill;
  fill: rgb(224, 41, 29);
}

@keyframes webrtc-sharing-icon-in-use-blink {
  50% { opacity: 0; }
}

/* TRACKING PROTECTION ICON */

#tracking-protection-icon-container {
  padding-inline: @identityBoxPaddingInline@;
  /* Separator */
  border-inline-end: 1px solid var(--urlbar-separator-color);
  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
  border-image-slice: 1;
  /* This is needed in order to position the blue dot indicator. */
  position: relative;
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI {
  display: none;
}

#tracking-protection-icon-box {
  overflow: hidden;
  width: 16px;
  height: 16px;
}

#tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon,
#tracking-protection-icon-box:not([active]) > #tracking-protection-icon-animatable-box {
  display: none;
}

#tracking-protection-icon-animatable-box {
  display: block;
  position: absolute;
  overflow: hidden;
  width: 16px;
  height: 16px;
}

#tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image {
  /* Overrides the default 'display: -moz-box' to prevent icon shifting issue
     with scaled text, see Bug 1591049 */
  display: block;
  background-image: url(chrome://browser/skin/tracking-protection-animation.svg);
  transform: translateX(-256px);
  width: 272px;
  background-size: auto;
  height: 16px;
  min-height: 16px;
  -moz-context-properties: fill, fill-opacity;
}

#tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
  transform: translateX(0);
}

#tracking-protection-icon-box[hasException]:-moz-locale-dir(rtl)::before {
  left: 0;
  right: unset;
  /* This is needed in order to put the dot in front of the shield icon in rtl
     mode */
  z-index: 1;
}

:root[lwt-toolbar-field-brighttext] #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image {
  background-image: url(chrome://browser/skin/tracking-protection-animation-brighttext.svg);
}

@media (prefers-reduced-motion: no-preference) {
  #tracking-protection-icon-box[active][animate] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image {
    animation-name: tp-icon-animation;
    animation-timing-function: steps(16);
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  #tracking-protection-icon-box[active][animate] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
    animation-name: tp-icon-animation-rtl;
  }
}

#tracking-protection-icon-tooltip {
  max-width: 500px;
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/tracking-protection.svg);
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
}

#urlbar-input-container[pageproxystate="invalid"] > #tracking-protection-icon-container {
  visibility: collapse;
}

@keyframes tp-icon-animation {
  from {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-256px);
  }
}

@keyframes tp-icon-animation-rtl {
  from {
    transform: translateX(256px);
  }
  100% {
    transform: translateX(0);
  }
}

/* REMOTE CONTROL ICON */

#remote-control-icon {
  visibility: collapse;
}

:root[remotecontrol] #remote-control-icon {
  list-style-image: url(chrome://browser/content/static-robot.png);
  visibility: visible;
  width: 16px;
  height: 16px;
  margin-inline-start: 2px;
}