.player-controls {
	padding: 0.5em;
	display: flex;
	flex-direction: column;
	gap: var(--gap-small, 0.8em);

	& .action {
		border-width: 0;
		border-style: none;
		border-color: transparent;
		border-radius: 100%;
		padding: 0.5em;
		width: 2.5em;
		height: 2.5em;
		display: flex;
		justify-content: center;
		align-items: center;

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




		&.primary {
			border-width: 0.14em;
			border-style: solid;
			border-color: var(--accent);
		}
	}
}

html, body, sk-app, sk-app > main {
	height: 100vh;
	width: 100vw;
	max-height: 100vh;
	max-width: 100vw;

}

sk-app > main {
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"sidebar content"
		"controls controls";
}

#sidebar {
	grid-area: sidebar;
	width: min-content;
	min-width: 10em;
	max-width: 20em;
	background-color: var(--background-lighter);
	padding: 0;
	box-sizing: border-box;
	transition: width 0.3s ease, opacity 0.3s ease;
	position: relative;
	overflow: hidden;
	display: block flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: stretch;

	& .sidebar-toggle {

	}

	&.collapsed {
		width: 3em;
		min-width: 3em;

		& > .menu > li, & > .menu > li > *{
			align-items: center;
			justify-content: center;
		}

		& .hidden-when-collapsed {
			display: none;
		}

	}

	& > .menu {
		align-items: stretch;
	}
}

#view-container {
	grid-area: content;
	overflow: auto;
}

#player-controls {
	grid-area: controls;
}

sk-library .track-list-container {
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	width: 100%;
	margin-top: var(--gap-small);
}

.menu {
    font-weight: normal;
    font-style: normal;
    box-sizing: border-box;
    border-collapse: collapse;
    display: block flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;


    & > li {
		content-visibility: auto;
        width: 100%;
        min-height: 3em;
        margin: 0;

        display: flex;
        gap: var(--gap-small);
        align-items: center;
        text-decoration: none;
		justify-content: flex-start;
        color: var(--foreground);

        white-space: nowrap;

		&:not(:has(a)) {
			padding: var(--gap-small) var(--gap);
		}

        &:hover:not(.heading) {
            color: var(--control-hover);
			background-color: #0000001C !important;
        }

        &:active:not(.heading) {
            color: var(--control-focus);
			background-color: #0000001C !important;
        }

		&.active, &.active * {
			fill: var(--accent);
			color: var(--accent);
		}

		&.heading {
			text-transform: uppercase;
			font-size: small;
			font-weight: bold;
			margin-bottom: -1.2em;
			margin-top: 1.4em;
		}



        & .is-sub, & .sub {
            font-size: 0.5em;
            display: block;
            color: var(--foreground-light);
            margin-top: -0.5em;

        }

		& .svg-icon {
			margin-right: 0.4em;
			width: 1em;
			height: 1em;
			max-width: 1em;
			max-height: 1em;

			& > svg {

			}
		}

		& > a, & > a:hover {
			list-style: none;
            font-style: normal;
            box-sizing: border-box;
            border-collapse: collapse;
            text-decoration: none;
            cursor: pointer;
            color: inherit;
		}

		& > a {
			margin: 0;
			padding: var(--gap-small) var(--gap);
			display: flex;
			flex-direction: row;
			gap: var(--gap-small);
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			height: 100%;
			list-style: none;
            font-style: normal;
            box-sizing: border-box;
            border-collapse: collapse;
            text-decoration: none;
            cursor: pointer;
            color: inherit;
		}
    }
}



sk-playlist, sk-library {
	width: 100%;
	height: 100%;
}