src/modules/profile/recentTracks/styles/backgrounds/option-10.css
/* Option 10: Romboids */

@property --bg-option-10-angle-1 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --bg-option-10-angle-2 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --bg-option-10-angle-3 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes bg-option-10-animation {
  0% {
    --bg-option-10-angle-1: 45deg;
    --bg-option-10-angle-2: -45deg;
  }

  50% {
    --bg-option-10-angle-1: 50deg;
    --bg-option-10-angle-2: -50deg;
  }
}

[data-element="rymstats-track-panel"] {
  &.bg-option-10:after {
    --bg-option-10-angle-1: 45deg;
    --bg-option-10-angle-2: -45deg;
    --bg-option-10-angle-3: 90deg;
    background-image:
      repeating-linear-gradient(
        var(--bg-option-10-angle-1),
        var(--clr-palette-darkvibrant) 0,
        var(--clr-palette-darkvibrant) 5px,
        transparent 5px,
        transparent 10px
      ),
      repeating-linear-gradient(
        var(--bg-option-10-angle-2),
        var(--clr-palette-lightmuted) 0,
        var(--clr-palette-lightmuted) 5px,
        transparent 5px,
        transparent 10px
      ),
      repeating-linear-gradient(
        var(--bg-option-10-angle-3),
        var(--clr-palette-muted) 0,
        var(--clr-palette-muted) 2px,
        transparent 2px,
        transparent 6px
      );
    background-blend-mode: hard-light;
  }

  &.is-now-playing.bg-option-10:after {
    animation: bg-option-10-animation 15s ease-in-out infinite;
  }
}
