$colors: (
    text: #ffffff,
    subtext: #f0f0f0,
    sidebar-text: #ffffff,
    main: #000000,
    sidebar: #1ed760,
    player: #000000,
    card: #000000,
    shadow: #202020,
    selected-row: #797979,
    button: #1ed760,
    button-active: #1ed760,
    button-disabled: #535353,
    tab-active: #166632,
    notification: #1db954,
    notification-error: #e22134,
    misc: #bfbfbf
);

// Set Transitions
@each $key, $color in $colors {
    @property --spice-#{$key} {
        syntax: "<color>";
        initial-value: $color;
        inherits: true;
    }

    @property --spice-rgb-#{$key} {
        syntax: "<number>, <number>, <number>";
        initial-value: #{red($color)}, #{green($color)}, #{blue($color)};
        inherits: true;
    }
}

$props-to-transition: ("sidebar", "main", "text", "button");
:root {
    $props: ();

    @each $key in $props-to-transition {
        $props: append($props, --spice-#{$key}, comma);
        $props: append($props, --spice-rgb-#{$key}, comma);
    }

    transition: all var(--song-transition-speed) linear;
    transition-property: $props;
}

// $key: the key of the color, e.g. "main"
// $alpha: tha alpha in rgba()
// $light-offset: added when in light mode
@function spiceColor($key, $alpha: 1, $light-offset: 0) {
    @if $alpha == 1 {
        @return var(--spice-#{$key});
    } @else if $light-offset == 0 {
        @return rgba(var(--spice-rgb-#{$key}), $alpha);
    } @else {
        @return rgba(var(--spice-rgb-#{$key}), lightOffset($alpha, $light-offset));
    }
}