@import "/lib/css/base.css";

body {
	padding: 1rem;
	line-height: 1.2;
	font-family: system-ui, sans-serif;
	background-color: ButtonFace;
}

@media (min-width: 640px) {
	.container {
		display: flex;
		gap: 1rem;
	}
}

main {
	flex: 1 1 0%;
	padding: 0;
}

.v-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1rem;
}

.map {
	width: 100%;
	height: 270px;
}

.map__link {
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;

	&:hover,
	&:focus {
		background-color: ActiveText;
		box-shadow: 0 0 0 0.25rem ActiveText;
	}
}

.map__img {
	max-block-size: 100%;
	border: 1px solid ButtonBorder;
	background-color: Canvas;
	object-fit: none;
}

#shuffle-btn {
	width: 100%;
	padding: 0.25em;

	&:hover,
	&:focus {
		color: Canvas;
		background-color: CanvasText;
		outline-color: CanvasText;
	}
}

#tag-filter-input {
	width: 100%;
	margin-block: 0.5rem;
	padding: 0.25rem;
	font-size: 1rem;
	color: CanvasText;
	border: 1px solid ButtonBorder;
}

#tag-filter-input:focus {
	border-color: currentColor;
}

.tags-nav {
	flex: none;
	width: 25%;
	max-width: 15rem;
	font-size: 12pt;
}

.tags-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tags-list__item {
	display: inline-block;
	margin: 1px;
}

.tag-btn {
	display: inline-flex;
	gap: 2px;
	padding-block: 2px;
	padding-inline: 4px;
	font-size: 10pt;
	white-space: nowrap;
	background-color: Canvas;
	border: 1px solid ButtonBorder;
	overflow: hidden;
}

.tag-btn:hover,
.tag-btn:focus {
	color: Canvas;
	background-color: CanvasText;
}

.tag-btn.is-applied {
	color: Canvas;
	background-color: CanvasText;
}