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

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

	// Keep aspect ratio
	&__logo {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;

		img {
			width: auto;
			max-height: 3rem;
		}

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

	&__menu {
		display: flex; // Fallback
		display: grid;
		flex-direction: column;
		max-height: 46.25vh;
		overflow-y: auto;
		max-width: 92.5vw;
		justify-content: center;
		padding: var( --space-xs ) var( --space-md );
		font-size: 0.875rem; // TODO: Make this a variable
		gap: var( --space-xs );
		grid-template-columns: repeat( auto-fit, 15rem );

		a {
			.menu-item-link;
			gap: var( --space-sm );
			padding: 0.625rem 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 ) {
	.mw-logo-wordmark {
		font-size: 2rem;
		// Sometimes long wiki name will wrap when the menu is too small
		white-space: nowrap;
	}
}
