/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Creates a colorful animated border around active tab */

@keyframes filter{from{ filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) }}
 
.tabbrowser-tab[selected] > .tab-stack::before{
  grid-area: 1/1;
  content: "";
  display: inherit;
  margin-block: var(--tab-block-margin);
  border-radius: var(--tab-border-radius);
  z-index: 0;
  background-image: conic-gradient(
    hsl(0 100% 70%),
    hsl(60 100% 45%) 70deg,
    hsl(120 100% 55%) 105deg,
    hsl(160 100% 60%) 160deg,
    hsl(200 100% 60%) 200deg,
    hsl(240 100% 65%) 255deg,
    hsl(300 100% 60%) 290deg,
    hsl(360 100% 70%) 360deg);
  background-size: cover;
  background-position: center;
  animation: filter steps(30) 2s infinite;
}
.tab-background[selected]{
  border: 1px solid transparent !important;
  outline: none !important;
  background-clip: padding-box !important;
}