/**
 * Header auth: user icon opens a small dropdown (log in / account / log out).
 *
 * @package VPay
 */

.vpay-header-auth-block {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.vpay-header-auth.vpay-header-auth--dropdown {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.95rem;
	line-height: 1.4;
	color: CanvasText;
}

.vpay-header-auth__toggle {
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.35rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, Canvas 92%, CanvasText 8%);
	color: inherit;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.vpay-header-auth__toggle::-webkit-details-marker {
	display: none;
}

.vpay-header-auth__toggle::marker {
	content: "";
}

.vpay-header-auth__toggle:hover {
	background: color-mix(in srgb, Canvas 88%, CanvasText 12%);
	border-color: color-mix(in srgb, CanvasText 28%, transparent);
}

.vpay-header-auth__toggle:focus {
	outline: none;
}

.vpay-header-auth__toggle:focus-visible {
	box-shadow: 0 0 0 2px color-mix(in srgb, CanvasText 35%, transparent);
}

.vpay-header-auth--dropdown[open] .vpay-header-auth__toggle {
	background: color-mix(in srgb, Canvas 86%, CanvasText 14%);
	border-color: color-mix(in srgb, CanvasText 32%, transparent);
}

.vpay-header-auth__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.vpay-header-auth__icon-svg {
	display: block;
}

.vpay-header-auth__dropdown {
	position: absolute;
	z-index: 100000;
	top: 100%;
	margin-top: 0.35rem;
	inset-inline-end: 0;
	min-width: 12rem;
	max-width: min(18rem, 100vw - 1.5rem);
	padding: 0.35rem 0;
	border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
	border-radius: 0.5rem;
	background: Canvas;
	color: CanvasText;
	box-shadow:
		0 4px 14px color-mix(in srgb, CanvasText 12%, transparent),
		0 0 0 1px color-mix(in srgb, CanvasText 6%, transparent);
	box-sizing: border-box;
}

.vpay-header-auth__nav {
	margin: 0;
	padding: 0;
}

.vpay-header-auth__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vpay-header-auth__item {
	margin: 0;
	padding: 0;
}

.vpay-header-auth__link {
	display: block;
	padding: 0.55rem 1rem;
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	border-radius: 0.25rem;
}

.vpay-header-auth__link:hover,
.vpay-header-auth__link:focus-visible {
	background: color-mix(in srgb, CanvasText 8%, transparent);
	text-decoration: none;
	outline: none;
}

.vpay-header-auth__link:focus-visible {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, CanvasText 22%, transparent);
}