@charset "UTF-8";
/*
# 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/.
*/

:root {
  --throbber-color: var(--browser-loading-indicator, Highlight);
  --throbber-shadow-color: transparent;
  --throbber-size: var(--svg-small-icon-size);
  --tab-burster-size: 5px;
  --tab-burster-translation: translate(calc(var(--tab-size) / 2), calc(var(--tab-size) / 2 - var(--tab-burster-size)));
}

.tab.faviconized {
  --tab-burster-translation: translate(calc(var(--favicon-size) / 2), calc(var(--tab-size) / 2 - var(--tab-burster-size)));
}

@keyframes throbber {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


:root:not(.blocking-throbber) #blocking-screen .throbber,
:root:not(.have-loading-tab) #tabbar .throbber,
#tabbar .tab:not(.loading) .throbber,
#tabbar .tab.collapsed .throbber {
  display: none !important;
}


#blocking-screen .throbber,
.tab:not(.collapsed) .throbber {
  display: inline-block;
  font-size: var(--throbber-size);
  height: var(--throbber-size);
  max-height: var(--throbber-size);
  max-width: var(--throbber-size);
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: relative;
  width: var(--throbber-size);
}

:root:not(.throbber-synchronizing) .tab:not(.collapsed).loading:not(.throbber-unsynchronized) .throbber::before,
:root:not(.throbber-synchronizing).have-loading-tab #master-throbber,
:root.have-loading-tab #sync-throbber,
:root.blocking-throbber #blocking-screen .throbber::before {
  animation: throbber 1.05s steps(60) infinite;
}

:root.blocking-throbber #blocking-screen .throbber::before,
#tabbar .tab:not(.collapsed).loading .throbber::before,
:root.have-loading-tab #master-throbber {
  content: "";
  height: var(--throbber-size);
  position: absolute;
  width: calc(var(--throbber-size) * 60);
}


:root.blocking-throbber #blocking-screen .throbber::before,
#tabbar .tab:not(.collapsed).loading .throbber::before {
  fill: var(--throbber-color);
  box-shadow: 0 0 2px var(--throbber-shadow-color);
}
:root.simulate-svg-context-fill.blocking-throbber #blocking-screen .throbber::before,
:root.simulate-svg-context-fill #tabbar .tab:not(.collapsed).loading .throbber::before,
#tabbar .tab:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
  background: var(--throbber-color);
}

:root.blocking-throbber #blocking-screen .throbber::before,
#tabbar .tab:not(.collapsed).loading .throbber::before {
  -moz-context-properties: fill;
  background: url("./throbber.svg") no-repeat;
}
:root.simulate-svg-context-fill.blocking-throbber #blocking-screen .throbber::before,
:root.simulate-svg-context-fill #tabbar .tab:not(.collapsed).loading .throbber::before {
  mask: url("./throbber.svg") no-repeat left center / 100%;
}

#tabbar .tab:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
  background-image: none;
  mask: -moz-element(#master-throbber) no-repeat left center / 100%;
}
:root.simulate-svg-context-fill #tabbar .tab:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
  mask: -moz-element(#master-throbber-container) no-repeat;
}

#master-throbber {
  background: url("./throbber.svg") no-repeat left center;
}



:root.blocking-throbber #blocking-screen .throbber {
  position: absolute;
  top: calc(50% - var(--throbber-size));
  left: calc(50% - var(--throbber-size));
  transform: scale(2, 2);
}

:root.blocking-throbber #blocking-screen .throbber::before {
  fill: white;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.35);
}
:root.simulate-svg-context-fill.blocking-throbber  #blocking-screen .throbber::before {
  background: white;
}



@keyframes tab-burst-animation {
  0%   { opacity: 0.4; transform: var(--tab-burster-translation) scale(1); }
  100% { opacity: 0;   transform: var(--tab-burster-translation) scale(40); }
}

@keyframes tab-burst-animation-light {
  0%   { opacity: 0.2; transform: var(--tab-burster-translation) scale(1); }
  100% { opacity: 0;   transform: var(--tab-burster-translation) scale(40); }
}

:root.animation .tab:not(.collapsed).bursting .burster::before {
  animation: tab-burst-animation var(--tab-burst-duration) cubic-bezier(0, 0, 0.58, 1);
  background: var(--throbber-color);
  border-radius: 100%;
  border: var(--tab-burster-size) solid var(--throbber-color);
  content: "";
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 50%;
}

:root.animation .tab:not(.collapsed).not-activated-since-load.bursting .burster::before {
  animation-name: tab-burst-animation-light;
}
