/* 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/. */

%ifdef MOZ_PHOTON_THEME

#urlbar,
.searchbar-textbox {
  -moz-appearance: none;
  background-clip: content-box;
  border: 1px solid hsla(240,5%,5%,.25);
  border-radius: var(--toolbarbutton-border-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  padding: 0;
  margin: 0 5px;
  min-height: 30px;
}

#urlbar:hover,
.searchbar-textbox:hover {
  border-color: hsla(240,5%,5%,.35);
  box-shadow: 0 1px 6px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.1);
}

#urlbar:-moz-lwtheme,
.searchbar-textbox:-moz-lwtheme {
  background-color: hsla(0,0%,100%,.8);
  color: black;
}

#urlbar:-moz-lwtheme:hover,
#urlbar:-moz-lwtheme[focused="true"],
.searchbar-textbox:-moz-lwtheme:hover,
.searchbar-textbox:-moz-lwtheme[focused="true"] {
  background-color: white;
}

%endif

:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  min-height: 26px;
  margin-top: 3px;
  margin-bottom: 3px;
}

:root[uidensity=touch] #urlbar,
:root[uidensity=touch] .searchbar-textbox {
  min-height: 32px;
}

#urlbar-container {
  -moz-box-align: center;
}

#urlbar-search-splitter {
  /* The splitter width should equal the location and search bars' combined
     neighboring margin and border width. */
  min-width: 12px;
  margin: 0 -6px;
  position: relative;
  border: none;
  background: transparent;
  -moz-appearance: none;
}

%ifdef MOZ_PHOTON_THEME
/* Page action panel */
.pageAction-panel-button > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

#pageAction-panel-bookmark,
#star-button {
  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
#pageAction-panel-bookmark[starred],
#star-button[starred] {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#star-button[starred] {
  fill-opacity: 1;
  fill: var(--toolbarbutton-icon-fill-attention);
}

#pageAction-panel-copyURL,
#pageAction-urlbar-copyURL {
  list-style-image: url("chrome://browser/skin/link.svg");
}

#pageAction-panel-emailLink,
#pageAction-urlbar-emailLink {
  list-style-image: url("chrome://browser/skin/email-link.svg");
}

#pageAction-panel-sendToDevice,
#pageAction-urlbar-sendToDevice {
  list-style-image: url("chrome://browser/skin/device-mobile.svg");
}

.pageAction-sendToDevice-device[clientType=mobile] {
  list-style-image: url("chrome://browser/skin/device-mobile.svg");
}

.pageAction-sendToDevice-device[clientType=desktop] {
  list-style-image: url("chrome://browser/skin/device-desktop.svg");
}

#pageAction-panel-sendToDevice-fxa,
#pageAction-urlbar-sendToDevice-fxa {
  list-style-image: url("chrome://browser/skin/sync.svg");
}

/* Page action urlbar buttons */
#urlbar-icons {
  /* Add more space between the last icon and the urlbar's edge. */
  margin-inline-end: 3px;
}

.urlbar-icon {
  width: 22px;
  height: 16px;
  margin-inline-start: 6px;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
  color: inherit;
}

#pageActionButton {
  list-style-image: url("chrome://browser/skin/page-action.svg");
}

%ifdef MOZ_PHOTON_ANIMATIONS
@keyframes bookmark-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-627px);
  }
}

@keyframes bookmark-animation-rtl {
  from {
    transform: scaleX(-1) translateX(0);
  }
  to {
    transform: scaleX(-1) translateX(-627px);
  }
}

#star-button-box[animationsenabled] {
  position: relative;
}

/* Preload the bookmark animations to prevent a flicker during the first playing
   of the animations. */
#star-button[preloadanimations] + #star-button-animatable-box > #star-button-animatable-image {
  background-image: url("chrome://browser/skin/bookmark-animation.svg"),
                    url("chrome://browser/skin/library-bookmark-animation.svg");
  background-size: 0, 0;
}

#star-button-box[animationsenabled] > #star-button[starred][animate] {
  fill: transparent;
  position: relative;
}

#star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
  position: absolute;
  overflow: hidden;
  top: calc(50% - 16.5px); /* 16.5px is half the height of the sprite */
  /* .urlbar-icon has width 22px. Each frame is 33px wide. Set margin-inline-start
     to be half the difference, -5.5px, plus the 6px margin-inline-start of
     .urlbar-icon, 6px. */
  margin-inline-start: 0.5px;
  /* Set the height to equal the height of each frame of the SVG. Must use
     min- and max- width and height due to bug 1379332. */
  min-width: 33px;
  max-width: 33px;
  min-height: 33px;
  max-height: 33px;
}

#star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box > #star-button-animatable-image {
  background-image: url("chrome://browser/skin/bookmark-animation.svg");
  background-size: auto;
  list-style-image: none;
  height: var(--toolbarbutton-height);
  animation-name: bookmark-animation;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: steps(19);
  animation-duration: 317ms;
  width: 660px;
}

#star-button-box[animationsenabled] > #star-button[starred][animate]:-moz-locale-dir(rtl) + #star-button-animatable-box > #star-button-animatable-image {
  animation-name: bookmark-animation-rtl;
}
%endif /* MOZ_PHOTON_ANIMATIONS */
%endif /* MOZ_PHOTON_THEME */

/* Zoom button */
#urlbar-zoom-button {
  margin: 0 3px;
  font-size: .8em;
  padding: 0 8px;
  border-radius: 1em;
  background-color: hsla(0,0%,0%,.05);
  border: 1px solid ThreeDLightShadow;
}

#urlbar-zoom-button[animate="true"] {
  animation-name: urlbar-zoom-reset-pulse;
  animation-duration: 250ms;
}

#urlbar-zoom-button:hover {
  background-color: hsla(0,0%,0%,.1);
}

#urlbar-zoom-button:hover:active {
  background-color: hsla(0,0%,0%,.15);
}

#urlbar-zoom-button > .toolbarbutton-text {
  display: -moz-box;
}

#urlbar-zoom-button > .toolbarbutton-icon {
  display: none;
}
