/* Pinned repositories in the top bar. Companion to assets/js/pins.js.
   Every colour comes from the theme's own variables, so this follows whichever
   theme is active rather than assuming Nord. */

/* --- pinned links in the navbar ---------------------------------------- */
/* These reuse Forgejo's own .item styling, so only the icon needs handling.
   The spacing is a flex `gap` on the link rather than a margin on the icon:
   Forgejo zeroes margins on svgs inside navbar items and wins that
   specificity fight. */
#navbar .navbar-left a.item.pinned-repo {
	display: flex;
	align-items: center;
	gap: .4rem;
}
#navbar .navbar-left a.item.pinned-repo .svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

/* --- the menu ----------------------------------------------------------- */
/* Forgejo's navbar dropdowns hang off the right edge; this one lives on the
   left, so it opens leftward instead. */
#navbar .pins-menu > summary {
	cursor: pointer;
}
#navbar .pins-menu > .pins-menu-content {
	inset-inline-start: 0;
	inset-inline-end: auto;
	width: 21rem;
	max-width: calc(100vw - 2rem);
	padding: .5rem;
}

#navbar .pins-menu .pins-menu-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	padding: .15rem .35rem .45rem;
}
#navbar .pins-menu .pins-menu-title {
	font-size: .85em;
	font-weight: 600;
	color: var(--color-text-light-1);
}
#navbar .pins-menu .pins-menu-count {
	font-size: .8em;
	font-variant-numeric: tabular-nums;
	color: var(--color-text-light-3);
}
#navbar .pins-menu .pins-menu-count.is-full {
	color: var(--color-warning-text);
}

#navbar .pins-menu .pins-menu-search {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: .45rem .6rem;
	border: 1px solid var(--color-input-border);
	border-radius: var(--border-radius);
	background: var(--color-input-background);
	color: var(--color-input-text);
}
#navbar .pins-menu .pins-menu-search:focus {
	border-color: var(--color-primary);
	outline: none;
}

#navbar .pins-menu .pins-menu-list {
	margin-top: .4rem;
	max-height: 60vh;
	overflow-y: auto;
}

/* One row is a pin toggle plus a "go to repository" link. Deliberately divs
   rather than the <ul><li> a Forgejo dropdown normally holds: Forgejo styles
   `details.dropdown > .content > ul > li > :is(a, button)` with width:100%,
   which is right for one item per row and wrong for two, and it squeezed the
   repository name to zero width. */
#navbar .pins-menu .pins-menu-row {
	display: flex;
	align-items: stretch;
	gap: .15rem;
	border-radius: var(--border-radius);
}
#navbar .pins-menu .pins-menu-row:hover {
	background: var(--color-hover);
}
#navbar .pins-menu .pins-menu-row.is-pinned {
	background: var(--color-primary-alpha-20);
}
#navbar .pins-menu .pins-menu-row.is-pinned:hover {
	background: var(--color-primary-alpha-30);
}

#navbar .pins-menu .pins-menu-toggle {
	display: flex;
	align-items: center;
	gap: .55rem;
	flex: 1 1 auto;
	min-width: 0;             /* lets the name ellipsise instead of overflowing */
	padding: .45rem .5rem;
	border: none;
	border-radius: var(--border-radius);
	background: none;
	color: var(--color-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
#navbar .pins-menu .pins-menu-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* The owner is repeated on every row of a single-user instance, so it is
   dimmed and the repository name carries the weight. */
#navbar .pins-menu .pins-menu-owner {
	color: var(--color-text-light-3);
}
#navbar .pins-menu .pins-menu-repo {
	color: var(--color-text);
}

/* Unpinned rows show a dimmed outline of the icon, pinned ones a solid accent,
   so the state is readable without a checkbox column. */
#navbar .pins-menu .pins-menu-toggle .svg {
	flex-shrink: 0;
	color: var(--color-text-light-3);
	opacity: .4;
}
#navbar .pins-menu .pins-menu-row.is-pinned .pins-menu-toggle .svg {
	color: var(--color-primary);
	opacity: 1;
}
#navbar .pins-menu .pins-menu-row.is-blocked .pins-menu-toggle {
	cursor: not-allowed;
	opacity: .5;
}

#navbar .pins-menu .pins-menu-open {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 .5rem;
	border-radius: var(--border-radius);
	color: var(--color-text-light-3);
}
#navbar .pins-menu .pins-menu-open:hover {
	background: var(--color-active);
	color: var(--color-text);
}

#navbar .pins-menu .pins-menu-empty {
	padding: .75rem .5rem;
	color: var(--color-text-light-2);
	text-align: center;
}

/* --- the Pin button in a repository header ------------------------------ */
.repo-buttons .pin-repo-button.active .svg {
	color: var(--color-primary);
}