:root {
	--background: #060606;
	--primary: #1db954;
}

* {
	font-family: monospace;
	font-size: 16px;
}

body {
    /* padding-inline: 1rem; */
    color-scheme: dark;
    height: 100vh;
    margin: 0;
    background: var(--background);
    color: white;
}

button, a {
    background: none !important;
    border: none;
    padding: 0 !important;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    color: #eee;

    &.primary {
        color: #6374ce;
    }

    &.danger {
        color: rgb(223, 51, 51);
    }

    user-select: none;
    -webkit-user-select: none;

    &:disabled {
        opacity: .25;
        pointer-events: none;
    }

    &::before {
        content: '[ ';
    }

    &::after {
        content: ' ]';
    }

    &::before, &::after {
        color: #222;
    }

    &:hover {
        &::after, &::before {
            color: #555;
        }
    }
}

.spotify_color { 
    color: #1db954;
}

.danger_color { 
    color: #FF6969;
}

mark {
    background: none;
    color: #1db964;
}

select {
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    overflow: hidden;
    padding: 0;
    padding-bottom: 2px;
    outline: none;
    border: none;
    background: var(--background);
}

.select-wrapper {
    &::before {
        content: '>> ';
    }

    &::before, &::after {
        color: #222;
    }
}