.container {
	--map-width: 90px;
	--map-height: 50px;
}

.slot {
	font-size: var(--font-xs);
	display: grid;
	place-items: center;
	color: var(--color-text-high);
	border-radius: var(--radius-field);
	font-weight: var(--weight-bold);
	width: 24px;
	height: 24px;
	border: 2px dotted var(--color-bg-higher);
}

.slotIcon {
	color: var(--color-success);
	width: 16px;
	height: 16px;
}

.slotPicked {
	border-style: solid;
}

.mapButton {
	background-image: var(--map-image-url);
	background-size: cover;
	height: var(--map-height);
	width: var(--map-width);
	border: none;
	background-color: transparent;
	transition:
		filter,
		opacity 0.2s;
	border-radius: var(--radius-box);

	&:active {
		transform: none;
	}
}

@keyframes wiggle {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(5deg);
	}

	75% {
		transform: rotate(-5deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

.mapButtonWiggle {
	animation: wiggle 0.25s infinite;
	animation-iteration-count: 1;
}

.mapButtonGreyedOut {
	filter: grayscale(100%) !important;
	opacity: 0.4 !important;
}

.mapButtonIcon {
	position: absolute;
	top: 2px;
	color: var(--color-success);
	width: 48px;
	height: 48px;
	cursor: pointer;
}

.mapButtonText {
	position: absolute;
	top: 14px;
	text-transform: uppercase;
	font-weight: var(--weight-bold);
	cursor: not-allowed;
}

.mapButtonLabel {
	font-size: var(--font-2xs);
	color: var(--color-text-high);
	font-weight: var(--weight-semi);
}

.mapButtonContainer {
	width: var(--map-width);
	text-align: center;
}

.divider {
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
	text-transform: uppercase;
	display: flex;
	gap: var(--s-2);

	&::before,
	&::after {
		border-bottom: 2px dotted var(--color-bg-higher);
	}
}

.modeTabs {
	display: flex;
	gap: var(--s-1);
}

.modeTab {
	display: grid;
	place-items: center;
	padding: var(--s-1-5);
	border: var(--border-style);
	border-radius: var(--radius-full);
	background-color: transparent;

	& img {
		filter: grayscale(100%);
		opacity: 0.5;
		transition:
			filter 0.2s,
			opacity 0.2s;
	}

	&:hover img {
		opacity: 0.8;
	}

	&:focus-visible {
		outline: var(--focus-ring);
	}
}

.modeTabActive {
	background-color: var(--color-bg-higher);

	& img {
		filter: none;
		opacity: 1;
	}
}
