/* Create a circular throbber inside tabs replacing the default one  */
/* Doesn't really measure loading progress but sort of looks like it */

#tabbrowser-tabs{ --tab-loader-size: 18px; }
.tabbrowser-tab .tab-throbber,
.tabbrowser-tab[bursting] .tab-icon-image{
  display: none !important;
}
.tabbrowser-tab .tab-content::before{
  display: -moz-box;
  content: "";
  width:var(--tab-loader-size);
  height:var(--tab-loader-size);
  margin-right:6px;
  background: center no-repeat url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8" ?><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" stroke="url(%23gradient)" fill="none" width="100%" height="100%" stroke-width="1.7"><defs><radialGradient id="gradient" cx="50%" cy="0" r="0.6"><stop offset="0%" stop-color="lightpink"/><stop offset="100%" stop-color="red"/></radialGradient></defs><circle cx="8" cy="8" r="5.7"/></svg>') !important;
  clip-path: polygon(50% 50%,50% 0%,50% 0%,50% 0%, 50% 0%,50% 0%, 50% 0%);
  transition: clip-path 0.2s ease-out, opacity 0.3s linear 0.1s;
}
.tabbrowser-tab:-moz-any([busy],[bursting]) .tab-content{ padding-left: calc( 9px - (var(--tab-loader-size) - 16px)) !important; }
.tabbrowser-tab[pinned] .tab-content::before{ margin-right: 0px }
@keyframes loadprogress{
  from{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 50%, 100% 50%,100% 50%, 100% 50%); }
  25%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 100% 100%,100% 100%, 100% 100%); }
  50%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 100%,0% 100%); }
  75%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 0%,0% 0%); }
  to{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%, 0% 0%, 50% 0%); }
}
@keyframes rotation{
  from{ transform: rotateZ(0deg) }
  to{ transform: rotateZ(360deg) }
}
.tabbrowser-tab:not([busy]):not([bursting]) .tab-content::before{ visibility: collapse; }
.tabbrowser-tab:not([busy]) .tab-content::before{ opacity: 0 }
.tabbrowser-tab[busy]:not([progress]) .tab-content::before{
  clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 50%, 100% 50%,100% 50%, 100% 50%);
}
.tabbrowser-tab[busy][progress] .tab-content::before{
  animation: loadprogress 2s linear, rotation 0.7s linear 2s infinite !important;
  animation-fill-mode: forwards !important;
}
.tabbrowser-tab[bursting] .tab-content::before{
  clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 0%, 50% 0%) !important;
}
#tabbrowser-tabs[schedulepressure] .tab-content::before{ display:none !important; }