/** Design System Variables {{{1 */
:root {
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;

	--line-xs: 1rem;
	--line-sm: 1.25rem;
	--line-base: 1.5rem;
	--line-2xl: 2rem;
	--line-3xl: 2.25rem;

	--unit-1: 4px;
	--unit-2: 8px;
	--unit-3: 12px;
	--unit-4: 16px;
	/** Add larger units as needed, multiples of 4 */
	--unit-25: 100px;

	--color-darkgrey: #777777;
	--color-lightgrey: #aaaaaa;

	--color-primary: #1111aa; /* used for the important links */
	--color-primary-darker: #5511aa; /* Currently a completely different color for "visited" links */
	--color-secondary: #bb4411;
	--color-tertiary: #777777;
	--color-text: #555555;
	--color-background: #f0f3f0;
}

/** }}} */
/** Global styles {{{1 */
body {
	font-family: Arial, sans-serif;
}

a {
	text-decoration: none;
}

/** }}} */
/** Page Component styles {{{1 */

page-bookmark-list header {
	font-size: var(--text-sm);
	line-height: var(--line-sm);
	display: flex;
}


page-bookmark-list header .pagination {
	color: var(--color-tertiary);
}

page-bookmark-list header .nav-earlier {
	width: var(--unit-25);
}


/** }}} */
/** Component Styles {{{1 */
/** AppHeader Component {{{2 */

app-header {
	display: flex;
	width: 100%;
	align-content: baseline;
	line-height: var(--line-3xl);
	border-bottom: dotted 1px var(--color-lightgrey);
	margin-bottom: var(--unit-2);
	padding-bottom: var(--unit-1);
}

app-header .logo {
	margin-right: var(--unit-2);
	font-size: var(--text-2xl);
}

app-header .logo a {
	color: var(--color-darkgrey);
}
app-header .logo a:hover, app-header .logo a:visited {
	color: var(--color-darkgrey);
}

app-header ul, app-header li {
	list-style: none;
	margin: 0;
	padding: 0;
}

app-header nav {
	flex: 1;
	display: flex;
	align-items: right;
	justify-content: right;
	font-size: var(--text-sm);
	line-height: var(--line-sm);
}

app-header nav a {
	color: var(--color-primary);
}

/* Logout link should never look "visited", that doesn't make sense */
app-header nav a:visited {
	color: var(--color-primary);
}

/** }}} */
/** BookmarkItem component {{{2 */

bookmark-item {
	display: block;
	margin: var(--unit-4) 0;
}

bookmark-item .description {
	font-size: var(--text-sm);
	line-height: var(--line-xs); /* yes, the smaller line height is intentional, I think it looks nice. */
	color: var(--color-text);
}

bookmark-item .meta {
	font-size: var(--text-xs);
	line-height: var(--line-xs);
}

bookmark-item .meta a {
	color: var(--color-tertiary);
}

bookmark-item > a {
	color: var(--color-primary);
}

/* }}} */
/* Tag list for Bookmark Items {{{2 */

tag-list {
	display: block;
	font-size: var(--text-sm);
	line-height: var(--line-sm);
}

tag-list .tag {
	display: inline-block;
	margin-right: var(--unit-1);
	color: var(--color-secondary);
}

tag-list a.tag:visited {
	color: var(--color-secondary);
}

/** }}} */
/* End of component styles }}} */