/*------------------------------*\
|*  Category-Coloured  Info BG  *|
|* - - - - -  V2.0.0  - - - - - *|
\* - - - - - - - - - - - - - - -*/

.data.image .link::before {
	background: linear-gradient(to top, hsl(var(--fade, var(--bg)), var(--imageFade)) 5px, transparent calc(55% * var(--imageFade)));
}

.data:is(.watching,.reading) ~ .image .link::before {
    --fade: var(--current);
} .data.completed ~ .image .link::before {
    --fade: var(--completed);
} .data.onhold ~ .image .link::before {
    --fade: var(--paused);
} .data.dropped ~ .image .link::before {
    --fade: var(--dropped);
} .data:is(.plantowatch,.plantoread) ~ .image .link::before {
    --fade: var(--planned);
}

.data.watching ~ .title,
.data.reading ~ .title {
    background: hsla(var(--current), var(--infoBGOpacity));
} .data.completed ~ .title {
    background: hsla(var(--completed), var(--infoBGOpacity));
} .data.onhold ~ .title {
    background: hsla(var(--paused), var(--infoBGOpacity));
} .data.dropped ~ .title {
    background: hsla(var(--dropped), var(--infoBGOpacity));
} .data.plantowatch ~ .title,
.data.plantoread ~ .title {
    background: hsla(var(--planned), var(--infoBGOpacity));
}