/**
 * Classic / Server appearance toggle.
 * Classic: floating pill. Server: docked at bottom of left sidebar.
 */

.ae-toggle-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 100%;
}

.ae-toggle-stack--float {
	position: fixed;
	bottom: 16px;
	left: 16px;
	right: auto;
	z-index: 100000;
	max-width: calc(100vw - 32px);
}

.ae-toggle-stack--docked {
	width: 100%;
	align-items: stretch;
}

.ae-skin-toggle {
	display: inline-flex;
	width: auto;
	max-width: 100%;
	gap: 2px;
	padding: 4px;
	margin: 0;
	background: rgba(30, 31, 34, 0.94);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
}

.ae-toggle-stack--float .ae-skin-toggle--float {
	position: static;
	left: auto;
	bottom: auto;
	right: auto;
	max-width: 100%;
}

.ae-skin-toggle--float {
	position: fixed;
	bottom: 16px;
	left: 16px;
	right: auto;
	z-index: 100000;
	max-width: calc(100vw - 32px);
}

body:not(.skin-discord) .ae-skin-toggle--float {
	background: #10243e;
	border-color: rgba(255, 255, 255, 0.14);
}

.ae-skin-toggle__btn {
	display: inline-block;
	flex: 1 1 auto;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	color: #c5c9ce !important;
	text-decoration: none !important;
	white-space: nowrap;
	text-align: center;
}

.ae-skin-toggle__btn:hover,
.ae-skin-toggle__btn:focus {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.08);
}

.ae-skin-toggle__btn.is-active {
	background: #5865f2;
	color: #fff !important;
}

/* Server: docked in left menu footer */
body.skin-discord .ae-server-sidebar__footer {
	flex-shrink: 0;
	padding: 10px 8px 12px;
	border-top: 1px solid var(--ae-srv-divider, #3f4147);
	background: var(--ae-srv-sidebar, #2b2d31);
}

body.skin-discord .ae-skin-toggle--docked {
	position: static;
	display: flex;
	width: 100%;
	background: var(--ae-srv-rail, #1e1f22);
	border-color: transparent;
}

body.skin-discord .ae-skin-toggle--docked .ae-skin-toggle__btn.is-active {
	background: var(--ae-srv-accent, #5865f2);
}

@media (max-width: 480px) {
	.ae-toggle-stack--float,
	.ae-skin-toggle--float {
		left: 12px;
		bottom: 12px;
	}

	.ae-skin-toggle__btn {
		padding: 8px 12px;
		font-size: 0.75rem;
	}
}