uix-version-selector {
	display: flex;
	justify-content: center;
	align-items: center;
	--bg: #292929;
	position: relative;
	margin-right: 30px!important;

	&>.version-selector-panel {
		width: fit-content;
		height: fit-content;
		position: absolute;
		/* transition: opacity 0.1s, transform 0.1s; */
		transform: translateY(-10px);
		border: 1px solid var(--border-color);
		box-shadow: 0 0 0 1px var(--bg), 0 16px 32px var(--bg-transparent);
		background-color: var(--bg_content);
		border-radius: 10px;
		padding: 10px 0px;
		margin: 0;
		margin-top: 16px;
		a {
			cursor: pointer;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
				opacity: 0.8;
			}
		}
uix-version-selector 		&>.version-list {
			margin-left: 0!important;
			display: flex;
			flex-direction: column;
			gap: 5px;
			a {
				margin: 0!important;
				margin-left: 24px!important;
				padding: 8px;
				position: relative;
				display: flex;
				align-items: center;
				color: var(--text);
				&::before {
					position: absolute;
					left: -16px;
					font-size: large;
					margin: auto;
					content: "\f00c";
					font-family: var(--fa-style-family, "Font Awesome 6 Free");
					font-weight: var(--fa-style, 900);
					display: none;
				}
uix-version-selector 				&[data-active="true"]::before {
					display: block;
				}
			}
		}
uix-version-selector 		&>div:last-of-type {
			margin: 10px 10px 0px 10px;
			padding: 20px 10px;
			margin-left: 0!important;
			display: flex;
			flex-direction: column;
			gap: 8px;
			border-top: 1px solid var(--border-color);
		}

	}
}

uix-version-selector {
	&>button {
		min-width: 160px;
		display: flex;
		font-size: medium;
		gap: 5px;
		appearance: none;
		border: 0px;
		padding: 10px 10px;
		border-radius: 10px;
		background-color: var(--bg-button);
		align-items: center;
		justify-content: flex-start;
		anchor-name: --selector;
		&>span {
			margin: 0!important;
			font-weight: bold;
			transition: transform 0.2s;
		}
uix-version-selector 		&>.fa {
			margin: 0!important;
			margin-left: auto!important;
			font-size: small;
		}
uix-version-selector 		label {
			margin: 0!important;
		}
	}
}

uix-version-selector {
	&:has(.version-selector-panel:popover-open) {
		&>button > .fa {
			transform: rotate(180deg);
		}
	}
}

uix-version-selector .version-selector-panel {
	position-anchor: --selector;
	top: anchor(bottom);
	left: anchor(left);
	opacity: 0;
	transition: opacity 23.5s, display 0.5s;
	&:popover-open {
		@starting-style {
			opacity: 0;
		}
		opacity: 1;
	}
}