/**
 * @name Spotify Discord
 * @version 2.0.0
 * @description Combine Discord and Spotify into one
 * @author CapnKitten
 *
 * @website http://github.com/CapnKitten
 * @source https://github.com/CapnKitten/BetterDiscord/blob/master/Themes/Spotify-Discord/css/source.css
 * @donate https://paypal.me/capnkitten
 * @invite jzJkA6Z
 */

@import url(https://capnkitten.github.io/BetterDiscord/Themes/Spotify-Discord/css/source.css);

:root {
    /* APP BACKGROUND COLORS */
    --app-background: hsl(0, 100%, 50%);
    --app-foreground: hsl(0,0%,7%);

    /* APP CARD SETTINGS */
    --app-card-radius: 8px;
    --app-card-margin: 8px;
    --app-card-top-margin: 4px;
    --app-card-border-color: hsl(0,0%,14%);

    /* APP BAR SETTINGS (BLACK BAR AT THE BOTTOM) */
    --app-bar-size: 80px;

    /* HEADER BAR SETTINGS */
    --header-bar-height: 56px;
    --header-bar-color: hsl(0,0%,13%);

    /* ACCENT HSL AND TEXT COLOR SETTINGS */
    /* --accent-hue: 141; */
    --accent-hue: hsl(300, 25.68%, 70.98%);
    --accent-saturation: 72.9%;
    --accent-lightness: 42%;
    --accent-text-color: hsl(0,0%,6%);

    /* ALERT HSL AND TEXT COLOR SETTINGS*/
    --alert-hue: 0;
    --alert-saturation: 85%;
    --alert-lightness: 61%;
    --alert-text-color: hsl(0,0%,0%);

    /* LIST & MENU ITEM SETTINGS */
    --background-tinted-hover: hsla(0,0%,100%,0.07);
    --background-tinted-active: hsla(0,0%,100%,0.11);
    --background-tinted-highlight: hsla(0,0%,100%,0.17);
    --background-tinted-dark: hsla(0,0%,0%,0.23);

    --menu-text-color: hsl(0,0%,85%);
    --menu-item-radius: 6px;

    /* CARD SETTINGS - DIFFERENT FROM APP CARD SETTINGS */
    --card-color: hsl(0,0%,10%);
	--card-color-hover: hsl(0,0%,14%);
    --card-color-active: hsl(0,0%,22%);
    --card-radius: 6px;
    --card-border-color: hsl(0,0%,19%);

    /* BUTTON SETTINGS */
    --button-height: 36px;
    --button-padding: 0 18px;

    /* POPOUT AND MODAL SETTINGS */
    --popout-color: hsl(0,0%,16%);
    --popout-color-alt: hsl(0,0%,11%);
	--popout-radius: 6px;
	--popout-radius-big: 10px;

    /* INPUT SETTINGS */
    --input-height: 36px;
    --input-padding: 0 12px;
    --input-color: hsla(0,0%,100%,0.09);
    --input-radius: 4px;
    --input-border-color: hsl(0,0%,33%);
    --input-text-color: hsl(0,0%,96%);
    --input-placeholder-color: hsl(0,0%,71%);

    /* MAIN CHAT BOX SETTINGS */
    --main-textarea-min-height: 48px;
    --main-textarea-color: hsl(0,0%,14%);
    --main-textarea-border-color: hsl(0,0%,20%);
    --main-textarea-text-color: hsl(0,0%,60%);
    --main-textarea-placeholder-color: hsl(0,0%,54%);
    --main-textarea-typing-color: hsla(0,0%,7%,0.9);

    /* MESSAGE SETTINGS */
    --message-color-hover: hsl(0,0%,9%);

    /* SLIDER SETTINGS */
    --slider-color: hsl(0,0%,70%);
	--slider-background: hsl(0,0%,26%);

    /* SCROLLBAR SETTINGS */
    --scrollbar-width: 12px;
    --scrollbar-color: hsl(0,0%,35%);
    --scrollbar-hover-color: hsl(0,0%,49%);
    --scrollbar-active-color: hsl(0,0%,58%);
}