/**
 * ident_switch - Account switcher styles.
 *
 * Copyright (C) 2026 Gecka
 *
 * Licensed under AGPL-3.0+.
 *
 * @url https://github.com/Gecka-apps/ident_switch
 */

/* Wrapper around <select> + badge */
.ident-switch-wrapper {
	display: inline-flex;
	align-items: center;
	width: 100%;
}

/* Account switcher <select>: hide native arrow, show SVG chevron */
.ident-switch-wrapper select {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ccc'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.3em center;
	background-size: 10px 6px;
}

/*
 * Prevent flash of original username before JS prepends the switcher.
 * The JS hides these elements at DOMReady, but the CSS rules below hide them
 * earlier (during initial render) — only loaded when the switcher will actually
 * be shown, so users without secondary accounts keep the default username display.
 */

/* Elastic skin: switcher is prepended inside .header-title.username.
   Hide the original username via visibility on the parent (affects the text
   node), then re-show the wrapper. Unlike color/font-size, this preserves the
   parent's flex/line-height context, keeping the wrapper vertically centered. */
.header-title.username {
	visibility: hidden;
}
.header-title.username > *:not(.ident-switch-wrapper) {
	display: none;
}
.header-title.username > .ident-switch-wrapper {
	visibility: visible;
}

/* Larry skin: switcher is prepended next to .username inside #topline .topright */
#topline .topright > .username {
	display: none;
}

/* Unread badge */
.ident-switch-badge {
	flex-shrink: 0;
	min-width: 1.4em;
	padding: 0.2em 0.5em;
	font-size: 0.7em;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	color: #fff;
	background-color: #e74c3c;
	border-radius: 1em;
	margin-left: 0.3em;
}