.citizen-drawer {
	&__card {
		padding: var( --space-xs ) 0;
		.citizen-header-card( left );
	}

	&__header {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var( --space-sm )  var( --space-md ) var( --space-md );
		border-bottom: 1px solid var( --border-color-base );
		gap: var( --space-md );
	}

	// Keep aspect ratio
	&__logo img {
		width: auto;
		height: 3rem;
	}

	&__siteinfo {
		display: flex;
		flex-direction: column;
		gap: var( --space-xxs );

		.mw-logo-wordmark {
			color: var( --color-base--emphasized );
			font-size: 1.5rem;
		}
	}

	&__menu {
		--size-icon: 1rem;
		display: grid;
		max-width: 92vw;
		justify-content: center;
		padding: var( --space-xs );
		font-size: 0.875rem; // TODO: Make this a variable
		gap: var( --space-sm );
		grid-template-columns: repeat( auto-fit, 15rem );

		a {
			.menu-item-link;
			padding: var( --space-xs ) var( --space-md ); // TODO: Make this a variable
			border-radius: var( --border-radius--small );

			&:hover {
				.menu-item-link-hover;
			}

			&:active {
				.menu-item-link-active;
			}
		}
	}
}

// Checkbox hack
#citizen-drawer__checkbox:checked {
	~ .citizen-drawer__card {
		.citizen-card-show;
	}
}

// Wait for first paint before animating
.citizen-animations-ready {
	.citizen-drawer__card {
		.citizen-card-transition();
	}
}

@media ( min-width: @width-breakpoint-tablet ) {
	.citizen-drawer {
		&__logo img {
			// Bigger logo
			height: 5rem;
		}

		&__siteinfo {
			.mw-logo-wordmark {
				font-size: 2rem;
				// Sometimes long wiki name will wrap when the menu is too small
				white-space: nowrap;
			}
		}
	}
}

@media ( min-width: @width-breakpoint-desktop ) {
	.citizen-drawer {
		&__header {
			justify-content: flex-start;
		}
	}
}