@charset "UTF-8";

body
{
	transition: background-color var(--SidebarTransitionFast);

	animation: fadeIn .8s;
}

.version
{
	position: absolute;
	right: var(--Spacing);
	bottom: var(--Spacing);

	color: var(--BG2);
	font-size: large;
}

.login
{
	opacity: 1;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-weight: bold;
	user-select: none;

	Xtransition: opacity var(--SidebarTransitionFast);
	transition: opacity .2s;

}

.login h1
{
	font-size: 36px;
	margin-block-start: 0;
	padding-top: .67em;
}

.login a
{
	color: var(--FontColor);
	font-size: 16px;
	text-decoration: none;
}

.login .messages
{
	font-size: 16px;
	color: var(--Accent1);
}

.login .messages:empty
{
	display: none;
}

.login .messages ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.login .messages ul li
{

}

.login .provider
{
	display: inline-block;

	Xcursor: pointer;
	user-select: none;

	background: var(--BG2);
	padding: calc( var(--Spacing) * 2);
	margin: var(--Spacing);

	border-radius: 20px;
	border: 2px solid var(--BorderColor2);

	box-shadow: 20px 20px 20px var(--ShadowColor);
	text-shadow: 10px 10px 10px var(--ShadowColor2);

	transition:
		opacity          var(--SidebarTransitionFast),
		box-shadow       var(--SidebarTransitionFast),
		background-color var(--SidebarTransitionFast),
		border-color     var(--SidebarTransitionFast);

	transition-timing-function: var(--SidebarTransitionFunction);
}

.login .provider .icon
{
	--IconSize: 58px;
	vertical-align: middle;
	--LinkIconShadow: 5px 5px 5px var(--ShadowColor);

	transition:
		box-shadow 	 var(--SidebarTransitionFast),
		background-color var(--SidebarTransitionFast),
		border-color	 var(--SidebarTransitionFast);

	transition-timing-function: var(--SidebarTransitionFunction);
}

.login .provider:hover
{
	background-color: var(--BG3);
	--LinkColorHoverBG: var(--Accent2);
}

.login .provider:hover .icon
{
	--LinkHoverColorBG: var(--Occent2);
	--LinkIconShadow: 10px 10px 5px var(--ShadowColor1);
}

.login .provider:active
{
	background-color: var(--Accent3);
	box-shadow:
		5px 5px 5px var(--ShadowColor),
		10px 10px 10px var(--ShadowColor1) inset;
}

.login .provider:active .icon
{
	background-color: var(--FG1);
	--LinkIconShadow: 5px 5px 5px var(--ShadowColor3) inset;
	border-color: var(--FG6);
}

.login .provider .icon
{
	--IconSize: 58px;
	vertical-align: middle;
	--LinkIconShadow: 5px 5px 5px var(--ShadowColor);

	transition:
		box-shadow 	 var(--SidebarTransitionFast),
		background-color var(--SidebarTransitionFast),
		border-color	 var(--SidebarTransitionFast);

	transition-timing-function: var(--SidebarTransitionFunction);
}

.login:active:has(.provider:hover) .provider:not(:active),
.login.clicked .provider
{
	opacity: .5;
	background-color: var(--BG-W);
}

body:has(.provider:active)
{
	background-color: var(--BG-W);
}

.clicked
{
	opacity: 0;	
}