:root {
	/* 
        FIRST WE'LL DEFINE OUR SWATCHES, i.e. THE COMPLEMENTARY
        COLORS THAT WE'LL USE TOGETHER IN MULTIPLE PLACES THAT
        TOGETHER WILL MAKE UP A GIVEN THEME
    */
	--swatch-foundation: #eeeedd;
	--swatch-primary: #e6e6e6;
	--swatch-complement: #e1e4cb;
	--swatch-contrast: #111111;
	--swatch-accent: #669966;
	--swatch-status: #123456;
	--swatch-link-emphasis: #b88320;
	--swatch-link-contrast: lightgreen;
	--swatch-link-hover: pink;
	--switch-link-active: magenta;
	--bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

body {
	background-color: var(--swatch-foundation);
}

#root {
	background-color: var(--swatch-primary);
	font-family: "Tangerine", serif;
	position: absolute;
	width: 80%;
	left: 10%;
	height: 90%;
	top: 5%;
	display: grid;
	grid-template-columns: 30% 70%;
	grid-template-rows: 10% 10% 70% 10%;
}

/* 
  THE ROOT IS DIVIDED INTO 6 BROAD REGIONS:
  -banner
  -sidebar-heading
  -playlist-cards
  -edit-toolbar
  -song-cards
  -statusbar
 */

#banner {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	text-align: center;
	background-image: linear-gradient(to bottom, #b8b808, #636723);
	color: white;
	font-size: 54pt;
	border-color: black;
	border-width: 2px;
	border-style: solid;
	border-radius: 10px;
}

#sidebar-heading {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	text-align: center;
	font-size: 36pt;
	font-weight: bold;
	display: flex;
	gap: 10px;
	margin-left: 10px;
	margin-right: 10px;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: var(--swatch-primary);
}

#playlist-cards {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	display: flex;
	flex-direction: column;
	overflow: scroll;
	background-color: var(--swatch-primary);
}

#edit-toolbar {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	display: flex;
	flex-direction: row;
	overflow: auto;
	background-color: var(--swatch-primary);
}

#song-cards {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	display: flex;
	flex-direction: column;
	overflow: scroll;
	background-color: var(--swatch-accent);
}

#statusbar {
	grid-column: 1 / 3;
	grid-row: 4 / 5;
	background-color: #ffa07a;
	color: black;
	text-align: center;
	font-size: 38pt;
	padding-top: 4px;
}

/*
  CLASSES FOR PLAYLIST AND SONG CARDS
  -playlist-card
  -playlist-card-button
  -playlist-card-text-input
  -song-card
  -selected-song-card
  -unselected-song-card
  -song-card-button
*/
.playlist-card,
.song-card {
	max-height: fit-content;
	font-size: 24pt;
	margin: 10px;
	padding: 10px;
	border-radius: 125px;
	background-color: var(--swatch-complement);

	&:hover {
		background-color: var(--swatch-contrast);
	}

	&.selected:not(:hover) {
		background-color: var(--swatch-accent);
		color: var(--swatch-contrast);
	}
}

.unselected:hover {
	cursor: pointer;
}

.song-card:hover span {
	color: white;
}

.card-buttons {
	margin-left: auto;
	float: right;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.playlist-card-button,
.song-card-button {
	float: initial;
	margin-left: 10px;
	font-size: 24pt;
}

.playlist-card,
.song-card .song-card-title {
	text-decoration: none;
}

.song-card .song-card-title {
	color: var(--swatch-link-emphasis);
}

.playlist-card:hover,
.song-card:hover .song-card-title {
	color: var(--swatch-link-contrast);
}

.playlist-card-text-input {
	font-size: 18pt;
	width: 100%;
}

.song-card:hover .song-card-title:hover {
	color: var(--swatch-link-hover);
}

.song-card-title:active {
	color: var(--swatch-link-active);
}

.song-card-by {
	color: black;
}

.song-card-artist {
	color: red;
}

.is-dragging {
	border: 2px black solid;
	opacity: 0.5;
}

.toolbar-button {
	font-size: 36pt;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	box-shadow: 2px 4px #888888;
	border-radius: 5px;
}