/*
 *  songlist-specific stuff
 */

@import url("/css/utility.css");

 .songlist {
	padding: var(--10px);
	border-radius: var(--10px);

	background: var(--clr-box-bg);
	border-radius: var(--10px);
	border: var(--1px) solid;
	border-color: var(--clr-box-border-top) var(--clr-box-border-sides) var(--clr-box-border-bottom);
	box-shadow: 0 0 0 var(--6px) var(--clr-songlist-rim2) inset, 0 0 0 var(--1px) var(--clr-box-rim) inset;

	& a {
		color: var(--clr-main);
		/*text-decoration-color: var(--clr-main);*/
		text-decoration-color: rgba(from var(--clr-main) r g b / .5);

		&:hover {
			color: var(--clr-link-hover) !important;
			text-decoration-color: var(--clr-link-hover) !important;
		}
	}

	& > li:not(:last-child) {
		/*border-bottom: 1px solid #3b3b3b;*/ /*gray*/
		margin-bottom: var(--2px);
		padding-bottom: var(--2px);
	}

	& > li:nth-child(2n) {
		background-color: var(--clr-songlist-odd-line);
		border-radius: .5rem;
	}

	& li:nth-child(2n+1){ background: none;}
	& .tl-inv li:nth-child(2n){ background: none;}
	& .tl-inv li:nth-child(2n+1){ background-color: var(--clr-songlist-odd-line); border-radius: .5rem; }

	& > li {
		margin-bottom: 0; /*To counteract the general 0.5rem applied by base.css*/
		padding-left: var(--6px);
	}

	& > li h-cn {
		font-size: 1rem;
		color: var(--clr-main);
		line-height: 1.5rem;
	}
}

ul.songlist > li::marker { content: ""; }
ol.songlist > li::marker { font-weight: bold; }
/*.songlist ul li, .songlist ol li { content: unset; font-weight: unset; border-bottom: unset; }*/


/* Zero Stars */
.songlist [s0] {
	font-size: 0.8rem;
	color: var(--clr-songlist-s0);
	text-decoration-color: var(--clr-songlist-s0);
	line-height: 1.25rem;

	& a {
		opacity: 0.7;
		text-decoration-color: var(--clr-songlist-s0);
	}

	& p-t { opacity: 1; }
}

/* One Star */
.songlist > li[s1] {
	font-size: 0.8rem;
	color: var(--clr-songlist-s1);
	line-height: 1.3rem;
}

/* Two Stars */
.songlist > li[s2] {
	font-size: 0.9rem;
	color: var(--clr-songlist-s2);
	line-height: 1.4rem;

	& a {
		color: var(--clr-songlist-s2);
	}
}

/* Four Stars */
.songlist > li[s4]:after {
	content: ' ';
	background-image: url("/assets/site/star.gif");
	position: relative;
	float: right;

	width: 1rem;
	height: 1rem;
	background-size: contain;

	margin-top: var(--3px);
	margin-right: var(--5px);
}

/* Five Stars */
.songlist > li[s5]:after {
	content: ' ';
	background-image: url("/assets/site/heart.gif");
	position: relative;
	float: right;

	width: 1rem;
	height: 1rem;
	background-size: contain;
	
	margin-top: var(--3px);
	margin-right: var(--5px);
}

/* Six Stars */
.songlist > li[s6]:after {
	content: ' ';
	background-image: url("/assets/site/gold-heart.gif");
	position: relative;
	float: right;

	width: 1rem;
	height: 1rem;
	background-size: contain;
	
	margin-top: var(--3px);
	margin-right: var(--5px);
}

.horizontal-flex {
	display: flex;
	flex-direction: row;

	& > * {

	}
}

/* A specific flex layout for track lists */
.two-column-songlist {
	display: flex;
	gap: 1rem;

	& > div:nth-child(1) {

	}

	& > div:nth-child(2) {
		flex-grow: 1;

		& :first-child { margin-top: 0; }
		& :last-child { margin-bottom: 0; }
	}
}

img.disc-cover {
	width: 128px;
	height: 128px;
	border-radius: 4px;
	border: 2px solid gray;
	float: inline-start;
	background: var(--clr-box-rim);
}

ul.fancy-songlist {
	& > li > button[popovertarget]:not(.cartridge) {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: .5rem;
		width: 16rem;
		height: 3.5rem;

		background-image: none;
		background: #333;
		border: 2px solid #555;
		border-radius: 8px;

		& > img {
			width: 4rem;
			height: 4rem;
			position: relative;
			top: -.5rem;
			border: 2px solid #555;
			box-sizing:	border-box;
			border-radius: 8px;
		}

		& > div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: left;

			& > p {
				margin: 0;
			}
		}
	}
}

/* Whack styling to make lists in hovercards inside songlists display normally */
ul.songlist h-cn li::marker { content: unset; }
.songlist h-cn li:not(:last-child) { border-bottom: unset; }
.songlist h-cn li { margin-bottom: unset; }
/* Whack styling end */