/* Basic styles to map the colors to different UI elements */

/* main background */
.ZQftYELq0aOsg6tPbVbV,
.sqKERfoKl4KwrtHqcKOd {
    background-color: var(--spice-base);
}

/* context menus */
.NbcaczStd8vD2rHWwaKv {
    background-color: var(--spice-card);
}

/* general */
a {
    color: var(--spice-text);
}

/* navbar items */
.link-subtle {
    color: var(--spice-tab);

    &:hover,
    &:active,
    &:active > svg {
        color: var(--spice-tab_active);
    }
}

/* playbar */
.epWhU7hHGktzlO_dop6z {
    background-color: var(--spice-playbar);
}
.DFtdzavKSbEhwKYkPTa6 .DuvrswZugGajIFNXObAr .epWhU7hHGktzlO_dop6z, .DFtdzavKSbEhwKYkPTa6 .TywOcKZEqNynWecCiATc:focus .epWhU7hHGktzlO_dop6z, .DFtdzavKSbEhwKYkPTa6 .TywOcKZEqNynWecCiATc:hover .epWhU7hHGktzlO_dop6z, .DFtdzavKSbEhwKYkPTa6:focus-within .epWhU7hHGktzlO_dop6z {
    background-color: var(--spice-playbar_active);
}

/* buttons */
.Vz6yjzttS0YlLcwrkoUR.tP0mccyU1WAa7I9PevC1,
.Vz6yjzttS0YlLcwrkoUR.tP0mccyU1WAa7I9PevC1:not([disabled]):focus, .Vz6yjzttS0YlLcwrkoUR.tP0mccyU1WAa7I9PevC1:not([disabled]):hover,
.Vz6yjzttS0YlLcwrkoUR.tP0mccyU1WAa7I9PevC1:not([disabled]):focus:not(:focus-visible,:hover) {
    color: var(--spice-button);
}
.KAZD28usA1vPz5GVpm63.RK45o6dbvO1mb0wQtSwq,
.KAZD28usA1vPz5GVpm63.RK45o6dbvO1mb0wQtSwq:focus, .KAZD28usA1vPz5GVpm63.RK45o6dbvO1mb0wQtSwq:hover,
.KAZD28usA1vPz5GVpm63.RK45o6dbvO1mb0wQtSwq:active:focus, .KAZD28usA1vPz5GVpm63.RK45o6dbvO1mb0wQtSwq:active:hover {
    color: var(--spice-button);
}
.KAZD28usA1vPz5GVpm63.EHxL6K_6WWDlTCZP6x5w:after {
    background-color: var(--spice-button);
}

/* playing gif */
.n5XwsUqagSoVk8oMiw1x,
.jxXIarsEHgz2HoaVCVzA {
    background: var(--spice-button);
    mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    content-visibility: hidden;
}