/* vars */
r4-app {
	/* colors */
	--c-light: cornsilk;
	--c-dark: black;
	--c-dim: dimgray;
	--c-dark-dim: darkslategray;
	--c-light-dim: lightgray;
	--c-intense: #00ff00;
	--c-moderate: #ff00ff;
	--s-container: 65rem;
	--s-form: 35rem;
	--s-radius: calc(var(--s) / 3);
	--s-font: 16px;
	--s-font-s1: 0.7rem;
}

/* color schemes */
r4-app[color-scheme='os'],
r4-app[color-scheme='dark'] {
	color-scheme: dark;
	--c-bg: var(--c-dark);
	--c-fg: var(--c-light);
	--c-link: var(--c-intense);
	--c-menu-bg: var(--c-dim);
	--c-form-bg: var(--c-dim);
	--c-bg--channel-card: var(--c-dim);
	--c-bg--track: var(--c-dim);
	--c-bg--inputs: var(--c-dark-dim);
}
r4-app[color-scheme='light'] {
	color-scheme: light;
	--c-bg: var(--c-light);
	--c-fg: var(--c-dark);
	--c-link: var(--c-moderate);
	--c-menu-bg: var(--c-intense);
	--c-form-bg: var(--c-intense);
	--c-bg--channel-card: var(--c-intense);
	--c-bg--track: var(--c-intense);
	--c-bg--inputs: var(--c-light-dim);
}

/* app scheme theming */
r4-app {
	& a {
		text-decoration: none;
		color: var(--c-link);
	}
}

/* app layout */
r4-page-header {
	position: sticky;
	top: 0;
	z-index: 1;
	align-self: center;
	background-color: var(--c-bg);
}

/* app components */
r4-app h1,
r4-app h2,
r4-app h3 {
	font-size: 1.3rem;
	margin-top: 0;
}
r4-app {
	& :is(button, select, input, textarea, summary) {
		background-color: var(--c-bg--inputs);
	}
}

r4-app menu {
	justify-content: center;
	& li {
		padding: calc(var(--s) / 3);
	}
	& a {
		background-color: var(--c-menu-bg);
		padding: calc(var(--s) / 2);
	}
}
r4-app r4-app-user-menu menu {
	flex-wrap: wrap;
}
r4-app a[aria-current='page'] {
	background-color: var(--c-bg);
}
r4-app[color-scheme='os'] a[aria-current='page'] {
	text-decoration: none;
}

r4-app ul li + li,
r4-app ol li + li {
	margin-top: var(--s);
}

/* overwrite "default" styles */
r4-app r4-actions details[open] menu {
	background-color: var(--c-bg);
}
r4-app summary {
	padding: calc(var(--s) / 2);
	margin: calc(var(--s) / 2);
}

r4-app form {
	padding: calc(var(--s) / 2);
	border-radius: var(--s-radius);
	width: 100%;
}
r4-app summary,
r4-app form legend,
r4-app form label {
	font-style: italic;
}
r4-app form button {
	margin: calc(var(--s) / 2);
}
r4-app fieldset {
	display: flex;
	margin: calc(var(--s) / 3);
	position: relative;
}
r4-app {
	& :is(r4-supabase-filter-search, r4-supabase-query) {
		& r4-supabase-filter-search {
			position: absolute;
			top: -0.3em;
			left: 0;
			font-size: var(--s-font-s1);
		}
	}
}
r4-app input,
r4-app textarea {
	flex-grow: 1;
}
r4-app textarea {
	min-height: calc(var(--s) * 5);
	resize: vertical;
}

/* components */
r4-page-header h1 {
	margin-bottom: 0;
}
r4-page-header menu {
	justify-content: center;
}
r4-app-menu {
	display: flex;
	justify-content: center;
	background-color: transparent;
}

r4-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--s-container);
	& r4-channel-card {
		& r4-channel-url {
			display: none;
		}
	}
}
r4-list-item + r4-list-item {
	margin-top: var(--s);
}
r4-track {
	border: 1px solid transparent;
	background-color: var(--c-bg--track);
	padding: calc(var(--s) / 2);
}
r4-track-body {
	display: flex;
	flex-direction: column;
}
r4-track-title {
	font-weight: bold;
	flex-grow: 1;
}
r4-track-description {
	word-break: break-word;
	& a {
		padding: calc(var(--s) / 3);
		color: var(--c-fg);
		text-decoration: underline;
		text-underline-offset: calc(var(--s) / 3);
		text-decoration-color: var(--c-link);
	}
}
r4-track-mentions a::before,
r4-track-tags a::before {
	color: var(--c-bg);
}
r4-query {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
r4-button-play {
	margin: calc(var(--s) / 2);
}
r4-layout::part(menu) {
	order: 1;
}
r4-layout::part(controls-button) {
	padding: var(--s);
	margin-left: calc(var(--s) / 2);
}
r4-layout::part(playback-summary) {
	background-color: var(--c-bg);
}

r4-layout::part(menu) {
	position: sticky;
	bottom: 0;
}
r4-layout header[slot='menu'] {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	background-color: var(--c-bg);
}
r4-router > * {
	justify-content: center;
}
r4-page-main,
r4-page-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	& section {
		width: 100%;
		max-width: var(--s-container);
		padding: calc(var(--s) / 2);
		&:not(:only-child) {
			flex-grow: 1;
		}
	}
}
r4-page-main {
	flex-grow: 1;
}
r4-page-settings {
	& section {
		border: 1px solid var(--c-bg--inputs);
		padding: var(--s);
		margin: var(--s);
	}
}

r4-track-create,
r4-sign-in,
r4-sign-out,
r4-sign-up,
r4-page-add {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	& form {
		padding: calc(var(--s) / 2);
		border: 1px solid var(--c-fg);
		border-radius: var(--s-radius);
		& fieldset {
			margin: calc(var(--s) / 2);
		}
	}
}
r4-page-add form {
	border-color: var(--c-theme);
}

r4-app form slot[name='submit'] fieldset:last-of-type {
	justify-content: flex-end;
}

r4-page-map {
	& r4-map {
		width: 100%;
		height: 100%;
	}
}
r4-page-channel {
	& r4-channel-card {
		& r4-button-play {
			order: 1;
			& button::after {
				content: 'Listen';
			}
		}
	}
}

r4-map {
	& r4-channel-card {
		max-width: 25rem;
		& r4-channel-url {
			display: none;
		}
	}
	& code {
		font-size: var(--s-font-s1);
	}
}

r4-channel-card {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--c-fg);
	background: var(--c-bg--channel-card);
	& r4-button-play {
		order: -1;
		display: flex;
		justify-content: center;
	}
	& r4-avatar {
		height: 100%;
		display: flex;
		align-items: center;
		padding: calc(var(--s) / 2);
	}
	& r4-channel-name {
		font-weight: bold;
	}
	& r4-channel-card-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* slug as channel alias, with a max-width */
r4-channel-slug::before {
	content: '@';
}
r4-channel-slug {
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: clamp(calc(var(--s) * 10), calc(var(--s) * 30), 50vmin);
	overflow: hidden;
}