sendou.ink/app/components/AbilitiesSelector.module.css

.container {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	gap: var(--s-3);
}

.slots {
	display: grid;
	margin: 0 auto;
	gap: var(--s-2);
	grid-template-columns: repeat(4, max-content);
	place-items: center;
}

.slot {
	position: relative;
	display: grid;
	border-radius: 50%;
	touch-action: manipulation;
	transition:
		transform 0.1s ease,
		opacity 0.2s ease,
		filter 0.2s ease;

	&.draggable {
		cursor: grab;
		user-select: none;
		-webkit-touch-callout: none;
	}

	&.dimmed {
		filter: grayscale(1);
		opacity: 0.3;
	}

	&.dragSource {
		opacity: 0.3;
	}

	&.highlighted {
		transform: scale(1.15);
	}
}

.ghost {
	position: absolute;
	display: grid;
	border: var(--border-style-high);
	border-radius: 50%;
	border-right: 0;
	border-bottom: 0;
	background: var(--color-bg-ability);
	animation: ghost-fade-in 0.2s ease;
	inset: 0;
	pointer-events: none;

	& img {
		width: 100%;
		height: 100%;
		opacity: 0.35;
	}
}

@keyframes ghost-fade-in {
	from {
		opacity: 0;
	}
}

.isDragging {
	box-shadow: 0 0 100px inset rgb(255 255 255 / 25%);
}

.dragOverlay {
	cursor: grabbing;
	transition: opacity 0.1s ease;

	&.dropRemoves {
		opacity: 0.4;
	}
}