.citizen-drawer {
	&__card {
		padding: var( --space-sm ) 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 img {
		width: auto;
		height: 3rem;
	}

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

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

	&__menu {
		display: grid;
		max-width: 92vw;
		justify-content: center;
		padding: var( --space-sm ) var( --space-md );
		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: 0.625rem 1.25rem; // TODO: Make this a variable
			border-radius: var( --border-radius--small );

			&:after {
				.resource-loader-list-icon;
				display: block;
				background-size: contain;
				opacity: var( --opacity-icon-base );
				transition: @transition-opacity;
			}

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

				&:after {
					opacity: var( --opacity-icon-base--hover );
				}
			}

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

				&:after {
					opacity: var( --opacity-icon-base--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();
	}
}

.skin-citizen-dark {
	// Icons in nav links
	.citizen-drawer__menu a:after {
		filter: invert( 1 );
	}
}

@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;
		}
	}
}